Så gör man en snygg webbplats

9 steg till bättre modernare och effektivare webdesign

Bakom en sådan djärv rubrik finns många goda tips och råd, men få är generella då skönheten ligger i betraktarens öga som man brukar säga. Vi har iallafall försökt hitta det vi anser är grundläggande i en bra webbdesign och summera det här. Vi försöker också kasta lite ljus på begreppet flat design som blivit så populärt på senare år. 

Vad är då snygg webbdesign? Stora bilder? Feta rubriker? I slutändan handlar det om ett bra helhetsintryck som alltid kommer att vara viktigare och större än de ingående delarna. Det går inte att skriva ut ett exakt recept på bra design. Men som en hjälp på vägen har vi ändå fallit för frestelsen att söka delarna, komponenterna och pusselbitarna som rätt använda kan ge ett bra helheltsintryck. Det blir ingen formel för den ultimata webbdesignen och det går inte att följa punkterna notoriskt för att trolla fram en snygg webbplats. Tipsen pekar istället ut en riktning mot en design som känns modern, funktionell och attraktiv.

Vi tar inte upp allmän formgivningskunskap som typsnittsval, marginaler och proportioner. Vi fokuserar uteslutande på design för webben samt tar för givet att du skapar en webbplats som är responsiv för mobila enheter.

Har du bråttom läs sammanfattningen ›  TL;DR

1. Enkelhet - "huvudregeln"

KISS, Keep It Simple Stupid, heter en generell princip för systemdesign. Less is more, menar en annan idé från bl.a. arkitekturen. Dessa två kan i högsta grad tillämpas i webbdesign.

Försök begränsa mängden innehåll på dina sidor till en nivå som dina besökare kan tillgodogöra sig relativt snabbt. Det är mycket lätt att fastna i tankefällan att man vill ha med så mycket som möjligt på varje sida, i tron om att besökaren har oändligt med tid och intresse för just din webbplats. Eller så känner man en rädsla för att användaren kanske inte är intresserad av det som just står på en sida och vill gardera sig med en mängd annan information. Det viktiga här är att våga presentera en sak i taget. Fyll vyn med det som sidan handlar om i första hand. Sen kan annat innehåll och relaterad information komma längre ner.

En del webbplatser, i synnerhet dagstidigar, har gått åt det motsatta hållet. Här handlar det mer om skattjakt på intressant innehåll och känslan av att det är fullt ös på nyhetsredaktionen. Tidningarnas syfte är också annat än de flesta webbplatser, besökarna är inte ute efter ett specifikt innehåll utan målet är att allmänbilda och försäkra sig om att ingen viktig händelse missas. Andra webbtjänster som Facebook kan kosta på sig mer komplexa gränssnitt eftersom besökarna återkommer så många gånger att de har möjlighet att lära sig att använda tjänsten. 

Men för de flesta andra företag och organisationer så är målet att leverera den information som en besökare söker, eller den information man vill att en besökare ska ta del av. På kort tid och utan distraktion. Man vill att besökaren ska ta del av en viktig pressrelease, hitta de viktiga dokumenten, anmäla sig till nyhetsbrevet eller konvertera till att bli en kund genom ett köp. Då är det klokt att renodla gränssnittet. Faktum är att de flesta punkter nedan kan underordnas den övergripande principen om enkelhet.

2. Centrerad layout

De allra flesta webbplatser idag har sitt innehåll centrerat, mitt i webbläsaren. Det ger ett mer direkt tilltal och visar att man vill ställa sitt innehåll mitt i betraktarens synfält. Ett modigare och ärligare tilltal i grunden. Det är bara i sällsynta fall som innehållet trycker sig mot webbläsarens ena kant, möjligen då man använder en specifik molntjänst eller liknande. För alla andra är det generella rådet - centrera dina sidor (dock inte texten på själva sidorna som inte alls behöver eller bör skrivas centrerad som en dikt).

3. Få kolumner - Ett flöde

