Bij het bouwen van een website is de eerste neiging om ruimte te vullen. Nog een sectie, nog een uitgelichte functie, nog een regel tekst. De neiging die betere websites oplevert is het tegenovergestelde: laat ruimte over. Witruimte is geen lege ruimte. Het is wat al het andere op de pagina leesbaar, betrouwbaar en makkelijk te gebruiken maakt.
Witruimte in ontwerp verwijst naar de lege gebieden tussen en rond elementen op een pagina. Het omvat de ruimte tussen regels tekst, de opvulling binnen een knop, de afstand tussen een kop en de alinea eronder en de marges rond secties. Niets daarvan is verspild. Alles werkt mee.
De naam is een beetje misleidend: witruimte hoeft niet wit te zijn. Het is elk deel van een pagina dat niet door inhoud wordt ingenomen. Een donkere achtergrond met ruime afstanden tussen secties gebruikt witruimte even effectief als een witte achtergrond.
Waarom is witruimte belangrijk op een website?
Witruimte beïnvloedt hoe bezoekers inhoud waarnemen en verwerken. Pagina's met ruime afstanden voelen makkelijker te lezen, professioneler en betrouwbaarder. Pagina's met weinig ruimte voelen rommelig en moeilijker te navigeren, hoe goed de inhoud ook is.
De reden in het brein is eenvoudig. Als elementen dicht bij elkaar staan, moet het brein harder werken om te zien waar het ene eindigt en het andere begint. Als elementen ruimte om zich heen hebben, beweegt het oog zonder inspanning door de pagina. Minder moeite van de bezoeker betekent meer aandacht voor de echte inhoud en call-to-actions.
Witruimte brengt ook merkpositionering over. Premium- en luxemerken gebruiken steeds meer witruimte dan budget- of prijsgerichte merken. De associatie tussen ruime afstanden en kwaliteit zit diep. Een bedrijfswebsite die vol oogt, geeft een onbedoeld signaal over het merk af, wat de tekst ook zegt.
Welke soorten witruimte zijn er in webdesign?
Macrowitruimte
Macrowitruimte is de ruimte op grote schaal tussen de grote secties van een pagina. De afstand tussen de hoofdsectie en de sectie met functies, de marges aan weerszijden van de inhoud, de ruimte tussen de laatste sectie en de footer. Macrowitruimte geeft de pagina haar algemene lucht en bepaalt hoe open of dicht de lay-out op het eerste gezicht voelt.
Microwitruimte
Microwitruimte is de ruimte op kleine schaal binnen de inhoud: de ruimte tussen regels tekst (regelhoogte), de afstand tussen een label en het invoerveld in een formulier, de opvulling binnen een knop. Microwitruimte bepaalt hoe leesbaar afzonderlijke elementen zijn. Een alinea met krappe regelafstand is moeilijker te lezen dan dezelfde alinea met ruime regelafstand, ook als de lettergrootte gelijk is.
Actieve witruimte
Actieve witruimte is ruimte die bewust is geplaatst om aandacht te sturen of nadruk te leggen. Een ruime hoeveelheid ruimte rond een call-to-action-knop isoleert hem bijvoorbeeld visueel en laat hem opvallen tegen de omringende inhoud. Dit is witruimte als ontwerpmiddel, niet alleen als lucht.
Passieve witruimte
Passieve witruimte is de natuurlijke ruimte die rond inhoud bestaat als gevolg van de lay-out, niet als bewuste ontwerpkeuze. De afstand tussen het einde van een alinea en de rand van de inhoudskolom, de ruimte onderaan een pagina voor de footer. Ze is nodig maar niet strategisch.
Hoeveel witruimte is genoeg?
Er is geen vaste regel, maar de meest gemaakte fout is te weinig gebruiken, niet te veel. Twijfel je, vergroot dan de afstanden en kijk of de pagina beter aanvoelt. Dat is bijna altijd zo.
De hoeveelheid witruimte die werkt, hangt af van het type inhoud en het publiek. Een documentatiesite voor technische gebruikers mag dichter zijn dan een homepage voor algemene bezoekers. Een pagina voor een luxeproduct heeft meer lucht nodig dan een vergelijkingstabel. De juiste hoeveelheid is wat de inhoud het makkelijkst leesbaar maakt en de belangrijkste elementen het makkelijkst zichtbaar.
Een praktische test: als je je ogen halfdicht knijpt bij de pagina en alles in elkaar vervaagt, is er te weinig witruimte. Als je oog bij het bekijken van de pagina als geheel meteen de kop en de call-to-action vindt, werkt de witruimte. Het artikel over wat visuele hiërarchie is legt uit hoe witruimte samenwerkt met grootte, kleur en contrast om het oog van de bezoeker te sturen.
Veelgemaakte fouten met witruimte op bedrijfswebsites
Secties die zonder visuele scheiding tegen elkaar aan zitten, zijn het meest voorkomende probleem. Als de hoofdsectie, de sectie met functies, de getuigenissen en de call-to-action zonder lucht in elkaar overlopen, kunnen bezoekers niet zien waar het ene onderwerp eindigt en het andere begint. Verticale ruimte tussen secties toevoegen is meestal de ene aanpassing die een rommelige homepage het meest verbetert.
Krappe regelafstand bij lopende tekst maakt alinea's moeilijker te lezen, vooral op mobiel waar de regels korter zijn en het oog vaker van richting moet veranderen. Een regelhoogte van minstens 1,5 keer de lettergrootte is de algemeen gebruikte standaard voor leesbaarheid op het web.
Knoppen met te weinig opvulling voelen klein en moeilijk aan te tikken. Een knop die technisch de juiste grootte heeft maar weinig opvulling rond de tekst, lijkt visueel kleiner dan hij is en krijgt minder klikken. Ruime opvulling laat knoppen belangrijk voelen en makkelijk om op te handelen.
Inhoud die van rand tot rand loopt zonder zijmarges is onprettig om te lezen en laat een pagina onaf lijken. Elk inhoudsgebied profiteert van een consistente marge die tekst uit de buurt van de schermranden houdt, vooral op mobiel. Het artikel over hoe je een website mobielvriendelijk maakt behandelt witruimte als onderdeel van de bredere aandachtspunten voor mobiel ontwerp.
Hoe beïnvloedt witruimte SEO?
Witruimte beïnvloedt SEO indirect, via de signalen over gebruikerservaring die ze creëert. Pagina's die makkelijker te lezen zijn hebben lagere bouncepercentages en een langere tijd op de pagina. Deze gedragssignalen laten zoekmachines zien dat de pagina haar bezoekers goed bedient, wat in de loop van de tijd bijdraagt aan posities.
Ook paginasnelheid is relevant. Witruimte zelf heeft geen bestandsgrootte, dus meer ruimte maakt een pagina niet trager. Maar de ontwerpkeuzes die soms bij dichte lay-outs horen, zoals grote afbeeldingen dicht op elkaar, zware animaties tussen secties en te veel inhoud, kunnen allemaal de laadtijd beïnvloeden. Een schonere, ruimere lay-out gaat vaak samen met een snellere. Het artikel over wat SEO is behandelt hoe gebruikerservaring en technische prestaties samenhangen met zoekposities.
Zo regelt WEMASY witruimte
De sjablonen in de Websitebouwer van WEMASY zijn gebouwd met consistente standaardafstanden die een leesbare, professionele lay-out geven zonder handmatige instellingen. Opvulling van secties, regelhoogtes en afstanden tussen elementen zijn ingesteld op waarden die op alle apparaten werken. Met de visuele editor pas je de witruimte van afzonderlijke secties aan als de standaard niet bij je inhoud past, zodat je controle hebt zonder helemaal opnieuw te beginnen.
Bekijk wat erbij zit op de WEMASY Websitebouwer of bekijk de abonnementen op de prijspagina.
Veelgestelde vragen
Betekent meer witruimte minder inhoud?
Niet per se. Witruimte gaat over ruimte tussen en rond elementen, niet over inhoud weghalen. Je kunt een inhoudsrijke pagina hebben die toch witruimte effectief gebruikt door verwante inhoud duidelijk te groeperen, secties lucht te geven en niet alles tegelijk te willen tonen. De gedachte dat meer witruimte betekent dat je inhoud moet weghalen is een van de redenen waarom bedrijfswebsites te dicht worden. Meer witruimte betekent meestal beter georganiseerde inhoud, niet minder inhoud. Met de Websitebouwer van WEMASY zet je dit direct op je website.
Is witruimte belangrijk op mobiel?
Ja, aantoonbaar zelfs meer dan op desktop. Op een klein scherm is te dichte inhoud moeilijker te lezen en moeilijker nauwkeurig aan te tikken. Tikdoelen hebben ruimte om zich heen nodig om betrouwbaar te werken. Regelhoogtes moeten ruim zijn, zodat korte afgebroken regels leesbaar blijven. De kleinere schermbreedte op mobiel maakt dat elke keuze voor ruimte directer doorwerkt in de ervaring dan bij een brede desktoplay-out. Controleer alle afstanden op een echte telefoon voordat je publiceert.
Kan witruimte mijn website trager maken?
Nee. Witruimte is CSS-afstand en heeft geen noemenswaardige bestandsgrootte. Meer opvulling, marge of regelhoogte aan een pagina toevoegen verlengt de laadtijd niet. Wat de laadtijd wel kan beïnvloeden is de inhoud die de ruimte vult: grote afbeeldingen, ingebedde video's, zware scripts. Een ruime lay-out met geoptimaliseerde inhoud laadt even snel als een dichte met dezelfde inhoud, en voelt meestal een stuk prettiger in gebruik.
Hoe weet ik of mijn website te weinig witruimte heeft?
Het duidelijkste signaal is dat de pagina druk of moeilijk te lezen aanvoelt als je hem als geheel bekijkt. Specifieke aanwijzingen zijn tekst die dicht tegen de rand van het scherm loopt, secties die visueel samensmelten zonder duidelijke scheiding, knoppen die klein lijken terwijl ze technisch groot genoeg zijn en alinea's die vermoeiend lezen. De pagina laten zien aan iemand die hem nog niet heeft gezien en kijken waar zijn oog eerst naartoe gaat, is een van de betrouwbaarste manieren om problemen met witruimte te vinden, omdat vertrouwdheid met de inhoud drukte onzichtbaar kan maken voor de ontwerper.
Wat is het verschil tussen padding en margin in webdesign?
Padding is de ruimte binnen een element, tussen de inhoud en de rand. Margin is de ruimte buiten een element, tussen het element en de elementen eromheen. In de praktijk dragen beide bij aan witruimte. De padding binnen een knop bepaalt hoeveel ruimte de knoptekst omringt. De margin onder een kop bepaalt hoe dicht de volgende alinea erop volgt. Beide eigenschappen pas je aan om de afstanden te maken die een pagina leesbaar en overzichtelijk maken.