Hur man lär sig webbdesign från grunden och skapar en tilltalande webbplats

Webbdesign färdigheter är en viktig färdighet att ha särskilt i denna moderna tid och informationsålder.

De flesta människor som tillbringar mycket tid online vid ett eller annat tillfälle finner sig själva överväga att göra något webbdesignarbete antingen för sig själva eller för andra.

Webbdesign är en färdighetsuppsättning som omfattar:

1. Designa det visuella gränssnittet för en webbplats
2. Designa webbgrafik
3. Designa användarupplevelsen
4. Författarskap
5. SEO eller sökmotoroptimering

1 Webbdesign vs webbutveckling

Bildkrediter: Adham Dannaway

Många blandar ihop webbdesign och webbutveckling. Skillnaderna är följande:

1. Webbdesign fokuserar på känslan och utseendet på en webbplats medan webbutveckling fokuserar på att skapa baksidan av en webbplats.
2. Webbdesigners använder JavaScript, CSS och html som sina huvudsakliga verktyg medan webbutvecklare använder ruby, C, Python, PHP och .NET som sina huvudsakliga verktyg.
3. En webbdesigner är mer konstnärlig i sina färdigheter medan en utvecklare är mer teknisk eller en linjär tänkare.
4. Som webbdesigner måste du vara kompetent på färgscheman, informationsflöde och grafisk design men som utvecklare bör du huvudsakligen ha kunskaper i programmering.
5. Webbdesigners handlar mer om att skapa en användarupplevelse som är tilltalande för webbsurfare medan webbutvecklare är mer involverade i att skapa användargränssnittet.

Ovanstående distinktioner bör kunna eliminera eventuell förvirring om vad skillnaderna är och leda dig mot ditt önskade mål.

2 Lärresurser som används av webbdesigners

Om du vill lära dig webbdesign finns det flera resurser som du kan använda för att hjälpa dig komma igång med de färdigheter som krävs. De viktigaste online- och offlineresurserna som du kommer att tycka är bra inkluderar:

• Flera webbplatser, både betalda och gratis, inklusive CodeAcademy, W3Schools och många fler
• Videor, inklusive gratis YouTube-kanaler eller betalversioner av videohandledningar
• E-böcker i pdf-, epub- och mobi-format
• Webbseminarier och en-till-en-utbildning online från professionella webbdesigners
• Om du har en vän eller familjemedlem som kan webbdesign och kan lära dig, kan detta vara den snabbaste vägen till att bli webbdesigner

När du har identifierat resursen som du ska använda för att lära dig webbdesign, schemalägg tid för att kunna lära dig och öva.

Beroende på hur hektisk din dag är och vilken resurs du kommer att använda kan du också påskynda inlärningsprocessen beroende på hur snabbt du förstår begreppen som lärs ut.

Beroende på de tutorials som du väljer att lära dig av, kan den huvudsakliga programvaran du kommer att använda antingen vara gratisversioner eller betalversioner.

Låt inte den betalda programvaran som du har hört talas om begränsa din strävan efter att lära dig webbdesign. Du kommer att upptäcka att det finns många gratisprogram där ute som är lika bra, om inte bättre än vissa programvaror som kostar hundratals dollar.

3 Vad du ska studera

1. HTML bör vara där du börjar din väg (naturligtvis efter att ha tagit dig igenom denna information). Du måste behärska språket inklusive användning av taggar, inmatningar, ID:n, klasser och så vidare.
2. Cascading style sheets, allmänt känd som CSS, går vanligtvis hand i hand med HTML. För att använda en analogi, om HTML är kakan, är CSS grädden. CSS gör webbplatsen färgstark och mer tilltalande estetiskt.
3. jQuery och JavaScript kommer att vara användbara om du vill lägga till widgets på din webbplats, till exempel en kalender eller en kalkylator.
4. Om du upptäcker att du har tid för lite mer lärande kan du bekanta dig med några webbdesignfärdigheter som PHP, Python, Ruby och MySQL. Dessa färdigheter kommer att vara viktiga om du vill bygga en stor interaktiv webbplats.

