Webbdesign: principerna för god formgivning

Bra webbdesign betyder inte bara en vacker bild. Det är ett system som hjälper besökaren att förstå var hen har hamnat, vad man kan göra och vart man går härnäst. Stödjer formgivningen inte det hjälper inte ens den mest stilrena visualen. Nedan går vi igenom de principer för webbdesign som verkligen påverkar resultatet — och vid varje princip också hur man tillämpar den i praktiken.

Första intrycket och visuell hierarki

En besökare avgör på några sekunder om hen ska stanna eller lämna. Under den tiden läser hen inte texten utan skannar sidan med blicken. Den visuella hierarkins uppgift är att styra den blicken i rätt ordning: först huvudbudskapet, sedan den stödjande informationen och först därefter detaljerna.

Hierarki uppstår ur kontrast. Större text känns viktigare än mindre, en stark färg drar blicken snabbare än grått, och tomrummet runt ett element lyfter fram det. I praktiken betyder det: överst på sidan en tydlig rubrik som säger vad du erbjuder och till vem; under den en kort förklaring; och genast synlig en huvudknapp. Är allt stort och fett samtidigt syns ingenting. Mindre betoning ger ofta större effekt.

Användarupplevelse och en tydlig resa

Användarupplevelse (UX) handlar om hur enkelt det är för besökaren att nå sitt mål. För varje sida är det värt att fråga: vad vill den här personen göra här, och vad vill jag att hen ska göra? När de två sammanfaller blir resan naturlig.

Bra webbdesign leder besökaren från punkt A till punkt B utan att hen behöver tänka. Det innebär en logisk följd av steg: startsidan presenterar, tjänste- eller produktsidorna förklarar, kontakt- eller beställningsformuläret slutför. I slutet av varje sida bör det finnas ett tydligt nästa steg. Undvik situationen där besökaren läst färdigt och står i en återvändsgränd utan väg vidare.

Ett vanligt misstag är för många val på en gång. Erbjuder du tio möjligheter på en skärm väljer folk ofta ingen alls. Bättre med en tydlig huvudväg och ett par alternativ vid sidan om.

Navigation som inte kräver eftertanke

Menyn är sajtens karta. Den måste vara begriplig för någon som inte vet något om ditt företag. Använd vanliga, igenkännbara namn (Tjänster, Priser, Om oss, Kontakt) i stället för finurliga ordlekar. Ju färre menypunkter, desto lättare att välja — oftast räcker fem eller sex.

Besökaren bör alltid veta var på sajten hen befinner sig och hur hen tar sig tillbaka. Där hjälper en fast toppmeny, en brödsmulestig på längre sidor och tydligt urskiljbara länkar. Sök är användbart på större sajter, men det ersätter inte en ordentlig struktur.

Mobilanpassning och responsivitet

Största delen av webbtrafiken kommer i dag från telefonen. Det betyder att formgivningen måste tänkas igenom för den lilla skärmen, inte ”klämmas in” i den efteråt. Responsiv design anpassar sig till skärmbredden: spalterna hamnar under varandra, textstorleken förblir läsbar och bilderna skalas.

I praktiken spelar några detaljer roll. Knappar och länkar måste vara stora nog att träffa med fingret. Texten måste gå att läsa utan att förstoras. Formulärfälten får inte vara smala eller pressade mot varandra. En bra regel är att testa sajten i en riktig telefon, inte bara i ett nedkrympt webbläsarfönster.

Varumärkets konsekvens: färger och typografi

Konsekvent formgivning skapar förtroende. Ser varje sida olika ut blir intrycket slarv. Därför är det värt att slå fast en bestämd färgpalett och hålla sig till den: vanligtvis en huvudfärg, en eller två accentfärger och neutrala toner till bakgrunden. Färgerna behöver inte vara många — disciplin verkar mer professionellt än brokighet.

Detsamma gäller typografin. Ett eller två typsnitt räcker oftast: ett för rubriker, ett för brödtext. Det viktiga är läsbekvämligheten — tillräckligt radavstånd, en rimlig radlängd och tydlig kontrast mellan text och bakgrund. Ordentlig typografi gör sidan läsbar och en enhetlig stil håller ihop den.

Tydliga uppmaningar till handling

Uppmaningen till handling (CTA) är den punkt där besökaren fattar beslut: hör av sig, beställer, köper. Den måste lyftas fram visuellt och formuleras tydligt. ”Begär offert” säger mer än ”Vidare”. En huvuduppmaning per sida fungerar bättre än flera konkurrerande knappar.

Var CTA:n placeras spelar roll. Sätt den där besökaren är redo att besluta — efter att hen fått den information som behövs. På en längre sida kan samma uppmaning upprepas på flera ställen, eftersom olika människor når beslutet vid olika tidpunkter.

Hastigheten är en del av designen

Den vackraste formgivningen hjälper inte om sidan öppnas långsamt. Varje extra laddningssekund ökar sannolikheten att besökaren lämnar innan sidan ens hunnit visas. Hastigheten påverkar också placeringen i sökmotorn.

Den största boven är oftast bilderna. Optimera dem till rätt storlek och ett modernt format, ladda dem först när de behövs och undvik tunga bakgrundsvideor där de inte tillför värde. Den tekniska sidan är lika viktig: för mycket kod och för många tredjepartsskript (till exempel tungt konfigurerade WordPress-tillägg) bromsar sidan märkbart. Bra design tar hänsyn till prestandan redan från början.

Hur principerna sätts ihop

Visuell hierarki, en genomtänkt användarupplevelse, tydlig navigation, responsivitet, ett enhetligt varumärke, begripliga uppmaningar och hastighet är inte separata punkter på en lista. De arbetar tillsammans: en stark hierarki stödjer resan, ett konsekvent varumärke stärker förtroendet, hastigheten håller besökaren kvar. Saknas en länk lider helheten.

ArborIT har byggt webbplatser och arbetat med webbdesign sedan 2014, både med WordPress och med kodbaserade (React) lösningar — vi väljer teknik efter vad som passar projektet bäst. Planerar du en ny sajt eller vill du fräscha upp en befintlig, titta närmare på våra tjänster UI/UX-design och webbutveckling eller hör av dig så pratar vi om vad som ger mest för just ditt projekt.