lär du 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 dig själv 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 skjuta upp. 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 webbplats, branschens bästa praxis och mycket mer—allt på 30 dagar!

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 <för> hackare.

Jag rekommenderar att du startar en blogg. Jag startade en blogg bara för att ha en lekplats för webbdesign, och 7 år senare lanserade jag en bästsäljande bok om ämnet. Att ha ett personligt projekt, till exempel 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.

du behöver inte börja med en massiv webbplats eller galen design; börja små. Spela med webbplatsen, ta reda på vad som får saker att fungera. (Och se till att inspektera koden så att du kan börja bekanta dig med vad som får din webbplats att fungera.)

Vill du komma igång snabbt? En webbplatsbyggare som Wix kan hjälpa dig att ge dig ett försprång med en snygg webbdesign, när du börjar lära dig begreppen och byggstenarna i vad som går in på en webbplats.

Läs allt du kan

börja läsa. Eftersom du är på den här bloggen är du förmodligen van att hålla reda på vad som händer i designvärlden. Fortsätt läsa.

Läs allt du kan om webbdesign, trender och tekniker och bästa praxis. Följ designers du beundrar på sociala medier.

kasta ett brett nät för din webbdesignlä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.

var en effektiv kommunikatör

Om du inte är den mest artikulerade personen, borsta upp dessa färdigheter. En stor del av webbdesign är kommunikation.

webbdesigners måste kommunicera med kunder regelbundet för att ta reda på vilket problem designen behöver lösa; de måste kommunicera dessa lösningar och implementera dem också.

prenumerera på Tuts+& Envato Elements

Tänk på en prenumeration på Envato Elements, som också ger dig tillgång till den utmärkta Tuts+ inlärningsresursen.

Tuts+ publicerar regelbundna kurser om grafisk och webbdesign, från grundläggande tekniker till de senaste avancerade metoderna och utvecklingen. Det är helt egen takt, undervisas av expertinstruktö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 ansluta till ditt webbdesignarbete.

Tänk i HTML

HTML, eller hypertext markup language, är en hörnsten i 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 av webbdesign att göra mycket mer meningsfullt.

W3Schools har en bra HTML starter handledning 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 att det är mer intuitivt än du trodde.)

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 kostnadsfria uppsättningen verktyg lär dig att koda med interaktiva aktiviteter och spel.

Du kan hämta en Codeacademy-kurs var och när du behöver den och starta och stoppa efter behov. Välj ett ämne att lära sig-webbutveckling, programmering, datavetenskap – eller språk att fokusera på – HTML & CSS (ett bra ställe att börja), Python, Java, SQL, Ruby och mer.

lär dig att förstå CSS

CSS, eller kaskad stilark, definiera presentationen av ett dokument skrivet i HTML eller XML och SVG.

som definieras av Mozilla

CSS beskriver hur element ska återges på skärmen, på papper, i tal eller på andra medier.

Mozilla har också en stor samling av 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 på HTML, hur man anger längd, färg och andra enheter i CSS, kaskad och arv, box Modell grunderna, och felsökning CSS. Sedan går modulerna vidare för att förklara stylingtext och rutor.

använd dina designfärdigheter på webben

om du redan arbetar inom ett kreativt eller grafiskt designfält, tänk på de saker du redan vet att du också kan ansöka om webbdesign. Principerna som gör något visuellt tilltalande förändras inte baserat på medium och all den designteorin kommer också att vara till nytta i det digitala rummet.

även om element som inlärningskod kanske inte känns naturliga, är det en enorm bonus att ha en designbakgrund. Vad bra är en vackert kodad webbplats om inte man vill interagera med den?

Var uppmärksam på webbplatser du älskar

notera webbplatser som du älskar. Vad sägs om dem är tilltalande för dig? (Och hur kan du lära dig att replikera dessa element?) Var uppmärksam på:

• typografi
• navigering
• användning av bilder och utrymme
• design av formulär
• Animation och rullningseffekter
• färg

rita en Wireframe

wireframing är en webbdesigners brainstorming.