Kom ihåg att ta fart på ditt lärande. Du vill inte förvandla din spänning och entusiasm för webbdesign till en vardaglig och tråkig uppgift. Utbrändhet kan hända om du inte vilar tillräckligt och packar in för mycket kunskap för snabbt.

4 Hur du kan tillämpa dina nya färdigheter

När du väl har lärt dig färdigheterna finns det inget bättre sätt att internalisera din nya talang än att faktiskt praktisera den. För att göra det, påbörja ett projekt. Nedan följer de logiska stegen i utvecklingen av projekt du bör ta upp för att lära dig webbdesign och praktiskt kunna använda den.

1. Gör den där webbplatsen du alltid velat göra. Du vet…sajten som gjorde dig så exalterad över vad du kan göra med webbdesignfärdigheter. Se om din nuvarande kompetens kan få dig tillräckligt nära din vision och gå tillbaka till dina handledningar för att bättre förstå hur du implementerar dina färdigheter för att skapa din vision.
2. Se om din familj och dina vänner behöver en webbplats och hjälp dem att skapa sin vision och lägga den online. Detta är ganska användbart eftersom det hjälper dig att tänka på tidslinjer och sätta tillräckligt mycket press på dig för att börja ta projekt på allvar när du lär dig.
3. När du har lyckats med din familj/vänners webbplats är nästa logiska steg att hitta någon som betalar dig för att designa en webbplats åt dem. Det finns flera onlineplattformar som samlar människor som vill ha webbdesigner och webbdesigners. De kommer faktiskt att betala dig för att göra detta arbete åt dem.

När du har gjort varje projekt, sätt ihop koden som du använde och förvandla den till en favoritsamling. Detta kommer att hjälpa dig att göra arbetet snabbare varje gång du måste implementera samma kod. Du kanske också kan sätta ihop ett bibliotek, tillräckligt bra för att andra människor vill köpa det.

Du är nu redo att sätta ihop en professionell webbplats.

5 Designa en professionell webbplats

Om du vid denna tidpunkt upptäcker att du blir skrämd av processen att skapa en webbplats eller om arbetet är för viktigt för dig att göra på egen hand, överväg att få professionell hjälp.

Ett bra ställe att börja är online från en sida som BigDropinc.com. De tillhandahåller expertis inom webbdesign, varumärke, marknadsföring och animerade videor för att ge din webbplats en personlig upplevelse för dina kunder.

Om du känner dig säker nog att anta utmaningen att designa en professionellt gjord webbplats, eller om du inte är tillräckligt skrämd för att testa dina färdigheter, läs då vidare.

Steg 1: Bestäm din designväg

Du kan antingen använda biblioteket med favoriter som du började samla in tidigare eller så kan du börja med att använda en färdig mall, valet är ditt.

Färdiggjorda mallwebbplatser eller koder kan köpas online. Välj från en portfölj som du tycker är tillräckligt tilltalande för nuvarande och framtida uppgifter.

Välj från en leverantör som ger bra stöd för sina färdiga mallar och koder. Detta är viktigt eftersom du kommer att redigera eller implementera den förgjorda koden och designen för dina egna behov, och om något går fel kommer du att vilja ha hjälp nära till hands.

Steg 2: Designöverväganden

Oavsett om du väljer att använda din egen kod eller någon annans kod eller mallar, kom ihåg att du vill:

• 1 En strömlinjeformad webbsida: Din webbplats bör vara mycket snabb att ladda och lätt att använda. Beroende på syftet med din webbplats vill du undvika att ha en webbplats som tar för lång tid att ladda. Människor har vanligtvis inte tålamod att vänta på att en webbplats ska laddas om det tar för lång tid.

  Sajten ska också vara lättnavigerad med en tydlig intuitiv meny och så få valmöjligheter som möjligt för webbanvändarna.

  Använd bilder med små optimerade filstorlekar för att hålla en bra balans mellan hastighet och bildkvalitet.

