Designgrid: derfor ser gode hjemmesider rolige ud

Når en hjemmeside ser rodet ud, er det sjældent farverne eller billederne, der har skylden. Problemet er, at elementerne ikke står i nogen orden i forhold til hinanden. En overskrift starter et par pixels længere inde end teksten under den, hver sektion har sine egne afstande, og kortene i en række har forskellig bredde. Hver for sig er det detaljer. Samlet betyder de, at øjet ikke har noget sted at hvile.

Et designgrid er et sæt usynlige linjer, som alt på siden flugter med. Det begrænser ikke kreativiteten. Det er grunden til, at det gør indtryk, når man bryder det, for eksempel med et stort billede i hele skærmens bredde.

Hvad et grid består af

• Kolonner. Oftest 12 på computer, fordi tolv kan deles i 2, 3, 4 og 6. Indholdet fylder et valgt antal kolonner, ikke en vilkårlig bredde i pixels.
• Mellemrum mellem kolonnerne, altid lige store.
• Margener, altså afstanden mellem indholdet og skærmens kant.
• En lodret afstandsskala. I stedet for vilkårlige værdier et par faste, som regel multipla af 4 eller 8 pixels. Det giver sektionerne en rytme.

Griddet på mobil og computer

Ét grid passer ikke til alle skærme. En udbredt konvention er 4 kolonner på mobil, 8 på tablet og 12 på computer. Et kort, der fylder 4 af 12 kolonner på computeren, en tredjedel af bredden, fylder alle 4 på mobilen og går i fuld bredde.

Det vigtige er, at margenerne på mobil er de samme på hele hjemmesiden. Hvis én sektion går helt ud til kanten, og en anden har 24 pixels afstand, ser hjemmesiden straks ud, som om den er sat sammen af stykker.

Linjelængde

Griddet afgør også, hvor lange tekstlinjerne bliver. Klassiske typografiske råd siger 45–75 tegn pr. linje. Længere linjer er trættende, fordi øjet mister overblikket, når det springer til den næste. Derfor skal en artikeltekst ikke strække sig over hele bredden på en stor skærm, selv om billederne ved siden af gør det.

Afstande betyder mere, end man tror

Elementer, der står tæt, opfatter vi som hørende sammen. Hvis afstanden mellem en overskrift og dens tekst er den samme som mellem teksten og den næste overskrift, ved læseren ikke, hvad overskriften hører til. En enkel regel: afstanden inden for en gruppe skal være tydeligt mindre end afstanden mellem grupper.

En fast afstandsskala hjælper også teamet. Designeren og udvikleren diskuterer ikke 22 eller 24 pixels, men vælger det næste trin på skalaen.

Griddet og designsystemet

Griddet er fundamentet i et designsystem. Komponenter som kort, formularer eller sektioner med tekst og billede designes, så de fylder hele kolonner og bruger afstandsskalaen. Så bygges en ny side af færdige dele, der passer sammen uden justeringer. Det er en af grundene til, at en hjemmeside bygget på et system er billigere at videreudvikle.

Sådan tjekker du din hjemmeside på fem minutter

1. Venstrekanter. Hold en lineal op mod skærmen, eller tegn en lodret linje i et hvilket som helst værktøj. Starter overskrifter, tekst og knapper samme sted?
2. Antal forskellige afstande. Tæl, hvor mange forskellige afstande mellem sektioner du ser. Tre eller fire er orden, ti er tilfældighed.
3. Linjelængde. Åbn en artikel på en stor skærm. Har en linje mere end hundrede tegn, er teksten for bred.
4. Mobilen. Scroll gennem hjemmesiden, og kig kun på margenerne i siderne. Er de ens overalt?
5. Kort i en række. Har de samme bredde, og starter indholdet i samme højde?

Orden i griddet er halvdelen af indtrykket af en »professionel« hjemmeside. Den anden halvdel er ensartede farver og kontrast, som vi skrev om i artiklen om brandets farver. Se, hvordan vi forener de to i vores arbejde med hjemmesider.