Witruimte: dé sleutel tot een krachtig ontwerp

Witruimte is een van de meest onderschatte en verwaarloosde tools binnen design. Toch zal het je verbazen hoe belangrijk witruimte kan zijn. Witruimte is namelijk krachtig genoeg om bezoekers op jouw pagina te houden. Benieuwd wat witruimte dan zo belangrijk maakt? Wij leggen het je uit in dit blog.

We beginnen bij het begin: wat is witruimte, ook wel negative space genoemd, eigenlijk? Witruimte is de lege ruimte tussen verschillende designelementen. Deze vind je onder andere tussen de regels van alinea’s en tussen UI-componenten.

Vaak wordt witruimte en beetje onderschat. Veel mensen beschouwen witruimte namelijk als verspilde ruimte die nog gebruikt kan worden om extra informatie toe te voegen. Niets is minder waar en dit kan wel eens problemen veroorzaken tussen de ontwerper en de opdrachtgever. Witruimte is namelijk een krachtige designtool. Gebruik je hem goed? Dan is het resultaat enorm. Overigens hoeft witruimte helemaal niet wit te zijn. Witruimte kan iedere kleur bevatten en zelfs een foto zijn.

Witruimte: de verschillende soorten

Wanneer we het over witruimte hebben, hebben we het over verschillende soorten. Tijdens het maken van een ontwerp zijn er twee soorten witruimtes van belang, namelijk: micro witruimte en macro witruimte.

Micro witruimte zorgt voor een opvallende en prettig leesbare button

Micro witruimte
Micro witruimte verwijst naar kleine stukjes lege ruimte. Bijvoorbeeld de ruimte tussen letters en tekstregels. Deze micro witruimte wordt gebruikt om een tekst goed leesbaar te maken en is bepalend voor het leestempo van de bezoeker. Voor een bodytekst is een goede ratio tussen de lettergrootte en de regelhoogte tussen de 1,5 tot 2x. Hierbij geldt: hoe groter de lettergrootte is, hoe kleiner de regelhoogte. Dit wil zeggen dat kleinere lettertypes juist meer regelhoogte nodig hebben in plaats van minder.

Ook wordt micro witruimte gebruikt om een fotoraster minder rommelig te maken. Micro witruimte wordt dan gebruikt om de verschillende afbeeldingen van elkaar te scheiden zodat het niet op één grote afbeelding lijkt.

Macro witruimte
Waar micro witruimte verwijst naar kleine stukjes lege ruimte, verwijst macro witruimte juist naar de grotere lege ruimtes binnen een ontwerp. Macro witruimtes zijn de marges aan de linker- en rechterkant van de content op een pagina, maar ook de ruimtes boven en onder verschillende blokken met content. Omdat macro witruimtes over het algemeen grote opvallende ruimtes zijn, vallen deze meer op vergeleken met micro witruimtes. Daarnaast zijn macro witruimtes de meest gebruikte witruimtes in een ontwerp. Dit wil overigens niet zeggen dat ze ook belangrijker zijn. Micro en macro witruimtes zijn namelijk even belangrijk en een goede balans tussen beide witruimtes is van belang voor ieder ontwerp.

Waarom is witruimte dan zo belangrijk?

Door de witruimte overal consistent te houden en op de juiste manier toe te passen, creëer je rust in een ontwerp. Hierdoor weet de bezoeker onbewust beter waar hij of zij moet kijken en klikken. Ook raakt de bezoeker niet afgeleid door andere content op de pagina, omdat hij of zij de kans krijgt om rustig alles in zich op te nemen. Dit resulteert in een fijne ervaring voor de bezoeker waardoor hij of zij langer op de site zal blijven.

Ook bij calls-to-action, ook wel knoppen of buttons genoemd, is het gebruik van de juiste witruimte erg belangrijk. Door genoeg witruimte rondom de tekst in een call-to-action te gebruiken, is de tekst duidelijker leesbaar. Dit geeft de bezoeker een positief gevoel en motiveert om gebruik te maken van de call-to-action.

Naast de witruimte bij calls-to-action, kan het gebruik van groeperingen ook een groot verschil maken in een ontwerp. Door elementen visueel bij elkaar te zetten en deze groepen te scheiden door middel van grotere witruimtes, herkennen gebruikers sneller elementen die bij elkaar horen.

Witruimte zorgt voor een betere leesbaarheid en een goede samenhang

