Whitespace: de lege ruimte die je pagina leesbaar maakt
Er is een reflex die bij vrijwel elk project terugkomt. Er is ruimte over op de pagina, dus daar moet iets in. Een extra blok, nog een knop, een tweede rij logo’s. Voor je het weet staat er geen millimeter leeg en leest niemand er iets.
Lege ruimte voelt als verspilling. In werkelijkheid is het het middel dat de rest laat werken.
Zonder rust valt er niets op. Dat klinkt tegenstrijdig en het is de kern van goede vormgeving.
Het kost bovendien niets. Je hoeft er alleen iets voor weg te laten.
De lege ruimte die je pagina leesbaar maakt.
Wat is whitespace?
Whitespace is de lege ruimte tussen en rond elementen op je pagina. In het Nederlands zeggen we witruimte.
Die ruimte hoeft niet wit te zijn. Een donkere achtergrond zonder inhoud telt net zo goed mee.
Waar het overal zit
Tussen je regels tekst, tussen je alinea’s, rond je knoppen en in je marges. Ook tussen de letters zelf.
Bij tekst noem je dat regelafstand, zie typografie. Het is hetzelfde principe op kleinere schaal.
Waarom het werkt
Drie dingen die het doet
Het groepeert: wat bij elkaar staat, hoort bij elkaar.
Het benadrukt: wat losstaat, valt op.
Het geeft rust: je oog kan even niets doen.
Die eerste is de meest onderschatte. Een kopje dat dichter bij de volgende alinea staat dan bij de vorige, hoort daar zichtbaar bij.
Groeperen zonder lijnen
Veel mensen trekken lijntjes om blokken te scheiden. Ruimte doet dat beter en rustiger.
Haal je de lijnen weg en vergroot je de afstand, dan oogt je pagina meteen moderner. Meer daarover lees je bij UI.
Nadruk geven
Een knop met veel lucht eromheen valt meer op dan een grotere knop tussen andere elementen.
Bij het nadruk geven is ruimte dus een alternatief voor een felle kleur. En het is subtieler, zie call-to-action.
Waarom dat beter uitpakt
Kleur werkt maar tot op zekere hoogte. Drie felle knoppen op een pagina vechten met elkaar.
Ruimte kent dat probleem niet. Meer over die volgorde lees je bij visuele hierarchie.
Hoeveel is genoeg
Meer dan je denkt, en dat is de standaardfout. Bij twijfel haal ik er iets weg in plaats van iets bij te zetten.
Werk met vaste stappen: bijvoorbeeld 8, 16, 24, 48 en 96 pixels. Dat houdt je pagina consistent.
Leg die stappen vast
Anders kiest iedereen een eigen afstand en wordt je site rommelig. Meer daarover lees je bij design system.
Op een telefoon mogen de grote afstanden kleiner. Anders scrolt iemand door lege schermen.
Oogt het niet leeg?
Dat is de vraag die ik het vaakst krijg. Bij een volle pagina voelt schrappen als verlies.
Toch is het omgekeerde waar. Een pagina met te veel elementen leest niemand, dus die levert je niets op.
De test die ik doe
Haal er een blok af en kijk of iemand het mist. In negen van de tien gevallen niet.
Wat overblijft, krijgt meer aandacht. Dat is precies wat je wilde bereiken met dat extra blok.
Waarom kleur niet altijd de oplossing is
Kleur werkt maar tot op zekere hoogte. Drie felle knoppen op een pagina vechten met elkaar om aandacht.
Ruimte kent dat probleem niet. Je benadrukt er iets mee zonder dat het schreeuwt.
Ook tussen je letters
Regelafstand is hetzelfde principe op kleinere schaal. Staat je tekst te dicht op elkaar, dan lopen regels visueel in elkaar over.
Reken op ongeveer 1,6 keer je lettergrootte. Dat is de waarde die voor de meeste teksten prettig leest.
Vaste stappen aanhouden
Werk met 8, 16, 24, 48 en 96 pixels in plaats van steeds iets anders te kiezen. Dat houdt je pagina consistent.
Op een telefoon mogen de grote afstanden kleiner. Anders scrolt iemand door lege schermen.
Meer vragen over Whitespace
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is whitespace?
Waarom is witruimte belangrijk?
Hoeveel witruimte moet je gebruiken?
Is een pagina met veel witruimte niet leeg?
Hoe gebruik je witruimte om nadruk te geven?
Wat is het verschil tussen marge en padding?
Wat is whitespace?
Omdat het drie dingen tegelijk doet.
Het groepeert: wat bij elkaar staat, hoort bij elkaar. Het benadrukt: wat losstaat, valt op. En het geeft rust, zodat je oog even niets hoeft te doen.
Die eerste is de meest onderschatte. Een kopje dat dichter bij de volgende alinea staat dan bij de vorige, hoort daar zichtbaar bij.
Veel mensen trekken lijntjes om blokken te scheiden. Ruimte doet dat beter en rustiger.
Haal je de lijnen weg en vergroot je de afstand, dan oogt je pagina meteen moderner. Dat is een aanpassing van een uur met een zichtbaar effect.
Vervang lijntjes tussen blokken door meer ruimte. Dat scheidt net zo goed en het oogt rustiger.
Let vooral op je kopjes: die horen dichter bij de tekst eronder te staan dan bij de alinea erboven. Ruimte groepeert, benadrukt en geeft rust. Dat zijn drie dingen tegelijk zonder dat het je iets kost. Haal je de lijnen weg en vergroot je de afstand, dan oogt je pagina meteen moderner.
Waarom is witruimte belangrijk?
Whitespace is de lege ruimte tussen en rond elementen op je pagina. In het Nederlands zeggen we witruimte.
Die ruimte hoeft niet wit te zijn. Een donkere achtergrond zonder inhoud telt net zo goed mee.
Je vindt hem overal: tussen je regels tekst, tussen je alinea’s, rond je knoppen en in je marges. Ook tussen de letters zelf.
Bij tekst noem je dat regelafstand. Het is hetzelfde principe op kleinere schaal.
De reflex is om lege ruimte op te vullen, want het voelt als verspilling. In werkelijkheid is het het middel dat de rest laat werken.
Die ruimte hoeft niet wit te zijn. Een donkere achtergrond zonder inhoud telt net zo goed mee.
De reflex is om lege ruimte op te vullen, want het voelt als verspilling. In werkelijkheid laat het de rest juist werken. Je vindt hem overal: tussen je regels, tussen je alinea’s, rond je knoppen en in je marges.
Hoeveel witruimte moet je gebruiken?
Meer dan je denkt, en dat is de standaardfout. Bij twijfel haal ik er iets weg in plaats van iets bij te zetten.
Werk met vaste stappen: bijvoorbeeld 8, 16, 24, 48 en 96 pixels. Dat houdt je pagina consistent.
Leg die stappen vast, anders kiest iedereen een eigen afstand en wordt je site rommelig.
Dat gebeurt vanzelf zodra meerdere mensen aan je site werken.
Op een telefoon mogen de grote afstanden kleiner. Anders scrolt iemand door lege schermen, en dat is precies het tegenovergestelde van wat je wilt bereiken.
Haal bij twijfel iets weg in plaats van iets bij te zetten. Dat is bijna altijd de goede keuze.
Leg je afstanden vast in vaste stappen, anders kiest iedereen een eigen waarde en wordt je site rommelig. Meer dan je denkt is meestal het goede antwoord. Op een telefoon mogen de grote afstanden wel kleiner. Werk met vaste stappen zoals 8, 16, 24, 48 en 96 pixels.
Hoe gebruik je witruimte om nadruk te geven?
Door iets los te zetten van de rest. Een knop met veel lucht eromheen valt meer op dan een grotere knop tussen andere elementen.
Ruimte is dus een alternatief voor een felle kleur, en het is subtieler.
Dat pakt beter uit omdat kleur maar tot op zekere hoogte werkt. Drie felle knoppen op een pagina vechten met elkaar.
Ruimte kent dat probleem niet. Je kunt er iets mee benadrukken zonder dat het schreeuwt.
Het kost je bovendien niets. Je hoeft er alleen iets voor weg te laten, en dat is het lastigste deel van het hele verhaal.
Gebruik ruimte voordat je naar een felle kleur grijpt. Het werkt beter en het schreeuwt niet.
Drie felle knoppen op een pagina vechten met elkaar om aandacht. Ruimte kent dat probleem niet. Je hoeft er alleen iets voor weg te laten, en dat is het lastigste deel van het hele verhaal. Zo benadruk je iets zonder dat er nog een kleur bij komt.
Is een pagina met veel witruimte niet leeg?
Dat is de vraag die ik het vaakst krijg, en het antwoord is nee.
Bij een volle pagina voelt schrappen als verlies. Er is ruimte over, dus daar moet iets in: een extra blok, nog een knop, een tweede rij logo’s.
Toch is het omgekeerde waar. Een pagina met te veel elementen leest niemand, dus die levert je niets op.
De test die ik doe: haal er een blok af en kijk of iemand het mist. In negen van de tien gevallen niet.
Wat overblijft, krijgt meer aandacht. Dat is precies wat je wilde bereiken met dat extra blok, alleen dan wel.
Haal een blok van je pagina af en kijk of iemand het mist. In negen van de tien gevallen niet.
Wat overblijft krijgt meer aandacht. Een pagina met te veel elementen leest niemand, dus die levert je niets op. Bij een volle pagina voelt schrappen als verlies. Toch is het omgekeerde waar en dat merk je pas als je het doet.
Oogt je pagina vol en weet je niet wat eraf kan? Stuur me de link via het formulier hieronder. Ik kijk welke blokken elkaar in de weg zitten en wat er rust zou brengen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Witruimte, negatieve ruimte, lucht
