Hoppa till innehåll
Design6 min läsning

Varför bra design är avgörande för en hemsida

Designen börjar kommunicera innan besökaren har läst en enda mening. Mist Creative om visuell hierarki, färg som funktion och varför den bästa designen nästan känns osynlig.

Av Theo & Mikaela

DelaLinkedIn
Mikaela Rasmusson och Theo Skogsberg sitter i varsin fåtölj och samtalar över ett runt bord med en uppfälld laptop, i en ljus lokal med stora fönster mot vattnet

När vi pratar om en bra hemsida hamnar fokus ofta på teknik, funktioner och innehåll. Men innan besökaren hinner läsa en enda mening har designen redan börjat kommunicera.

Färgerna, bilderna, typografin, avstånden och hur elementen är placerade på sidan påverkar hur vi uppfattar ett företag.

En bra design handlar därför inte bara om att en hemsida ska vara snygg. Den ska göra det enkelt för besökaren att förstå vem du är, vad du erbjuder och vad nästa steg är.

Design ska vara tilltalande. Men om den inte går att använda har den inte gjort sitt jobb.

Theo Skogsberg, Mist Creative

Det är en ganska enkel tanke, men den sammanfattar mycket av det vi tycker att bra webbdesign ska handla om.

Vi läser inte en hemsida. Vi skannar den

När vi kommer in på en ny hemsida börjar vi sällan med att läsa allt från början till slut. Istället skannar vi sidan efter sådant som fångar vår uppmärksamhet.

Vi letar efter rubriker, bilder, knappar och visuella element som snabbt kan berätta vad sidan handlar om.

Det är också därför hemsidans struktur är så viktig.

En tydlig rubrik kan fånga uppmärksamheten. En välplacerad knapp kan visa vad besökaren ska göra härnäst. En bild kan skapa en känsla innan vi ens har läst texten.

Designen fungerar helt enkelt som en karta.

Om kartan är tydlig hittar vi rätt utan att behöva tänka särskilt mycket. Om allt däremot konkurrerar om vår uppmärksamhet blir det snabbt svårt att veta vart vi ska ta vägen.

Ögat dras till det som sticker ut

Vi människor är väldigt bra på att upptäcka visuella kontraster.

Om nästan hela sidan är ljus och en knapp har en tydlig färg kommer knappen att sticka ut. Om en stor rubrik placeras ovanför mindre text kommer våra ögon naturligt att uppfatta rubriken som viktigare.

Det här är en del av det som kallas visuell hierarki.

Genom storlek, kontrast, färg, placering och mellanrum kan vi skapa en tydlig ordning på sidan och hjälpa besökaren att förstå vad som är viktigt.

Det betyder inte att vi ska försöka styra varje ögonrörelse. Det handlar snarare om att göra det enkelt för hjärnan att förstå informationen.

En bra hemsida säger visuellt:

Börja här → läs detta → upptäck mer → gör detta.

Färger påverkar mer än du tror

Färg är ett av de starkaste verktygen vi har inom design.

Olika färger kan skapa olika associationer och känslor. Blått förknippas exempelvis ofta med trygghet och professionalism, medan grönt kan associeras med natur, hållbarhet och lugn. Rött kan upplevas som energiskt och kraftfullt.

Men färg handlar inte bara om vilka känslor en färg förmedlar.

Färger hjälper också besökaren att förstå hur hemsidan fungerar.

Om vi använder en specifik färg för våra knappar kan besökaren snabbt lära sig att den färgen betyder "klicka här". Om länkar, knappar och andra interaktiva element däremot använder många olika färger kan gränsen mellan innehåll och funktion bli otydlig.

Därför behöver färgerna på en hemsida ha ett syfte.

En bra färgpalett ska både representera varumärket och hjälpa besökaren att navigera.

Design ska göra saker begripliga

Den tyske industridesignern Dieter Rams är en av de mest inflytelserika formgivarna inom modern design. Hans tio principer för bra design har blivit en viktig referens inom designvärlden.

Två av hans principer är särskilt relevanta för webbdesign:

"Good design makes a product useful."

Och:

"Good design makes a product understandable."

Rams menar alltså att bra design inte bara ska vara estetiskt tilltalande. Den ska också hjälpa användaren att förstå och använda det som har designats.

Det är precis samma tänk som behövs på en hemsida.

En snygg knapp som ingen förstår att den går att klicka på är inte särskilt bra design.

En imponerande animation som gör sidan långsam eller distraherar från innehållet är kanske cool, men den löser inte nödvändigtvis ett problem.