• 2 Webbplatselement bör vara välplacerade: Webbplatsens text, titel, logotyper, sidofält och grafik bör placeras på samma plats på varje sida på webbplatsen för att undvika förvirring och förbättra intuitiv navigering.

  Organisera dina sidelement logiskt så att det blir ett flöde i innehållet från den viktigaste informationen till den minst viktiga informationen.

  Du bör också undvika element som tabeller eftersom innehållet i tabeller inte är lättillgängligt för synskadade som behöver använda programvara för att läsa på skärmen.

• 3 Var konsekvent i din stil: Tematisk harmoni är viktigt för din webbplats. Använd max tre färger och se till att de smälter väl. Här kommer CSS-kunskaperna som du lärde dig tidigare in för att hjälpa dig hantera stilen på din webbplats på alla sidor på din webbplats från en enskild sidkod.

• 4 Gör din text lättläst: Om du har väldigt långa stycken eller text med väldigt litet teckensnitt kommer de flesta läsare att ignorera det du har skrivit.

  Människor dras mot det som ser lätt att ta till sig och det betyder vanligtvis text som är tillräckligt stor för att läsas och information som bryts ner i små bitar som lätt kan smältas och absorberas.

  Använd underrubriker, punkter och siffror för att specificera data som är listade eller för att särskilja information som du vill markera.

• 5 Webbläsarkompatibel: Din publik kommer att använda olika webbläsare för att komma åt din webbplats. Du bör se till att designelement är tillgängliga på samma sätt med de olika webbläsarna.

  Detta innebär att om du måste undvika plugins, funktioner och annan kod som inte är universell för alla webbläsare så gör det.

  Efter att ha designat din webbplats med ovanstående överväganden i åtanke, testa den. Be en medlem av din webbplats målgrupp att gå till webbplatsen och ge dig feedback. Använd feedbacken för att förbättra, ändra eller ta bort det du måste.

Steg 3: Designa med mobila enheter i åtanke

Nuförtiden konsumerar de flesta innehåll via mobila enheter och surfplattor. Med detta i åtanke bör du designa din webbplats så att den enkelt och intuitivt kan justera mellan stationära versioner och mobilversioner, eller skapa två olika sajter för de olika användarna.

Följande är överväganden för webbdesign för mobila enheter:

1. Ta en titt på hur andra webbdesigners har implementerat mobilt innehåll och använd en modell som passar dina och din publiks behov.
2. Håll din webbplats enkel och undvik komplexa strukturer inklusive tabeller och blinkande grafik.
3. Använd en design som enkelt förändras intuitivt från en stationär version till en mobilversion och från en större skärm till en mindre skärm.
4. Undvik webbdesignfunktioner som inte stöds på mobila enheter såvida du inte har en separat mobil- och datorversion för din webbplats. Flash, popup-fönster, java eller ramar gör ditt innehåll omöjligt att se på en mobil enhet.
5. Ibland kanske du upptäcker att en mobilapp passar dina behov bättre än en mobilwebbplats. Överväg dina alternativ för att bättre passa dina och din publiks behov.

Viktigast av allt, när du lånar från andra designers arbete, eller om du behöver använda innehåll som bilder, videor och artiklar från andra innehållsskapare, se till att följa upphovsrättslagarna. Var etisk och håll dig på rätt sida av lagen när du lägger ut innehåll som andra människor kommer att se online.

Det finns flera webbplatser som du kan komma åt innehåll från gratis och dessa webbplatser har krav och villkor som du måste uppfylla för att kunna använda deras innehåll. Andra sajter får betalt för sajter som ger dig tillgång till deras innehåll mot en avgift. De kommer också att ge dig riktlinjer under vilka du kan använda deras innehåll.

Alternativt kan du använda innehåll som du skapar själv. Detta är ofta det bästa alternativet för innehållsskapare som vill erbjuda information som är anpassad efter vad de behöver.