Sådan opbygger du en god side

Brugere læser ikke din hjemmeside i dybden. De scanner den for hurtigt at forstå, om den er relevant. Derfor handler det om at skabe en god komposition, der guider brugerens øje og gør det nemt at finde det vigtigste.

Herunder finder du en række konkrete tips til at opbygge en god side.

Rasmus Otto-Sidelmann
^{Digital Designer, GoPublic}

Hero

Det første, brugeren møder på en side, er din hero. Her skal det hurtigt være tydeligt, hvad siden handler om, og hvorfor det er relevant for brugeren.

Undgå generiske formuleringer og skriv i stedet noget, der skaber værdi. Teksten skal hurtigt gøre det klart, hvad siden indeholder, og hvad brugeren får ud af den. Ellers bliver den bare overset.

En af de vigtigste ting er, hvordan du placerer dit indhold. Her er rule of thirds et rigtig godt udgangspunkt. I stedet for at centrere alt, opdeler du dit layout i et 3x3 grid og placerer de vigtigste elementer langs linjerne eller i krydsene. Det giver en bedre balance, mere luft og et mere interessant layout. Samtidig hjælper det med at styre brugerens blik, så de naturligt bliver trukket hen mod det vigtigste indhold.

Scanbarhed og simpelt layout

Når brugeren bevæger sig videre ned på siden, handler det om at gøre indholdet nemt at afkode. Undgå lange tekstblokke og kompakt indhold, hvor alting står tæt, da det gør det svært at orientere sig og kræver for meget arbejde af brugeren.

I stedet bør du arbejde med korte afsnit, tydelige overskrifter og opdeling i sektioner, hvor det vigtigste ligger øverst og er let at få øje på.

Samtidig skal layoutet være simpelt og genkendeligt. Brugere forventer ikke at skulle lære en ny måde at navigere på, men at din sides navigation fungerer som dem, de allerede kender.

Grids og struktur

Hvis noget føles rodet, skyldes det ofte manglende struktur. Her er gridet dit vigtigste værktøj.

I praksis arbejder du allerede i et grid. I GoPublic ligger der et 12-kolonners grid, som alt indhold placeres indenfor. Det betyder, at du ikke skal opfinde strukturen selv, men i stedet bruge den aktivt. Tænk på gridet som nogle usynlige linjer, der løber ned gennem siden. Når dine elementer følger de samme kolonner på tværs af sektioner, opstår der en form for rytme i layoutet, og det gør siden lettere at afkode.

Hvis en overskrift starter i venstre side i én sektion, bør den som udgangspunkt også gøre det i den næste. Hvis dine cards fylder en tredjedel af bredden, så hold fast i det mønster. Små valg som det er med til at skabe sammenhæng. Når du bruger gridet konsekvent, bliver siden automatisk mere overskuelig.

Cards og indholdsopdeling

Når du først arbejder med et grid, giver det naturligt mening at opdele indhold i cards. Cards passer direkte ind i grid-strukturen og er med til at understøtte den rytme, du har bygget op.

Et card er typisk en lille boks med billede, overskrift og kort tekst. Når du placerer flere cards side om side i dine kolonner, bliver indholdet automatisk mere overskueligt.

Fordelen ved cards er, at de skaber gentagelse og struktur. Hvis dine cards fylder en tredjedel af bredden, og du gentager det mønster ned gennem siden, får du en tydelig linje og sammenhæng i layoutet. Det gør det nemmere for brugeren at orientere sig, fordi de hurtigt kan genkende mønsteret og forstå, hvordan indholdet er bygget op. Cards er især gode, når du har flere ting på samme niveau, fx nyheder, artikler eller indgange, der skal præsenteres side om side.

Visuel balance og white space

En god side føles rolig og balanceret. Det handler om, hvordan indholdet er fordelt på siden. Hvis alt ligger i den ene side, eller hvis der er for mange elementer tæt på hinanden, føles siden hurtigt tung og uoverskuelig.

Der findes overordnet to måder at arbejde med balance på:

Symmetrisk balance: Her spejler elementerne hinanden omkring en midterlinje. Det giver et roligt og stabilt udtryk og fungerer godt, når du vil signalere struktur og tryghed.
Asymmetrisk balance: Her er elementerne ikke spejlet, men stadig i balance. Det kan for eksempel være et stort billede i den ene side og mindre elementer i den anden. Det giver et mere dynamisk udtryk. For at få det til at fungere, er det en god idé at tænke i et grid. Selvom elementerne ikke er ens, bør de stadig ligge på nogle faste linjer og kolonner. Det er det, der skaber ro i layoutet, selv når det er asymmetrisk.

White space spiller også en central rolle. Luft mellem elementer gør det lettere at fokusere og hjælper med at fremhæve det vigtigste. Husk derfor at lave white space mellem afsnit, hvis de ikke hænger sammen med hinanden.

Gentagelser

Når du har fundet en opbygning, der fungerer, skal du holde fast i den. Hvis du først introducerer en bestemt måde at vise indhold på, forventer brugeren, at resten af siden fungerer på samme måde.

Det vigtige er, at du er konsekvent i din måde at bygge sektioner op på. Når du har opbygget en bestemt struktur, så lad den logik gå igen, selvom indholdet varierer. Det skaber en form for rytme i layoutet, hvor brugeren hurtigt lærer, hvordan dine sider er bygget op. Når mønsteret gentager sig, bliver det lettere at scanne indholdet og finde det, man leder efter, uden at skulle tænke over det hver gang.