Hierboven een voorbeeld van hoe je het beter wel en beter niet kan doen. Eerst staat alles erg dicht op elkaar, is de tekst slecht leesbaar en oogt het hele blok rommelig. Bij de tweede versie is de tekst prettig leesbaar en heeft het blok een veel rustigere uitstraling.

Het gebruik van witruimte: een aantal voorbeelden

Om te laten zien wat het gebruik van witruimte kan doen voor een ontwerp, hebben wij een aantal voorbeelden op een rijtje gezet.

1. Apple

Bron: apple.com

De website van Apple is een mooi voorbeeld. Apple maakt namelijk al jaren als een van de eerste websites goed gebruik van witruimte. Zoals op het voorbeeld te zien is, heeft Apple het product strategisch in het midden van het ontwerp geplaatst met hier omheen veel macro witruimte. Dit zorgt ervoor dat jouw oog direct op het product valt. Door de content hieronder te centreren wordt de bezoeker getriggerd om verder te scrollen.

2. Google

Bron: google.com

Ook Google maakt goed gebruik van witruimte. Sterker nog: Google is koning witruimte. Er wordt veel gebruik gemaakt van macro witruimte en voor Google pakt dit enorm goed uit. Als bezoeker valt jouw oog namelijk meteen op de zoekbalk. En dat is precies de bedoeling, want Google wil natuurlijk dat jij hier gebruik van gaat maken.

3. Dropbox

Bron: dropbox.com

Bij Dropbox zie je dat er goed gebruik wordt gemaakt van de CTA’s. Deze zijn opvallend en er is veel witruimte, waardoor de tekst in de CTA’s duidelijk te lezen is. Ook in de header wordt goed gebruik gemaakt van witruimte waardoor er een soort van lucht wordt gecreëerd tussen de content in. Zodra je verder naar onder scrolt, neemt de witruimte af. Valt het jou ook op dat de website meteen een drukkere en rommelige uitstraling krijgt?

4. Hellofresh

Bron: hellofresh.nl

Ook Hellofresh maakt bij de CTA’s goed gebruik van de witruimte. De tekst is duidelijk leesbaar en er is genoeg ruimte. De macro witruimte is daarentegen erg krap. Deze is zelfs krapper tussen de blokken in.

5. Bol.com

Bron: bol.com

Bij Bol.com zie je aan de linker- en rechterkant veel witruimte. Dit is nodig omdat bol.com gebruik maakt van veel verschillende kleuren. Het gebruik van witruimte is over het algemeen prima, maar de combinatie van het kleurgebruik en weinig contrast zorgt ervoor dat de webshop nogal druk oogt. Vooral onderaan de homepagina valt dit erg op.

6. Marktplaats

Bron: marktplaats.nl

Marktplaats maakt gebruik van een klein lettertype. Daarnaast staat alles staat dicht op elkaar, waardoor er veel gebeurt op één plek. Dit zorgt ervoor dat een bezoeker stress kan ervaren tijdens het bezoeken van deze website. Dit is natuurlijk iets wat je wilt voorkomen. Wanneer een bezoeker stress ervaart, kan hij of zij de website verlaten en niet meer terugkomen.

6. Vtwonen

Bron: vtwonen.nl

Vtwonen maakt goed gebruik van witruimtes. Door grote beelden te combineren met veel witruimte en weinig tekst, heeft de website een goede balans tussen het gebruik van elementen en de witruimte eromheen.

De do’s en dont’s van witruimte

Het gebruik van voldoende witruimte is dus enorm belangrijk in jouw ontwerp. Ga je aan de slag met jouw eigen ontwerp? Dan geven wij je graag een aantal tips om je op weg te helpen.

Do’s

• Zorg ervoor dat je elementen onderscheid van elkaar.
• Geef jouw ontwerp meer ruimte. Dit lucht op, letterlijk.
• Omring de CTA’s met veel witruimte en geef lucht aan de CTA’s in de tekst.

Dont’s

• Het verschil tussen micro witruimte en macro witruimte vergeten.
• Niet consequent blijven. Gebruik herhaaldelijk dezelfde witruimte tussen verschillende elementen.
• Witruimtes over het hoofd zien.

Meer weten over het gebruik van witruimte in een ontwerp?

Wil jij meer witruimte creëren in jouw ontwerp of webdesign, maar kom je er zelf niet helemaal uit? Of wil je juist een volledig nieuw ontwerp waarin wél gebruik wordt gemaakt van voldoende witruimte? Onze specialisten kijken graag met je mee. Neem daarom gerust vrijblijvend contact met ons op.