Oftast är det tillräckligt med 1, 2 eller på sin höjd 3 kolumner i  bredd på en sida. Tre kolumner bör nästan uteslutande användas i sidor med nyhetsflöden som man vill urskilja mot varandra. Alternativt under en textmassa kan man lägga ut relaterad information i promos/puffar där 3 eller 4 kan samsas i bredd. Men våga planera ditt innehåll på en eller två kolumner. Du kommer att få ett mycket tydligare tilltal och sidan kommer att se renare ut och kännas lättare att tillgodogöra sig.

Många nyare webbplatser använder istället ett enda brett flöde (utan vertikal under/sidomeny) och staplar istället flera kolumner som block på varandra så användaren kan se en sak i taget. I ett sådant flöde kan naturligtvis ett block i flödet innehålla tre puffar i bredd eller en text som är skriven över tre kolumner, men detta bryts sedan av vid nästa block med endast en kolumn. Få kolumner i bredd ger fler i höjd och därmed längre sidor, vilket leder till nästa punkt - Långa sidor!

4. LÅNGA SIDOR - VÅGA SCROLLA

Många gånger har oroliga webbplatsansvariga önskat ha så mycket information som möjligt synligt på en gång på sidan, eller åtminstone på startisdan, utan att användaren ska behöva scrolla ner sidan. Allt ska komprimeras och pressas ihop för att få plats direkt, annars kanske användaren inte förstår att det går att scrolla och att det överhuvudtaget finns mer innehåll på sidan. Denna behjärtansvärda tanke är dock helt omöjligt att tillgodose i praktiken och den får ofta motsatt effekt. För det första sitter vi idag på fler olika skärmar än någonsin förut. Det är alltifrån stationära datorer på jobbet med stora skärmar, till bärbara datorer, surfplattor och smartphones. Det är alltså helt omöjligt rent tekniskt att pressa ihop allt så det syns direkt utan scrollning för alla besökare oavsett skärm. Istället riskerar man bara att skapa ett grötigt gränssnitt med alldeles för mycket innehåll på en gång och då är risken verkligen stor att användaren missar viktigt innehåll.

Idag är vi vana att scrolla. Oändligt långa tidningssiter och sociala siter som Facebook, Twitter och Instagram har lärt oss det. Använder vi en mobil enhet är scollningen än mer intuitiv och lätt. Ta tillvara på detta istället och bered plats åt varje del av ditt innehåll i tur och ordning. Skapa längre sidor. Förära ditt innehåll en mer påkostad utformning med stora bilder och marginaler. Då upplevs det också som viktigare av besökaren. Självklart ska innehållet prioriteras så viktigast kommer först, men lita också på att besökaren rullar sidan vidare! En annan effekt av att du radar upp mycket innehåll i lugn takt på sidorna är att användaren slipper göra ett val i menyn och klicka för att läsa mer. Kommer man till något som är mindre intressant rullar man bara enkelt sidan vidare till nästa innehåll. Det handlar om att servera användaren mer utan onödiga avbrott.

5. Enkel navigation - To Hamburger or not?

Navigationen på en webbplats ska vara lätt att både hitta, förstå och återkomma till. Använd tydliga menyval och undvik för djupa undernivåträd. Markera vilken länk i menyn som är aktiv. Testa gärna en så kallad sticky menu som sitter fast när man scrollar för att göra det lätt att återgå till menyn. Tar den upp för stor plats, pröva att skapa en mindre variant av menyn när den är i sitt "sticky-läge". Eller dölj menyn helt vid scrollning, men så fort besökaren scrollar uppåt på sidan igen så dyker menyn fram igen så det inte ska vara nödvändigt att scrolla upp hela vägen till sidhuvudet igen för att nå menyn.