Och en kreativ layout som gör det svårt att hitta kontaktinformationen har kanske lyckats visuellt, men misslyckats funktionellt.

Det är här design och användbarhet måste mötas.

Bra design skapar förtroende

Tänk på skillnaden mellan två företag.

Det första har en modern, välstrukturerad hemsida med tydlig information, bra bilder och genomtänkta detaljer.

Det andra har en sida med gamla bilder, röriga menyer, olika typsnitt och information som är svår att hitta.

Även om företagen erbjuder exakt samma tjänst kommer vi sannolikt att känna större förtroende för det första.

Det stämmer med Stanfords forskning om webbtrovärdighet (Fogg m.fl., 2002–2003): visuell design var den faktor besökare oftast lyfte fram när de förklarade varför en sajt kändes trovärdig, i 46,1 procent av kommentarerna och därmed den vanligaste kategorin av alla.

Hemsidan är ofta en av de första kontakterna en potentiell kund har med ett företag.

Därför är designen en del av företagets kommunikation, inte bara dekoration.

Bra design ska nästan kännas osynlig

Den bästa designen är inte alltid den som får mest uppmärksamhet.

Ibland är det faktiskt tvärtom.

När navigationen är tydlig, texten lättläst, knapparna känns självklara och informationen ligger där vi förväntar oss att hitta den, behöver vi knappt tänka på designen alls.

Vi bara använder hemsidan.

Det är en av grundtankarna inom UX-design: att skapa en upplevelse där användaren kan fokusera på sitt mål istället för att försöka förstå hur hemsidan fungerar.

En hemsida ska inte få besökaren att tänka:

"Var ska jag klicka?"

Den ska få besökaren att känna:

"Där är det jag letade efter."

Snyggt räcker inte

Det är lätt att fastna i idén att en bra hemsida är en hemsida som ser bra ut.

Och visst, det visuella spelar stor roll.

Men design är större än färger, typsnitt och snygga animationer.

Bra design handlar om att förstå människan som faktiskt ska använda hemsidan.

Vad behöver personen se först?

Vad vill personen veta?

Vad ska personen göra?

Vad kan vi ta bort?

Vad behöver förtydligas?

Det är också här Dieter Rams filosofi om "Less, but better" blir relevant. Bra design behöver inte lägga till mer och mer. Ibland handlar det istället om att ta bort det som inte behövs och låta det viktiga få mer utrymme.

Design och funktion måste arbeta tillsammans

En snygg hemsida är inte automatiskt en bra hemsida.

En design kan vara kreativ, unik och visuellt imponerande men samtidigt vara svår att använda.

På samma sätt kan en hemsida vara väldigt enkel att använda men kännas opersonlig och inte kommunicera företagets identitet.

Bra webbdesign handlar därför om balansen mellan utseende, funktion och användarupplevelse.

Vi behöver fråga:

  • Vad ska besökaren förstå?
  • Vad vill vi att besökaren ska göra?
  • Vilken information är viktigast?
  • Hur skapar vi en tydlig väg genom sidan?
  • Hur representerar designen företagets personlighet?
  • Fungerar sidan lika bra på mobil som på dator?

När dessa delar samspelar blir designen ett verktyg som faktiskt hjälper företaget.

En hemsida är en upplevelse

En hemsida består inte bara av kod, bilder och text.

Det är en upplevelse som börjar i samma sekund som någon landar på sidan.

Besökaren bildar sig en uppfattning om företaget innan hen läst en enda rad. Därefter avgör struktur och design hur enkelt det är att förstå erbjudandet, hitta information och ta nästa steg.

Det är därför vi på Mist Creative ser design som en viktig del av hela webbprocessen. Vi vill inte bara skapa hemsidor som ser bra ut. Vi vill skapa hemsidor där designen hjälper innehållet att synas, varumärket att kännas och besökaren att hitta rätt. För när design och funktion arbetar tillsammans blir hemsidan mer än en digital broschyr. Den blir en del av företagets verksamhet.

Läs vidare

nästa steg

Redo att bli hittade och valda?

Boka ett kort möte så går vi igenom var ni står i dag. Mötet kostar ingenting, och alla som bokar får dessutom en kostnadsfri AI-synlighetsrapport: tio frågor i ChatGPT som visar var ni nämns i dag. Vi tar fram den innan vi ses och går igenom den tillsammans.
Theo och Mikaela ger varandra en high five utomhus vid en laptop i Malmö.