i sin renaste form är en wireframe en skiss av vad webbplatsen kommer att vara. Det är inte en skiss av estetiska element, snarare en ritning av webbplatsen. Att rita en wireframe handlar inte riktigt om utseendet på denna design, det handlar om informationsstrukturen däri.

Inte säker på hur man skapar en wireframe? Digital telepati har en guide med bästa praxis som hjälper dig att lära dig.

ta dig tid att lära dig Sketch

Sketch är ett vektorritningsverktyg för Mac som gör det enkelt att skapa designelement. Många designers vänder sig till skiss för att skapa UI-element och upprepa designblock.

den är packad 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 kreativa Svit och värt din tid.

Håll dig uppdaterad med teknik

AI, VR, AR, 360-graders video, bots.

det kan vara svårt att hålla jämna steg med så många nya tekniker och trender. Men du måste göra en poäng för att hålla koll på dessa förändringar.

tackla dem en i taget och börja med tekniker 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, leka 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. Åtminstone bör du veta vad de är och vad de potentiella användningarna kan vara.

bli bekväm 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 hur bilder laddas upp för att skapa ren kod som är snabb för att inkludera metabeskrivningar på sidor och element, bör designern införliva söktänkande i sitt arbetsflöde.

frilansare, Detta är mycket viktigt för dig också. De flesta kunder är kunniga nog att be 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 hänvisa klienten till en SEO-specialist om mer arbete behöver göras).

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 gott om mallar och låter dig anpassa element och till och med lägga till kodavsnitt. För enkla webbplatser har många webbplatsbyggare också en gratis plan där du kan skapa en personlig portföljsida eller grundläggande webbplats som fungerar som en lekplats för dig.

välj sedan bitarna i webbplatsbyggaren. Titta på hur de är utformade och kodade för att få en känsla för hur allt kommer ihop. Du kommer att bli förvånad över vad du kan räkna ut bara genom att välja en annan design ifrån varandra.

hitta en Mentor

finns det någon du arbetar med som du beundrar som webbdesigner? Ta dem till lunch och plocka 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 en online-community, ingenting är 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.)

gå med i CodePen Community

När du börjar bli bekväm med lite kod och programmering vill du gå med i CodePen community. Med öppen källkod kan du dela och redigera kodavsnitt i ett slags socialt nätverk.

Här är lite mer från webbplatsens grundare: ”CodePen är en social utvecklingsmiljö. I sitt hjärta låter det dig 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 bemyndigande för människor som lär sig att koda. Vi fokuserar främst på front-end språk som HTML, CSS, JavaScript och förbehandling syntaxer som förvandlas till dessa saker.”

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 dig att lära dig grunderna i webbdesign. Börja med en lokal högskola eller online lärande nav som Udemy eller Coursera. Plocka upp en klass på din nuvarande förmåga nivå och bara hålla sig framåt.

vill du göra något? Google It

för den inte så traditionella eleven, hitta svaret på webbdesignproblemet på Google. Det finns så många handledning och videor tillgängliga som kan gå igenom nästan alla problem – och lösningar.

nyckeln är att söka exakt vad du behöver veta och se till 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.)

Var uppmärksam på användarupplevelsen

ingenting kan göra eller bryta en webbplats som user experience design. Du måste planera för det och förstå det.

Så här beskriver Interaction Design Foundation UX design:

user experience (UX) design är processen att skapa produkter som ger meningsfulla och personligt relevanta upplevelser. 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 processen för erfarenhetsbildning, 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 produkten används.

Var uppmärksam på designtrender

hur ser en modern webbdesign ut? Det är ingen trickfråga. För att designa moderna webbplatser och användarupplevelser måste du veta vad användarna vill ha och hur de interagerar med det. Om Senast du laddade ner en app eller tittade på en webbplats på din telefon var 2016, har du mycket mark att kompensera.

att skapa webbdesign som har moderna inslag och trender integrerade i designen hjälper dina projekt att sticka ut. Hur vet du vad som trender? Fortsätt läsa webbplatser som detta och var uppmärksam på vad andra designers gör. Notera färger och stilar och funktioner som ingår i de webbplatser du besöker ofta.