I mobila enheter är det populärt att ersätta en utskriven meny med en så kallad hamburgar-meny, av utrymmesskäl. Istället för att pressa in alla menyval på en liten skärmbredd i en mobil, så döljer man helt enkelt hela menyn bakom en knapp som ser ut som tre parallella streck (en hamburgare i profil). När användaren klickar på knappen visas webbplatsens meny, antingen som en lista, eller ett träd av något slag. Metoden är effektiv för att spara skärmytan men har mött kritik också på senare tid eftersom man tar bort en viktig möjlighet för användaren att orientera sig på en ny webbplats. Indirekt, kanske omedvetet, skapar sig användaren en bild av hur webbplatsen är strukturerad och vad den erbjuder genom att se vilka menyval som finns, hur de är ordnade och prioriterade. Denna struktur upprepas på alla sidor och nöts in. Försvinner strukturen försvinner också den undermedvetna inlärningen. Istället rekommenderas kombinationer där de viktigaste menyvalen får ligga synliga medan andra sorteras in under hamburgarmenyn. Ibland föreslås också att skriva ut ordet "Meny" bredvid hamburgarikonen eftersom alla inte är helt medvetna om denna symbolkonvention.

6. Linjera med en grid

Webbplatser som har bra flyt och känns harmoniska och balanserade är ofta uppbyggda mot ett osynligt rutnät, ett grid. Istället för att placera ut saker lite slumpmässigt beroende på hur stora de råkar vara eller vad som känns rimligt för en given situation så låter man utformning och placering av allt innehåll styras av linjerna i ett rutnät. Rutnätet som givetvis inte syns för besökaren består i ett antal vertikala linjer med jämna mellanrum (normalt ca 10-20 linjer). Dessa avgör var något kan placeras. Du kan alltså inte placera en rubrik eller bild mitt emellan två linjer. Fördelen med att följa rutnätet är att du automatiskt får allt innehåll linjerat sinsemellan. Det skapar ordning, harmoni och struktur. Din webbplats får ett balanserat intryck och blir lättare att följa för ögat - innehållet följer ju en förutsägbar struktur. Det finns mycket skrivet om grids på webben, om olika system och tankesätt. Ofta påverkar grid-upplägget den bakomliggande HTML/CSS-koden en hel del. En utökning av grid-system som även tar hänsyn till marginaler runt rubriker, textstorlekar och radavstånd finns i det system som kallas Vertical Rythm. 

7. Flat design vs skeuomorphism

En av de tydligaste designtrenderna på webben på senare tid har varit det som allmänt kallas för flat design. Flat design har även slagit igenom brett inom formgivning av hela operativsystem (nya versioner av Windows, Android och iOS). Flat design har alltmer ersatt sin motsats - skeuomorphism (och inte bara för att det är så svårt att uttala det).

Enklast kan utvecklingen beskrivas så här: från början var datorer och den visuella skärmgrafik de kunde åstadkomma mycket enkel. I takt med att skärmar kunde återge fler färger och högre upplösningar, och även i takt med att internet blev snabbare så mer grafik kunde laddas utan alltför långa väntetider, så tog man naturligtvis än mer ut de grafiska svängarna. Ett spår som blev tydligt här ganska tidigt var viljan att imitera den verkliga världen. Det blev möjligt att skapa knappar som såg ut att vara gjorda av sten eller trä, blanklackade, med fina skuggor och högdagrar på ett verklighetstroget sätt. Högre upplösning gav mängder av små detaljer i ikoner - skinnfilofaxer i miniatyr med synliga sömmar, med små instuckna pennor, linjaler med fina centimeterstreck och kanske en post-it lapp på sniskan. Transparenta skuggor och toningar gav en känsla av djup. Det var ingen hejd på hur realistiskt allting blev, och det blev nästan en sport i att bräcka tidigare verk med ännu fler minituösa detaljer. Ordet skeuomorphism används för att beskriva en imitation av företeelser och detaljer som är en del av en befintlig produkt men som egentligen inte behövs i den nya produkten. Till exempel, fälgar på en bil som imiterar ekrar från hur hjul gjordes förut, en elektrisk vattenkokare som utformats som en gammal tekanna som ställs på spisen, eller när man tar ett foto med mobiltelefonen och ljudet från en slutare på en kamera spelas upp. 

