Så gör man en snygg webbplats
9 steg till bättre, modernare och effektivare webdesign
Även om uttrycket säger att skönheten ligger i betraktarens öga så har vi gett oss på att hitta det vi anser är grundläggande och allmängiltigt i bra webbdesign.
Vad är 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. Men glöm inte att slipa på detaljerna. Små finjusteringar kan ge stor skillnad vilket ett annat uttryck the devil is in the details låter oss förstå.
Även om det inte går att skriva ut ett exakt recept på bra design försöker vi här söka delarna, komponenterna och pusselbitarna som rätt använda kan ge just ett bra helhetsintryck. Det blir ingen ofelbar formel för den ultimata webbdesignen och det går inte att följa punkterna mekaniskt för att trolla fram en snygg webbplats. Tipsen pekar istället ut en riktning mot en design som ska kännas modern, funktionell och attraktiv.
Vi tar inte upp allmän formgivningskunskap som typsnittsval, färger, 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 jakt på intressant innehåll och möjligen känslan av att det är fullt ös på nyhetsredaktionen. Tidningarna vill inte bara ge djup kunskap i en artikel utan också att visa hela nyhetsflödet, att försäkra sig om att ingen viktig händelse missas. Och naturligtvis att locka till klick på fler artiklar. 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 bra att renodla gränssnittet. Faktum är att de flesta punkter nedan kan underordnas den övergripande principen om enkelhet.
2. Centrerad layout
Många webbplatser har idag sitt innehåll centrerat, mitt i webbläsaren. Det har dock inte alltid varit så. Men en centreral loyout ger ett mer direkt tilltal och visar att man vill ställa sitt innehåll mitt i betraktarens synfält. Ett modigare och ärligare visuellt 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
Inte sällan 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. 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 kan kombinationer användas där de viktigaste menyvalen får ligga synliga medan andra sorteras in under hamburgarmenyn. Denna mix-variant ser man även då och då på webbplatser i skrivbordsläge/desktop då det även i det största skärmläget är viktigt att ha ett enkelt gränssnitt utan för många samtida val.
6. Linjera med en grid
Webbplatser som har bra flyt och känns harmoniska och balanserade är ofta uppbyggda mot ett osynligt rutnät, en 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 webbdesigntrenderna under 2010-2020 talet 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, trä eller vatten, blanklackerade, 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.
Någonstans började säkert formgivare få nog av racet att imitera verkligheten och en motreaktion mot skeuomorphism dök upp. Den nya 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 men luckrats sakta 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 initiativen inom flat design är Material Design som initierades av Google med externa kollaboratörer och bygger på open source kod. Det är en samling designregler som deras operativsystem Android bygger på som också används som inspiration vid webbdesign.
8. Stora bilder, media, transmedialt berättande
Det är 2020-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. 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.
Ett tips för dig som vill använda filmer är att också lägga in stor lättläst text som ersättning eller komplement till en speakerröst. Många gånger konsumerar vi dessa filmer på arbetsplatsen, på bussar och tåg och i andra offentliga miljöer där vi vill kunna ta del av det som sägs utan att störa eller berätta för alla vad vi tittar på.
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 alltför många 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.
10. Bonus - trendspaning: fulhet!
Vi kan inte hålla oss från att nämna en spaning på webben vi har gjort. Troligen finns ännu inget vedertaget ord för stilen, men fulhet summerar det rätt bra. Är det en blandning av lika delar ironi, progressivitet, nyskapande, regelbrott eller anarki vi ser? Eller är det skönhet i ny form? Hur som helst verkar en del webbplatser satsa på alla fel som går att hitta. Man blandar färger som inte passar ihop. Byter typsnitt ofta. Lägger på enkla "billiga" effekter och animationer. Regnbågstoning? Absolut. Lite dropskuggor? Javisst. Överdrivet fula och plottriga webbplatser har alltid funnits sedan webbens födelse, men detta är en mer medvetet ful satsning. Missta er inte - det är påkostade webbplatser som följer flera designregler från den här listan, men som samtidigt satsar hårt på att förfula(?) allt med extrema färgval och "tacky" designval. Ett exempel? Kika på https://designmatters.jp/en/
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
(10. Bonus - Trendspaning: Fulhet - utgå från några huvudsakliga designregler ovan, men vräk sedan på med blandade typsnitt, oharmoniserande färger, oväntade toningar och udda animationer. Om du vågar.)
Författare: Stefan Hamilton