I love whitespace!

Druk ,druk , druk roept iedereen maar. Het gaat om dan om dagelijkse bezigheden. Maar wat dacht je van websites? Als het op je website druk is, worden je gebruikers gek. Ik hoor het vaak genoeg in gebruikersonderzoeken als ik de vraag stel hoe bijvoorbeeld de homepage wordt ervaren: ‘druk, ik weet niet waar ik kijken moet’ (gelukkig hebben we dan de eyetracker aanstaat die feilloos opneemt waar men heeft gekeken).  Over witruimte en hoe je dit moet gebruiken.

Witruimte is, mooi gezegd,  de ruimte tussen de elementen in een compositie. Dan heb je macro witruimte als het gaat om de ruimte tussen grotere elementen en micro witruimte als het gaat om de ruimte tussen kleinere elementen: lijst van items of tussen woorden en letters.

Waarom witruimte gebruiken?
Je gebruikt witruimte om het design ‘cleaner’ te maken en het design krijgt een professionele uitstraling. De elementen krijgen daardoor ‘lucht’ en bezoekers kunnen de content makkelijker opnemen. Als alle elementen dicht tegen elkaar staan is het moeilijker om je weg te vinden. Witruimte kan zelfs elegantie en verfijning toevoegen aan een design. Helaas is witruimte een van de meest ondergewaardeerde elementen in een goed webdesign.  

Hoe moet je witruimte gebruiken?

Marges
Een marge is de witruimte rondom een design element. Daarvoor moet je een paar dingen weten:

• Consistentie
  De marges moeten door de hele layout dezelfde zijn. Hoe meer consistent de marges des te meer georganiseerd en professioneel alles oogt. Denk zowel aan verticale als horizontale marges welke effect hebben op het design.
• Niet teveel
  Als er teveel marge wordt gebruikt, kan er voor zorgen dat er onvoldoende verbinding is met andere elementen.
• Niet te weinig
  Het gaat hier om witruimte. Dus zorg dat er ook witruimte wordt gebruikt. Tekst die tegen een afbeelding of bijvoorbeeld een navigatiemenu ‘gedrukt’ staat, komt slordig over. 

Koppen
Koppen heb je nodig om je content in leesbare stukken te hakken. Over het algemeen worden koppen als H1, H2, H3 en H4 gebruikt. De definiëring hiervan is terug te vinden in je CMS. Door het gebruik van koppen en titels wordt witruimte gecrëerd wat leidt tot makkelijk scanbare teksten. Hierdoor kan de lezer sneller door de content heen scrollen op zoek naar interessante informatie. In gebruikersonderzoeken zien we ook steeds dat gebruikers scannen en vooral weinig lezen.

Afbeeldingen
De marge tussen afbeeldingen kan het design maken of breken. Als de tekst te dicht op de afbeelding staat wordt het rommelig en moeilijk leesbaar. Als tekst te ver van de afbeelding staat, dan verdwijnt de verbinding met de afbeelding en verliest zijn kracht.

Bovengenoemde punten geven je inzicht waarom witruimte nodig is en welke invloed dit heeft op je design. Enkele voorbeelden van websites die witruimte goed gebruiken zijn Philips, Apple, Wehkamp en Friesland Campina. Een website die witruimte niet goed gebruikt is De Telegraaf.