hur man lär sig webbdesign (i 9 steg)

förstå nyckelbegreppen för visuell design

linje

varje bokstav, kantlinje och uppdelning i en layout består av linjer som utgör deras större struktur. Lärande webbdesign innebär att förstå tillämpningarna av linjer för att skapa ordning och balans i en layout.

former

de tre grundläggande formerna i visuell design är kvadrater, cirklar och trianglar. Kvadrater och rektanglar fungerar för innehållsblock, cirklar fungerar för knappar och trianglar används ofta för ikoner som följer med ett viktigt meddelande eller uppmaning. Former har också en känsla av känslor, med kvadrater förknippade med styrka, cirklar med harmoni och komfort och trianglar med betydelse och handling.

textur

textur replikerar något i den verkliga världen. Genom textur får vi en uppfattning om huruvida något är grovt eller smidigt. Texturer kan ses i hela webbdesign. Från pappersliknande bakgrunder till de färgglada wispsna av en Gaussisk oskärpa, var medveten om de olika typerna av texturer som kan göra dina mönster mer intressanta och kan ge dem en känsla av fysikalitet.

färg

för att skapa mönster som inte är en ögonbelastning, bör du utbilda dig själv i färgteori. Att förstå färghjulet, kompletterande färger, kontrasterande färger och de känslor som olika färger är knutna till kommer att göra dig till en bättre Webbdesigner.

Grids

Grids har sina rötter i de tidigaste dagarna av grafisk design. De fungerar så bra för att få ordning på bilder, texter och andra element i en webbdesign. Lär dig hur du strukturerar dina webblayouter med hjälp av rutnät.

Känn grunderna i HTML

Hypertext markup language (HTML) ger anvisningar för hur innehållet, bilder, navigering och andra delar av en webbplats visas i någons webbläsare. Även om du inte behöver vara expert på HTML, hjälper det fortfarande att känna till hur det fungerar, även om du använder en visuell baserad designplattform som Webflow.

HTML-taggar är instruktionerna en webbläsare använder för att skapa en webbplats. Rubriker, stycken, länkar och bilder styrs alla av dessa taggar. Du vill särskilt veta hur rubriktaggar som H1 -, H2-och H3-taggar används för innehållshierarki. Förutom att påverka layoutstrukturen är rubriktaggar viktiga för hur webbsökare klassificerar en design och påverkar hur de dyker upp i organiska sökrankningar.

för att lära dig mer om de grundläggande begreppen i HTML (Det finns också ett avsnitt om CSS), kolla in den här lektionen vi sätter ihop i Webflow University.

förstå CSS

CSS (eller cascading style sheets) ger styling och ytterligare instruktioner om hur ett HTML-element kommer att visas. Att göra saker som att använda teckensnitt, lägga till vaddering, ställa in justering, välja färger och till och med skapa rutnät är alla möjliga genom CSS.

att veta hur CSS fungerar ger dig färdigheter att skapa unika webbplatser och anpassa befintliga mallar. Låt oss gå igenom några viktiga begrepp i CSS.

CSS-klasser

en CSS-klass är en lista över attribut som samlas i styling av ett enskilt element. Något som brödtext kan ha teckensnitt, storlek och färg alla en del av en enda CSS-klass.

CSS combo klasser

en combo klass bygger på en befintlig basklass. Det ärver alla attribut som storlek, färg och justering som redan kan vara på plats. Attribut kan sedan ändras upp. Kombinationsklasser sparar tid och låter dig ställa in varianter av en klass som du kan använda var du än behöver i en webbdesign.

att veta hur CSS fungerar är viktigt när man lär sig webbdesign. Som nämnts i avsnittet om HTML rekommenderar vi att du går över till Webflow University för att se mer om hur CSS fungerar.

lär dig grunden för UX

UX är magin som väcker en webbplats till liv och förvandlar den från ett statiskt arrangemang av element till något som engagerar sig i känslorna hos någon som bläddrar igenom den.

färgschemat, innehållet, typografin, layouten och bilderna samlas för att tjäna din publik. Användarupplevelse design handlar om precision och frammana känslor. Det erbjuder någon inte bara en smidig resa utan en upplevelse som förbinder dem med enheten eller varumärket bakom webbdesignen.

