Vad är skillnaden mellan Design och Layout?

Skillnad mellan Design och Layout - Illustration.

Vad är egentligen skillnaden mellan design och layout? Man kan lätt förvillas och tro att det är samma sak, eftersom båda i regel förekommer när man pratar om en webbplats utseende.

Jag väljer att börja med att gå igenom vad layout är eftersom det är grunden till hur designen kommer att hamna.

Vad är Layout på en webbplats?

Man skulle kunna beskriva layout som en webbplats skelett. Den håller uppe hela webbplatsen. Layouten utgör alla olika delar som placerats på webbplatsen.

En logotyp i toppen och menyn till höger är två exempel på vad layouten styr. Ett motsatt exempel skulle vara att layouten talar om att logotypen ska ligga i botten och menyn till vänster. Även om det sistnämnda inte är bra i praktiken visar det ändå på två olika scenarion.

Jag har i mitt exempel ovan berört några huvudelement. Dock innehåller layouten placering av alla element oavsett storlek. Det kan exempelvis vara vart en bild ska läggas, om den ska placeras till höger eller vänster.

Wireframes – Snabba upp arbetet med att skapa layout

För att snabba upp arbetet med att skapa layouten kan man använda sig av wireframes. Det gör det visuellt tydligt och man kan snabbt upptäcka brister utan att ens behöva lägga till någon design.

God layout talar för sig själv

En användare stannar kvar i snitt 4 sekunder på en webbsida. Då gäller det att på den korta tiden låta användaren snabbt hitta det han / hon söker. Layouten är viktigare än designen för just detta. Det kan spela roll om menyn ligger i toppen, till vänster eller till höger.

Detta är också viktigt när det gäller placeringen av annonser. Layouten är många gånger avgörande för om en annons genererar en intäkt eller ej.

Vad är Design på en webbplats?

När layouten (delarnas placering) väl är på plats, då som först kan man lägga in designen. Designen innebär utseendet i färg och form. Det kan bildligt ses som webbplatsens klädsel.

Textfärg, typsnitt, bakgrundsfärger och webbplatsens färgprofil är alla en del av designen.

Håll isär layout och design

Många som inte separerar layout och design sitter länge och filar på visuella delar på webbplatsen, utan att först ha spikat layouten. Det kan i värsta fall innebära att arbetet måste göras om då designern inte tänkt till från början.

En god design är lätt för ögonen att förstå

För liten text, för dålig kontrast och fel fokus är exempel på vanliga misstag som kan göras.

  • Utgå ifrån att texten ska vara läsbar för alla besökare, även de äldre.
  • Dålig kontrast kan på vissa skärmar innebära att texten försvinner.
  • Med fel fokus menar jag att användaren uppmärksammas på någonting annat än det man vill att användaren ska fästa blicken på. Det kan vara att användaren fäster blicken på menyn istället för innehållet.

Att tänka på – Layout vs design

Många som skapar en webbplats för första gången blandar ihop layout och design. Det gör att det kan bli tokigt om man inte tänker sig för. Det viktigaste är att layouten stämmer. Om den inte är rätt och behövs ändras i efterhand kan det innebära ett stort arbete. Om designen däremot behöver ändras är det inte alls lika stort arbete, så länge som inte designen gör att layouten också måste ändras.

Mitt råd är att i första hand se till att få layouten korrekt. I nästa steg, skapa designen. Om arbetet görs åt någon annan, var tydlig med att informera om att layouten är svår att ändra när den väl är spikad.

Sammanfattning

Bygg layouten först och designen i andra hand. Detta eftersom en webbplats egentligen rent funktionellt klarar sig utan design. Designen är webbplatsens kläder och har syftet att med sitt visuella intryck locka besökaren att via layouten ta sig till informationen hen söker.


Senast updaterad:

Per Renemark

Skribent: Per Renemark

Utbildad inom systemteknik och nätverksadministration genom en 3-årig kandidatexamen, med vidareutbildning inom webbutveckling. Har arbetat inom dessa områden sedan 20 år tillbaka.