TL;DR
Witruimte maakt je content leesbaar en je knoppen zichtbaar. Kies per pagina één hoofdactie, gebruik hooguit twee lettertypen en drie tekstgroottes, en laat elementen die dicht bij elkaar horen ook dicht bij elkaar staan. Ruimte weghalen om meer te tonen, kost bijna altijd conversie.
Als een pagina niet werkt, is de reflex om er iets bij te zetten. Nog een blok, nog een knop, nog een aanbieding. Bijna altijd is weghalen effectiever. Hier waarom, en hoe je dat concreet doet.
Wat witruimte eigenlijk doet
Witruimte is niet leegte, het is de ruimte die betekenis geeft aan wat er wel staat. Drie effecten:
- Leesbaarheid. Meer ruimte tussen regels en rond tekstblokken maakt lezen merkbaar makkelijker.
- Aandacht. Een knop met veel ruimte eromheen valt op. Dezelfde knop tussen vijf andere elementen verdwijnt.
- Waardebeleving. Rustige pagina's worden als verzorgder en duurder ervaren. Kijk naar de sites van merken die hun prijs hoog willen houden: veel ruimte, weinig elementen.
Eén hoofdactie per pagina
Elke pagina heeft één ding dat je wilt dat iemand doet. Maak die actie visueel dominant en zet de rest subtieler neer. Twee knoppen die er precies hetzelfde uitzien, dwingen een keuze af en keuzes kosten tijd.
Praktisch: één gevulde knop in je accentkleur, andere acties als tekstlink of met alleen een randje. Dat is genoeg verschil.
Hiërarchie aanbrengen
Iemand die je pagina scant, moet in drie seconden zien wat de belangrijkste boodschap is. Dat regel je met grootte, gewicht en kleur, niet met meer elementen:
- Eén duidelijke kop, groot en zwaar.
- Een ondersteunende zin, kleiner en rustiger van kleur.
- Een knop in een kleur die verder nergens gebruikt wordt.
- De rest in gewone tekstgrootte.
Als alles opvalt, valt niets op. Dat is de meest voorkomende fout op homepages: vijf blokken die allemaal even hard schreeuwen.
Nabijheid vertelt wat bij elkaar hoort
Een kop die dichter bij de vorige alinea staat dan bij zijn eigen tekst, verwart de lezer. Zet ruimte boven een kop, minder eronder. Zo simpel, en het maakt een pagina meteen logischer.
Beperkingen die helpen
- Maximaal twee lettertypen. Eén is vaak genoeg, met twee gewichten.
- Drie tekstgroottes voor de body: klein, normaal en groot. Meer levert rommel op.
- Eén accentkleur naast je neutrale tinten. Gebruik die alleen voor acties.
- Een vast ritme in afstanden. Werk met veelvouden van bijvoorbeeld 8 pixels, dan valt alles vanzelf in lijn.
- Regellengte tussen 55 en 75 tekens. Langer wordt vermoeiend, korter wordt hakkelig.
Deze beperkingen klinken saai en zorgen juist voor een ontwerp dat verzorgd oogt zonder dat je een ontwerper hoeft te zijn.
Op mobiel is ruimte nog belangrijker
Op een klein scherm staat alles onder elkaar, dus de verticale afstand bepaalt het ritme. Wat werkt: royale afstand tussen secties, knoppen met genoeg ruimte eromheen zodat je niet mistikt, en tekstblokken van hooguit vier regels.
Test op je eigen telefoon: kun je met één duim comfortabel bij alle belangrijke knoppen, zonder per ongeluk iets anders te raken?
Ruimte is het goedkoopste ontwerpmiddel dat er is. Het kost niets en het is het eerste wat mensen weghalen als ze meer willen tonen.
De opruimoefening
Neem je homepage en doe dit:
- Schrijf op wat de pagina moet bereiken, in één zin.
- Loop elk blok langs en vraag: draagt dit daaraan bij?
- Verwijder of verplaats alles wat niet bijdraagt.
- Vergroot de afstand tussen de blokken die overblijven met een derde.
- Kijk of de belangrijkste knop nu opvalt.
Bij de meeste sites verdwijnen er twee tot vier blokken en wordt de pagina meteen duidelijker. Wat je weghaalt, kan altijd op een eigen pagina verder leven als het inhoudelijk waardevol is.
Tot slot
Rust is geen stijlkeuze maar een middel om je bezoeker te helpen kiezen. Als je twijfelt tussen iets toevoegen en iets weghalen, haal dan weg en meet wat er gebeurt. In mijn ervaring gaat het cijfer vaker omhoog dan omlaag.
Wil je hier hulp bij?
Uniek Webdesign bouwt websites met vaste prijs, persoonlijk contact en zonder verrassingen. Vraag een gratis conceptontwerp aan.
Offerte aanvragen