En motreaktion mot den skenande skeuomorphism-trenden har de senaste 5 åren vuxit sig allt starkare till att bli i det närmaste standard idag. Trenden kallas Flat design och nu ska alla detaljer rensas bort igen. Man behöver inte längre visa vad som är möjligt med ny teknik. En enkel platta får ersätta ikonen. Objektet som avbildas (en kamera, en filofax eller ett dokument) simplifieras också till grunden av renodling - hur kan jag visa en kamera med så få streck som möjligt? Kanske en rektangel med en cirkel framför? Denna trend är dominerande idag även om den har luckrats upp något och man unnar sig små kontrollerade skuggor och antydningar till toningar. Trenden har givetvis slagit igenom stort på webben där skugg-effekter och skiftningar har fått ge vika för rena linjer, plattor och stramt hållen grafik. Till detta strama tillåts stora bilder och filmer, stor text och rubriksättning, som kontrasterar bra och lägger fokus på det viktigaste på webbplatsen: innehållet.

Ett av de mer definierade och väldokumenterade designsystemen inom flat design är Googles riktlinjer de kallar Material Design. Det är en samling designregler som deras operativsystem Android bygger på i nyare versioner och som också används som inspiration vid webbdesign.

8. Stora bilder, media, transmedialt berättande

Det är 2010-talet. Internet är snabbt. Folk är kräsna och har sett det mesta. Det är alltså i det närmaste en nödvändighet att berika webbplatsen med biler som får ta plats och annan tyngre media. Låt dina bilder flöda ut till kanten av webbläsaren. Bryt av flödet längre ner på sidan med en stor fullbreddsbild som väcker upp den scrollande besökaren och visar att här kommer något nytt intressant igen. Filmer har också visat sig ge en djupare beteendeförändring än text och bild. Så har det kanske alltid varit, men idag är en film inget hinder även om man besöker webbplatsen med en mobil. Filmer som används tillsammans med andra format som text och bild skapar ett berättande som ger en mycket starkare beteendepåverkan på besökaren. Detta är kritiskt för de som vill bygga ett varumärke, vinna över åsikter för sin sak, förklara svåra begrepp eller att skapa lojala följare och kunder.

9. Målgruppsanpassning

Slutligen, glöm inte bort målgruppen. Alla tidigare nämnda punkter för att åstadkomma en bra webbdesign är underkastade målgruppsfokuset. Är du en myndighet med hela svenska folket som mottagare eller är du en fin restaurang som riktar sig till kräsna gourméer? Det blir det naturligtvis skillnad i hur du använder ovanstående punkter. En myndighet kanske tonar ner alltför stora bilder, undviker filmer och linjerar allt mycket noga efter en grid för att ge ett mer stadigt och seriöst intryck. Restaurangen satsar kanske mer på stora känsloskapande bilder och filmer och en oregelbunden design som undermedvetet kommuncerar unikhet och personlig prägel. Gör alltid din målgruppsanalys först. 

Summering - TL;DR (too long, didn't read)

Tänk på följande för att skapa en bra, snygg och modern webbplats:

1. Enkelhet - få saker samtidigt, låt saker ta plats, rensa onödigt som bara stör
2. Centrerad layout - lägg sin webbplats i mitten av webbläsaren och besökarens synfält, tryck inte längs med en 
3. Få kolumner - ett flöde - minska antalet kolumner i bredd, stapla dem hellre på höjd och variera dem i formen
4. Långa sidor - våga scrolla - med fler kolumner på höjd kommer längre sidor, ingen fara vi är vana att scrolla
5. Enkel navigation - to hamburger or not? - Håll navigationen enkel med få undermenyval, överväg att kombinera en vanlig meny med en hamburgarknapp i mobilt läge
6. Linjera med en grid - definiera ett rutnät som får styra var du placerar allt innehåll på sidan
7. Flat design vs Skeuomorphism - undvik alla effekter med stora skuggor och blänk som var modet förut, satsa på minimalistisk design med små effekter
8. Stora bilder, media, transmedialt berättande - använd stora fina bilder, filmer och kombinationen av text, bild och film för en vackrare och effektivare webbplats
9. Målgruppsanpassning - glöm inte dina målgrupper, alla designtips passar inte alla

 

Författare: Stefan Hamilton 

 

Scrum, Twitter, Effektstyrning?

Vi förklarar

Was it good for you too?

Dela. Gilla. Tipsa.