Waarom oogt mijn pagina onrustig?
Als je pagina onrustig oogt, ligt dat bijna nooit aan je kleuren. Het ligt aan wisselende afstanden, te veel lettergroottes en randen die niet uitlijnen.
Dat is goed nieuws, want dat zijn precies de dingen die je kunt vastleggen en herstellen.
Loop ze in deze volgorde na.
Je afstanden
De ruimte boven en onder je blokken. Als die per blok verschilt, oogt je pagina hobbelig zonder dat je kunt aanwijzen waarom.
Kies een set van vier of vijf afstanden en gebruik alleen die. Meer daarover lees je bij design system.
Je lettergroottes
Tel er eens hoeveel je er gebruikt. Bij veel sites zijn het er meer dan tien, terwijl vijf genoeg is.
Elke extra grootte maakt het beeld rommeliger.
Je uitlijning
Beginnen je blokken allemaal op dezelfde lijn? Als het ene blok drie pixels verder inspringt dan het andere, zie je dat wel maar benoem je het niet.
Hier helpt een grid. Meer daarover lees je bij wat een grid is.
Mijn vuistregels
- Beperk je tot vijf afstanden en vijf lettergroottes.
- Lijn alles uit op hetzelfde raster.
- Gebruik één afrondingsstraal voor al je hoeken.
- Kijk naar je pagina met samengeknepen ogen; onrust valt dan meteen op.
Die laatste is een oude ontwerperstruc en hij werkt verrassend goed.
Wat mensen ten onrechte aanwijzen
De kleuren en het lettertype. Die zijn zelden de oorzaak, en aan die twee sleutelen lost het gevoel niet op.
Ook niet: te weinig afbeeldingen. Meer beeld op een onrustige pagina maakt het erger. Meer daarover lees je bij css.
Waar je begint
Bij je afstanden. Dat is de ingreep met het grootste effect en het minste werk.
Meer daarover lees je bij hoeveel kolommen je gebruikt.