här är några UX-principer som du behöver veta.

användare personas

webbdesign innebär att förstå slutanvändare. Du bör lära dig hur man gör användarforskning och hur man skapar användarpersoner. Dessutom måste du veta hur du använder denna information för att skapa en design som är optimerad för deras behov.

informationsarkitektur

utan tydlig organisation kommer människor att bli förvirrade och studsa. Informationsarkitektur och innehållskartläggning ger en ritning för hur webbplatsen och varje avsnitt kommer att arbeta tillsammans för att ge en tydlig kundresa.

användarflöden

att konstruera användarflöden kan komma till spel när du arbetar dig upp till mer omfattande designprojekt, men du kommer att bli bättre i framtiden om du börjar tänka på dessa och bygga ut dem för dina tidiga mönster. Användarflöden kommunicerar hur människor kommer att gå igenom en design. De hjälper dig att prioritera de viktigaste avsnitten och se till att människor kan komma åt dem.

Wireframes

Wireframes visar var på en webbsida rubriker, text, grafik, formulär och andra element kommer att placeras. Även om du bygger en enkel webbdesign på en sida, kommer kartläggning av en wireframe att ge dig en solid guide att arbeta från. När du går vidare till mer komplicerade webbplatser är wireframes viktiga för att skapa en konsekvent upplevelse, strukturera layouter och inte sakna något som behöver inkluderas.

prototyper

prototyper kan ha olika nivåer av trohet men fungera som en representation av en fungerande design. Bilder, interaktioner, innehåll och andra viktiga element är alla på plats och replikerar den verkliga designen. Prototyper används för att få feedback och finjustera en design under hela processen.

bekanta dig med UI

ett användargränssnitt är en mekanism som sätter en bit av teknik till handling. En dörrhandtag är ett användargränssnitt. Volymkontrollen på din bilradio som din betydande andra inte kommer att sluta röra med är ett användargränssnitt. Och knappsatsen som du anger din PIN-kod i en bankomat är ett användargränssnitt. Precis som knappar och andra mekanismer i den verkliga världen tillåter någon att interagera med maskiner, tillåter användargränssnittselementen på en webbplats någon att sätta igång åtgärder.

låt oss granska två viktiga UI-principer: intuitiv design och enkelhet.

hur man skapar intuitiva gränssnitt

att interagera och engagera sig med en webbplats bör vara konsekvent och följa repeterbara mönster. Människor som landar på en webbplats bör omedelbart förstå de system som finns på plats för att navigera genom den.

gör användargränssnittet enkelt

användargränssnittet finns för att optimera användbarheten. Detta innebär att kontrollerna är lätta att använda, liksom uppenbara i deras funktionalitet. Oavsett om du minimerar antalet navigeringsalternativ, gör kassaprocessen snabb eller integrerar andra interaktiva element som ökar tillgängligheten, kan förstå användargränssnittet hjälpa dig att effektivisera någons upplevelse av att interagera med en webbplats.

naturligtvis är UI ett stort ämne som inte kan fångas på bara några stycken. Vi föreslår att du kolla in blogginlägget ”10 essential UI (user interface) design tips” som en primer till UI.

relaterade läser: UX vs UI: viktiga skillnader varje designer borde veta

förstå grunderna för att skapa layouter

våra ögon haka på vissa designmönster automatiskt, vilket gör för en enkel väg genom en webbdesign. Vi vet intuitivt var vi ska leta eftersom vi har sett samma mönster om och om igen som vi har konsumerat media under våra liv. Att känna till designmönster hjälper dig att skapa webbplatser som har ett smidigt flöde till innehållet och bilderna. Två vanliga webblayoutmönster du behöver veta om är Z-mönster och F-mönster.

Z-mönster

för layouter med en ekonomi av ord och bilder och generösa mängder negativt utrymme, gör Z-mönstret ett effektivt sätt att kryssa via en webbplats. När du börjar uppmärksamma var dina ögon går igenom en design, kommer du att känna igen direkt när ett Z-mönster är på plats.

