Lär dig grunderna i webbdesign fortfarande på din? Someday? lista? Varför har du inte börjat än? Vi har sammanställt 30 tips och resurser för att hjälpa dig att börja lära dig webbdesign den här månaden (och kanske till och med hitta en ny karriärväg!)
Grafiska formgivare, tryckdesigners och annonsmaterial som vill lära sig något nytt eller bryta sig in på webbplatsen måste sluta förhalla. Varje dag som du inte tar det första steget, lämnar dig en dag längre bakom alla andra!
Följ dessa steg för att börja lära dig hur du skapar din första hemsida, branschens bästa praxis och mycket mer - allt inom 30 dagar!
1. Starta en webbplats
Det bästa sättet att börja lära sig webbdesign är att börja göra det. Det är råd från David Kadavy, författare till Design Hackers.
Jag rekommenderar att du startar en blogg. Jag startade en blogg för att bara ha en webbdesign lekplats, och 7 år senare lanserade jag en bästsäljande bok om ämnet. Att ha ett personligt projekt, som en blogg, ger dig en plats där du kan prova nya saker, och din chef kommer inte att skjuta dig om du förstör dig.
Du behöver inte börja med en massiv webbplats eller galen design. börja små. Spela med webbplatsen, räkna ut vad som gör sakerna att fungera. (Och se till att du inspekterar koden, så att du kan börja bli bekant med vad som gör din webbplats att fungera.)
2. Läs allt du kan
Börja läsa. Eftersom du är på den här bloggen har du förmodligen brukt att hålla reda på vad som händer i designens värld. Fortsätt läsa.
Läs allt du kan om webbdesign och trender, tekniker och bästa praxis. Följ designers du beundrar på sociala medier.
Cast ett brett nät för din webbplatsdesign läsning också. Läs om grunderna för att lära dig lite kod, läs om designteori och läs handledning och aktuella artiklar.
3. Var en effektiv kommunikatör
Om du inte är den mest artikulerade personen, borsta upp på dessa färdigheter. En stor del av webbdesign är kommunikation.
Webbdesigners måste regelbundet kommunicera med kunder för att ta reda på vilket problem designen behöver lösa. de måste kommunicera dessa lösningar och implementera dem också.
4. Prenumerera på Tuts + & Envato Elements
Tänk på en abonnemang på Envato Elements, som också får dig tillgång till den utmärkta Tuts + -resursen.
Tuts + publicera regelbundna kurser om grafisk och webbdesign, från grundläggande tekniker, till de senaste avancerade metoderna och utvecklingen. Det är helt självstarkt, undervisat av sakkunniga instruktörer. Du får också tillgång till Envato Elements, vilket är en bra resurs för att hitta grafik, mallar och mer för att plugga in i ditt webbdesignarbete.
5. Tänk på HTML
HTML, eller hypertext markup språk, är en hörnsten av webbdesign. HTML är skelettet som hjälper till att skapa strukturen på en webbplats och när du kan läsa språket kommer världen med webbdesign att ge mycket mer mening.
W3Schools har en bra HTML-starttutorial med hundratals HTML-exempel som du kan spela med på skärmen för att se vad som händer och exakt hur det fungerar. (Du kanske tycker det är mer intuitivt än du trodde.)
6. Spela med kod på Codeacademy
Medan HTML är en bra start kan du lära dig nästan vilket programmeringsspråk som helst från Codeacademy. Den fria uppsättningen verktyg lär dig att koda med hjälp av interaktiva aktiviteter och spel.
Du kan hämta en Codeacademy kurs var och när du behöver det och starta och sluta efter behov. Välj ett ämne att lära dig - webbutveckling, programmering, datavetenskap - eller språk att fokusera på - HTML & CSS (ett bra ställe att starta), Python, Java, SQL, Ruby och mycket mer.
7. Lär dig att förstå CSS
CSS, eller cascading style sheets, definiera presentationen av ett dokument som är skrivet i HTML, eller XML och SVG.
Som definierat av Mozilla
CSS beskriver hur element ska göras på skärmen, på papper, i tal eller på andra medier.
Mozilla har också en bra samling CSS-resurser för att komma igång med en solid introduktion av hur CSS fungerar, inklusive väljare och egenskaper, skriva CSS-regler, tillämpa CSS till HTML, hur man anger längd, färg och andra enheter i CSS, kaskad och arv, basmodeller för boxmodell och felsökning av CSS. Sedan går modulerna vidare för att förklara stylingtext och lådor.
8. Applicera dina designkunskaper på webben
Om du redan arbetar i ett kreativt eller grafiskt designfält, tänk på de saker du redan vet att du kan ansöka om webbdesign också. De principer som gör något visuellt tilltalande ändras inte utifrån mediet och allt som designteori kommer också att vara användbart i det digitala rummet.
Även om element som inlärningskod kanske inte känns naturligt, har en designbakgrund en enorm bonus. Vilken bra är en vackert kodad webbplats om inte någon vill interagera med det?
9. Betala uppmärksamhet på webbplatser du älskar
Notera webbplatser som du älskar. Vad är det med dem? (Och hur kan du lära dig att kopiera de här elementen?) Var uppmärksam på:
- Typografi
- Navigering
- Användning av bilder och utrymme
- Design av blanketter
- Animering och rullningseffekter
- Färg
10. Rita en Wireframe
Wireframing är en webbdesigners brainstorming.
I sin renaste form är en wireframe en skiss av vad webbplatsen kommer att bli. Det är inte en översikt av estetiska element, snarare en plan för webbplatsen. Att skriva en wireframe handlar inte egentligen om utseendet på denna design, det handlar om informationsstrukturen däri.
Är du osäker på hur man skapar en wireframe? Digital Telepathy har en guide för bästa praxis för att hjälpa dig att lära dig.
11. Ta lite tid att lära skiss
Sketch är ett vektorritningsverktyg för Mac som gör det enkelt att skapa designelement. Många designers vänder sig till Sketch för att skapa UI-element och upprepade designblock.
Den är full med plugins och låter dig exportera kod för enkel användning och åtkomst.Det är ett av de mest kraftfulla och populära verktygen att komma runt sedan Adobes Creative Suite och helt värt din tid.
12. Håll dig uppdaterad med teknik
AI, VR, AR, 360-graders video, bots.
Det finns så många nya tekniker och trender att det kan vara svårt att hålla koll på. Men du måste göra en punkt för att hålla dig ovanpå dessa förändringar.
Hantera dem en i taget och börja med teknik som är mest direkt relaterade till det arbete du gör. Om du har en webbplats med onlinechatt, börja med att lära dig om bots. Eller om du använder mycket videoinnehåll, spela runt med 360-graders video.
Element som artificiell intelligens och virtuell eller förstärkt verklighet är ännu mer komplexa men kommer sannolikt att bli integrerade delar av webbdesignlandskapet på vägen. Du bör åtminstone veta vad de är och vad de potentiella användningarna kan vara.
13. Få bekväma med SEO
Medan många webbdesigners tror att en SEO-specialist kan hantera att få en webbplats redo för sökmotorer att läsa finns det mycket designarbete som är kopplat till SEO.
Från det sätt som bilder laddas upp för att skapa ren kod som är snabb att inkludera metabeskrivningar på sidor och element, borde designern innehålla söktänkande i deras arbetsflöde.
Frilansare, det här är också viktigt för dig. De flesta kunder är kunniga nog att fråga om en SEO-optimerad webbplats. Om du arbetar ensam måste du veta tillräckligt för att skapa en solid ram som Google kan läsa (och kunna referera kunden till en SEO-specialist om mer arbete behöver göras).
14. Spela med en webbplatsbyggare
En webbplatsbyggare kan vara ett bra sätt att bli bekväm med bästa praxis och hur man börjar bygga och designa webbplatser.
De flesta av dessa verktyg har massor av mallar och låter dig anpassa element och till och med lägga till kodfragment. För enkla webbplatser har många webbplatsbyggare också en fri plan där du kan skapa en personlig portföljsida eller en grundläggande webbplats som fungerar som en lekplats för dig.
Sedan plocka ut bitarna inom webbplatsbyggaren. Titta på hur de är utformade och kodade för att få en känsla för hur allt kommer samman. Du kommer bli förvånad över vad du kan räkna ut genom att välja en annan design från varandra.
15. Hitta en mentor
Finns det någon du jobbar med som du beundrar som webbdesigner? Ta dem till lunch och välj sin hjärna om branschen.
Att hitta en mentor som är villig att arbeta med dig och hjälpa dig att tänka på fältet och hur man lär sig webbdesign på egen hand kan vara ovärderligt. Och medan du förmodligen kan hitta en mentor i ett online-samhälle, är inget bättre än en levande person som du kan träffa ansikte mot ansikte med jämna mellanrum. (Kanske är det värt att ha online och personliga mentorer.)
16. Gå med i CodePen Community
När du börjar bli bekväm med någon kod och programmering vill du gå med i CodePen-community. Med öppen källkod kan du dela och redigera kodsedlar i ett socialt nätverk av sorter.
Här är lite mer från webbplatsens grundare:? CodePen är en social utvecklingsmiljö. I sitt hjärta tillåter du att skriva kod i webbläsaren och se resultaten av det när du bygger. Ett användbart och befriande verktyg för utvecklare av alla färdigheter, och särskilt för att människor ska kunna lära sig att kodas. Vi fokuserar främst på front-end-språk som HTML, CSS, JavaScript och förbehandlingssyntaxer som blir till dessa saker.?
17. Ta en klass
För vissa elever är en mer formell klassrumsinställning bäst.
Det finns massor av klasser tillgängliga - personligen och online - för att du ska kunna lära dig grundläggande webbdesign. Börja med en lokal högskola eller online-lärande nav som Udemy eller Coursera. Hämta en klass på din nuvarande förmåga och fortsätt bara framåt.
18. Vill du göra något? Google It
För den som inte är så traditionell, hitta svaret på webbdesignproblemet på Google. Det finns så många handledningar och videor som kan gå igenom nästan alla problem - och lösningar.
Nyckeln är att söka exakt vad du behöver veta och titta på en ansedd källa för svaret. Här är ett annat tips när det gäller handledning och videor. Nyare innehåll kommer förmodligen att ge dig ett bättre, mer komplett och mer relevant svar. (Kom ihåg att några av dessa saker förändras snabbt.)
19. Betala uppmärksamhet åt användarupplevelsen
Inget kan göra eller bryta en webbplats som användarupplevelse design. Du måste planera för det och förstå det.
Så här beskriver interaktionsdesignstiftelsen UX-designen:
Användarupplevelse (UX) design är processen att skapa produkter som ger meningsfulla och personligen relevanta erfarenheter. Detta innebär en noggrann utformning av både en produkts användbarhet och nöjet konsumenterna kommer att härleda från att använda den. Det handlar också om hela processen att förvärva och integrera produkten, inklusive aspekter av branding, design, användbarhet och funktion.
UX-designers, eller designers som är medvetna om erfarenhetsbildningen, försöker skapa och forma de faktorer som påverkar processen medvetet. För att göra detta kommer en UX-designer att överväga varför, vad och hur av produktanvändning.
20. Var uppmärksam på designtrender
Hur ser moderna webbdesign ut? Det är inte en knepfråga. Att utforma moderna webbplatser och användarupplevelser måste du veta vad användarna vill ha och hur de interagerar med det. Om den sista gången du hämtade en app eller tittat på en webbplats på din telefon var 2016 har du mycket utrymme att sminka upp.
Att skapa webbdesign som har moderna detaljer och trender integrerade i designen kommer att hjälpa dina projekt att sticka ut. Hur vet du vad som trender? Fortsätt läsa webbplatser så här och uppmärksamma vad andra designers gör.Notera färger och stilar och funktioner som ingår i webbplatser du besöker ofta.
21. Skapa utan färg
Börja varje design utan färg. En stor designer berättade en gång för mig att om din design fungerar i svartvitt, blir det felfri i färg.
Det kan inte alltid vara sant, men det är en bra utgångspunkt.
Genom att skapa mönster i svartvitt kan du se var elementen är kontrasterande och hur de spelar tillsammans. Du har tagit bort några känslomässiga föreningar med färg eller ögonrörelse som händer på grund av det. Denna enklaste form av design ger dig en uppfattning om något fungerar som ett koncept innan du går vidare för att slutföra det.
22. Lär dig att älska Google-teckensnitt
Google Fonts är din vän.
Oavsett hur du känner till Google, är möjligheten att bläddra, sortera och välja typsnitt som du vet kommer att fungera i webbdesign är viktigt. Du behöver inte tänka på licensiering eller om teckensnitt är kompatibelt med specifika webbläsare eller ej.
Begränsningen är att du bara har vad som finns i Google Fonts-biblioteket för att arbeta med. Men om du försöker kan du hitta något som passar nästan varje projekt. Det sparar mycket tid på lång sikt.
23. Välj ett UI-paket
Ladda ner ett användargränssnitt eller ikonpaket och välj det från varandra.
Precis som du kan inspektera koden på en webbplats, titta på hur designelement är konstruerade för webben. Ta reda på skalan och rutnätet, titta på färgblandningarna och hur filer är organiserade i Photoshop eller Illustrator.
Leta efter ett kit att ladda ner som innehåller element i flera format för högupplösta skärmar. (Ladda ner en massa JPEG-filer kommer inte att tjäna dig så bra.)
Försök sedan bygga eller anpassa ett element eller två av dina egna.
24. Bli en typograf
Moderna webbdesign har ett starkt fokus på typografi? bra typografi. Från hjältehuvuden med jätteord till skikt av text som drar en användare i designen är det viktigt att förstå principerna för hur man kopplar typelement och konstruerar engagerande textblock.
Börja med Ellen Luptons tänkande med typ. (Det finns också en bok med samma namn.) Lupton är myndigheten på typografi och hennes information kommer att tänka dig som en typograf på nolltid.
25. Hoppa in i JavaScript
När du börjar känna dig ganska bra om att dabbla med webbdesign, utmana dig själv igen för att lära dig JavaScript. Efter HTML och CSS är det viktigaste språket på webben.
JavaScript är det verktyg som gör det möjligt för konstruktörer att genomföra komplexa saker och interaktion på webbsidor. Det är det som gör en skjutreglage eller som parallaxanimering animerar.
Lär dig JS har en interaktiv handledning för att hjälpa dig att komma igång.
26. Uppdatera din portfölj
När du börjar utforma för webben, se till att uppdatera din portfölj med webbdesignprojekt. Den här enkla åtgärden hjälper dig att visa dig själv? och andra? den webbdesignen är en del av din repertoar.
En uppdaterad portfölj kan hjälpa potentiella kunder att se vad din stil? ser ut som. Se till att visa layouter, färger, typografi och olika tekniker som visar vad du kan göra.
27. Utmana dig själv
Med så många genvägar och kodfragment som hjälper dig att fixa nästan alla webbplatsproblem som du har, bli inte lat. Kom ihåg att utmana dig kontinuerligt för att lära dig nya färdigheter, ny teknik och fortsätt att förbättra ditt webbdesignspel.
En sak om detta område är att det ständigt förändras; Det finns alltid något nytt att lära eller försöka.
28. Maximera din upplevelse
Gå dit ute och designa. Du måste börja utforma webbplatser för att vara webbdesigner.
Börja små, men ta upp projekt med andra. Be om att delta i ett projekt med ett lag på jobbet. Tackla en liten webbplats till en vän. Ju mer erfarenhet du har att bygga webbplatser, desto bättre och snabbare kommer du att få.
Vad väntar du på? Sluta procrastinating.
29. Be om återkoppling
Använd ditt nätverk för att samla in feedback på dina webbdesignprojekt, oavsett hur liten du tror att de är. Lyssna på den här feedbacken - även om du inte gillar det och ser vad du kan lära dig.
Bortsett från visuell preferens, gav personen som tillhandahåller feedback förslag på att göra webbplatsfunktionen bättre? Kunde de lätt förstå målet med designen? Anslöt de sig till meddelandet?
30. Fortsätt lära dig nya saker
Att vara en bra webbdesigner behöver bara fortsätta spela, försöka och lära sig nya saker. Gör en punkt på nätverket och kommunicera med andra i fältet så att du kan hålla dig över tekniker och visuella förändringar som är efterfrågade.
Om du letar efter webbdesign, är det förmodligen redan något du regelbundet gör. Men detta är ett utvecklande fält, och det fortsätter att förändras nästan varje dag. Fråga bara vem som gör det.