Skapa utan färg

starta varje design utan färg. En bra designer berättade en gång för mig att om din design fungerar i svartvitt kommer den att vara felfri i färg.

det kanske inte alltid håller, men det är en bra utgångspunkt.

genom att skapa mönster i svartvitt kan du se var elementen kontrasterar och hur de spelar tillsammans. Du har tagit bort alla 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 till att slutföra det.

lär dig att älska Google Fonts

Google Fonts är din vän.

oavsett hur du känner för Google är möjligheten att bläddra, sortera och välja typsnitt som du vet kommer att fungera i webbdesign viktigt. Du behöver inte tänka på licensiering eller om typsnitt är kompatibla med specifika webbläsare eller inte.

begränsningen är att du bara har det som finns i Google Fonts-biblioteket att arbeta med. Men om du försöker kan du hitta något som passar nästan alla projekt. Det sparar mycket tid på lång sikt.

plocka isär en UI Kit

ladda ner ett användargränssnitt eller ikon kit och plocka isär.

precis som du kan inspektera koden på en webbplats, Titta på hur designelement är konstruerade för webben. Notera skalan och rutnätet, titta på färgmixerna 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. (Att 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.

bli typograf

Modern webbdesign har ett starkt fokus på typografi … bra typografi. Från hjältehuvuden med jätteord till textlager som drar en användare in i designen är det viktigt att förstå principerna för hur man parar 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 få dig att tänka som en typograf på nolltid.

hoppa in i JavaScript

När du börjar känna dig ganska bra med att dabbla med webbdesign, utmana dig själv igen för att lära dig JavaScript. Efter HTML och CSS är det det viktigaste språket på webben.

JavaScript är ett verktyg som gör det möjligt för designers att implementera komplexa saker och interaktion på webbsidor. Det är det som gör att en skjutreglage glider eller den parallaxanimationen animerar.

Learn JS har en interaktiv handledning som hjälper dig att komma igång.

uppdatera din portfölj

När du börjar designa för webben, se till att uppdatera din portfölj med webbdesignprojekt. Denna enkla åtgärd hjälper dig att visa dig själv … och andra … att webbdesign är en del av din repertoar.

en uppdaterad portfölj kan hjälpa potentiella kunder att se hur din” stil ” ser ut. Se till att visa upp layouter, färger, typografi och olika tekniker som visar vad du kan göra.

utmana dig själv

Med så många genvägar och kodavsnitt som hjälper dig att fixa nästan alla webbplatsproblem du har, bli inte lat. Kom ihåg att utmana dig själv ständigt för att lära dig nya färdigheter, ny teknik och fortsätta förbättra ditt webbdesignspel.

det enda med detta fält är att det ständigt förändras; det finns alltid något nytt att lära sig eller prova.

maximera din upplevelse

gå ut och design. Du måste börja designa webbplatser för att vara Webbdesigner.

börja små, men ta på projekt med andra. Be om att delta i ett projekt med ett team på jobbet. Tackla en liten webbplats för en vän. Ju mer erfarenhet du har att bygga webbplatser, desto bättre och snabbare får du.

vad väntar du på? Sluta skjuta upp.

be om Feedback

Använd ditt nätverk för att samla in feedback på dina webbdesignprojekt, oavsett hur små du tror att de är. Lyssna på denna feedback-även om du inte gillar det och se vad du kan lära dig.

bortsett från visuella preferenser, har den person som ger feedback erbjuda förslag för att göra webbplatsen fungerar bättre? Kan de lätt förstå målet med designen? Har de kontakt med meddelanden?

fortsätt lära dig nya saker

för att vara en bra webbdesigner behöver du bara fortsätta spela, försöka och lära dig nya saker. Gör en punkt att nätverka och kommunicera med andra i fältet så att du kan hålla koll på tekniker och visuella förändringar som efterfrågas.

Om du vill lära dig 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 någon som gör det.