Webbens mönster

Varför ser alla webbplatser likadana ut?

Vi börjar med att studera hur webben faktiskt är uppbyggd. När vi jobbar med webbutveckling behöver vi inte uppfinna hjulet på nytt, vi kan använda mönster som användarna redan förstår.

Webbexperten Jakob Nielsen formulerade Jakobs lag: Användare spenderar mestadelen av sin tid på andra webbplatser. Det betyder att användaren förväntar sig att din logotyp sitter uppe till vänster, att det går att klicka den för att komma hem och att din meny oftast är högst upp på sidan. Om du försöker vara “kreativ” och gömmer menyn i sidfoten, så är det stor risk att användaren inte hittar den.

Om du skalar bort alla färger och bilder ser du att nästan alla världens webbsidor är uppbyggda av samma återkommande block: ett sidhuvud, en navigering, ett huvudinnehåll och en sidfot. Begreppen kommer från den tryckta tidningsvärlden och återfinns i våra digitala gränssnitt.

Wireframe, skissa innan du kodar

Att skissa på papper låter dig snabbt skapa en prototyp Prototyp En tidig, enkel version av en produkt eller ett gränssnitt som används för att testa idéer och strukturer. I webbutveckling ofta en pappersteckning eller enkel HTML-sida. Se: Webbens mönster , det brukar också kallas wireframe Wireframe En enkel skiss som visar layouten för en webbsida utan färger eller bilder, bara lådor och etiketter. Används för att planera struktur och tänka igenom innehållet innan kod skrivs. Se: Webbens mönster . En wireframe är avsiktligt enkel: inga färger, inga bilder, bara lådor och etiketter. Målet är att tänka igenom strukturen medan det fortfarande är gratis att ändra sig.

På papper kan du pröva en idé på tio sekunder. I kod tar samma idé timmar att testa, och när du väl skrivit hundra rader CSS CSS Cascading Style Sheets, språket som används för att styra utseendet på HTML-element, t.ex. färger, typsnitt, storlekar och layout. Se: HTML-trädet är du för investerad för att ändra dig. Det är anledningen till att yrkesverksamma designers, oavsett hur erfarna de är, alltid börjar med papper.

En vanlig invändning är “jag vet redan vad jag ska göra”. Det är nästan alltid ett feltänk. Problemen syns på papper innan du är emotionellt investerad i din kod. En layout som verkar självklar i huvudet kan visa sig omöjlig att implementera när du faktiskt ritar ut proportionerna.

När du dessutom arbetar med andra, det kan vara en kund, en designer, en annan utvecklare, då är wireframen ett gemensamt språk som alla kan peka på och diskutera utan att behöva förstå en rad HTML.