F-mönster

designar tungt på text, som för en online-publikation eller en blogg, följer ofta ett distinkt F-mönster. På vänster sida av skärmen ser du en lista med artiklar eller inlägg, och i sidans huvuddel ser du rader med relaterad information. Detta mönster är optimerat för att ge människor all information de behöver, även om de snabbt tittar igenom det.

relaterade läser: webblayout: webbplats anatomi varje designer behöver lära sig

lär dig mer om typografi

teckensnitt kan ge olika toner eller känslor samt påverka läsbarheten. Om du lär dig om webbdesign är det viktigt att veta hur man använder typografi.

typografi tjänar flera syften inom webbdesign. För det första tjänar det det utilitaristiska syftet att göra innehållet läsbart. Men det kan också fungera som dekoration, och den smakfulla användningen av stiliserad typografi kan lägga till den övergripande estetiken.

här är tre grundläggande typografiska begrepp du borde veta.

Serif

Serif typsnitt har minuscule linjer som kallas serifs som nåd varje bokstav. Denna typografiska stil kan spåras tillbaka till tryck.

sans serif

som namnet antyder saknar sans serif-typsnitt de identifierande raderna i serif-typsnitt. Dessa typeransikten finns via den digitala sfären av webbplatser och appar.

Display

Display typsnitt används ofta för rubriker och kan vara antingen stora och effektfulla eller gjorda av skarpa, tunna linjer. De har vanligtvis sofistikerade brevformer och är avsedda att fånga någons uppmärksamhet.

relaterade läser: typografisk design: typsnitt och resurser för designers

Sätt din kunskap i handling och bygg något

du kan titta på tutorials, läsa blogginlägg, anmäla sig till online-kurser, och absorbera all teori och information du kan om webbdesign, men det enda sättet att bli en webbdesigner är att börja webbdesign.

börja med ett enkelt projekt. Kanske någon du känner behöver hjälp med att skapa en portfölj eller har en sida liv som saknar någon form av webbnärvaro. Erbjud dig att designa dem något gratis.

en blogg är också ett annat bra nybörjarprojekt. Detta kommer att ge dig praktisk design erfarenhet av att lära sig att använda saker som ett CMS, samt att ge ett skyltfönster för dina skrivkunskaper.

att bygga en webbplats för ett falskt företag eller företag är en annan rolig kreativ övning för att utveckla dina designkotletter. Dessutom kan du lägga till den i din portfölj.

skaffa en mentor

mentorer är värdefulla eftersom de har varit där du är — i början — och har önskan att hjälpa dig genom de hårt förvärvade lektionerna de har lärt sig. De har en djup brunn av expertis och kunskap. De är en bra resurs för att få feedback på ditt arbete och hitta vad du gör rätt och vad som behöver förbättras.

när du söker efter lämplig mentor, se till att du hittar någon som gör den typ av design du beundrar och specialiserar dig på vad du vill lära dig. Mentorer kan ge dig en tydlig väg från år som spenderas i fältet så att du inte behöver snubbla genom att lära dig webbdesign.

ingen kod ger ett enkelt inträde i webbdesign

det fanns en tid, inte så länge sedan, när du var tvungen att ha en djup förståelse för HTML och CSS för att manuellt skriva koden bakom en webbdesign. Idag, utan kodverktyg som Webflow, är det möjligt att sätta ihop en webbplats och starta den på kort tid. Det som tog dagar eller veckor kan nu hända på timmar.

naturligtvis går så mycket till att skapa en bra webbdesign. Att lära sig grunderna bakom visuell design, grunderna i UI och UX, och att veta hur front end och back end-funktionen kommer att göra dig till en mer väl avrundad designer.

oavsett om du just har börjat eller är expert, erbjuder Webflow en intuitiv visuell baserad plattform för att ge dig möjlighet att förverkliga din kreativitet. Tillsammans med ett lättanvänt sätt att starta webbplatser, Webflow har en hel gemenskap för att ge dig råd och hjälpa dig nivå upp dina kunskaper. Vi ser fram emot att se dig arbeta i vår Showcase.