Design og UX Artikel
UX & komposition

Layout grids - hvad er det?

Når du designer din hjemmeside i GoPublic, arbejder du inden for nogle faste rammer, hvor moduler kan fylde fra 1 til 12 kolonner i bredden. Dette kaldes et grid og er en grundlæggende del af moderne webdesign.

Her kan du blive klogere på, hvad et grid er, og hvorfor det er med til at gøre dine sider mere overskuelige og brugervenlige.

 

Rasmus Otto-Sidelmann
Digital Designer, GoPublic

Hvad er grids?

Hvis du forstår, hvordan grids fungerer, bliver det nemmere at skabe struktur og hierarki i dit design.

Du har måske lagt mærke til, at de fleste hjemmesider – uanset indhold og formål – følger nogle af de samme designprincipper. Indholdet placerer sig langs de samme usynlige linjer ned gennem siden i stedet for at stå tilfældigt. Det skyldes, at der arbejdes med et grid.

Et grid-system er en underliggende struktur, der hjælper dig med at placere elementer i forhold til hinanden. Det skaber balance, konsistens og et roligt visuelt udtryk. Samtidig gør det det lettere for brugeren at orientere sig og finde det, de leder efter.

Her ses forskellige hjemmesider, som alle er bygget i GoPublic med et 12-kolonners grid.

Grids i GoPublic

I GoPublic arbejder vi med et grid-system bestående af 12 kolonner på tværs af alle sider. Når du placerer elementer og trækker i dem, arbejder du med en fast grid-struktur.

Derudover er der indbygget en “snap to grid”-funktion, som betyder, at dine elementer automatisk tilpasser sig grid’et. Du kan fx ikke placere et element i 5,5 kolonner – det vil altid tilpasse sig de faste intervaller.

Det sikrer, at dit layout altid følger systemet og fremstår ensartet, uden at du selv skal tænke over det i detaljen.

Samtidig kan du med fordel begynde at tænke i de lodrette linjer, som gridet skaber ned gennem siden. Når elementer flugter med hinanden på tværs af sektioner, fx at tekst, billeder og bokse starter og slutter i de samme kolonner, opstår der en visuel sammenhæng, som gør siden roligere og lettere at afkode.

Her ses backend til denne artikel. Bemærk, hvordan elementerne “snapper” til de 12 kolonner i vores grid, samt hvordan elementerne har de samme længder ned gennem siden for at skabe lodrette linjer. Det giver en fast ramme at arbejde i, og gør det nemmere at lave mere avancerede layouts, uden man behøves være bange for at det kommer til at se rodet ud. 

Grids er afgørende for responsivt design

I dag tilgår brugere hjemmesider fra mange forskellige enheder og skærmstørrelser. Derfor er det afgørende, at designet er responsivt – altså at det automatisk tilpasser sig skærmen. Grid-strukturen er en central del af dette. Den gør det muligt at skalere og omorganisere indhold, så det fungerer på både mobil, tablet og desktop.

Et simpelt eksempel er en side med tre bokse ved siden af hinanden på desktop, som hver fylder 4 kolonner. Når siden vises på mobil, vil de samme bokse automatisk lægge sig under hinanden og fylde hele bredden. Indholdet er det samme, men strukturen tilpasser sig skærmen.

Det betyder, at du ikke skal designe flere versioner af den samme side. Grid’et sørger for, at layoutet hænger sammen på tværs af enheder, og at brugeren får en sammenhængende oplevelse, uanset hvordan siden tilgås.

Her ses samme design på desktop og mobil. Gridet sørger for, at indholdet automatisk tilpasser sig skærmstørrelsen og bevarer struktur og balance på tværs af enheder.

Andre fordele ved at arbejde i et grid-system

  • Bedre struktur og overblik
    Indhold placeres systematisk, hvilket gør siden nemmere at aflæse og navigere i.
  • Et mere professionelt udtryk
    Når elementer flugter og følger samme struktur, fremstår siden mere gennemarbejdet og visuelt rolig.
  • Understøtter SEO og indeksering
    En velstruktureret og responsiv side gør det lettere for søgemaskiner at forstå og indeksere indholdet korrekt.

Et grid er ikke noget, brugeren lægger mærke til, men det er noget, de mærker. Det skaber struktur, ro og sammenhæng på tværs af hele din hjemmeside. Når du arbejder med grid’et, arbejder du i virkeligheden med at gøre dit indhold lettere at forstå og bruge.