Wanneer iemand op je pagina belandt, kijkt hij niet keurig van linksboven naar rechtsonder. Het oog springt naar wat opvalt en slaat de rest over. Of dat het juiste element is, bepaal jij met contrast en nadruk. Maak je alles even groot en even rustig, dan weet de bezoeker niet waar hij moet beginnen. Maak je daarentegen alles druk en fel, dan vecht alles om aandacht en valt niets meer op. De kunst zit in het juiste verschil op de juiste plek. In deze gids laat ik zien hoe je met formaat, kleur en ruimte het oog stuurt, zodat bezoekers vanzelf zien wat het belangrijkst is en welke knop er echt toe doet.

Wat contrast en nadruk doen

Contrast is simpelweg verschil. Iets is groot tegenover klein, fel tegenover rustig, donker tegenover licht, druk tegenover leeg. Ons oog wordt automatisch getrokken naar wat afwijkt van zijn omgeving. Nadruk is het resultaat dat je daarmee bereikt: een element dat opvalt omdat het anders is dan alles eromheen.

Op een webpagina gebruik je dat om een rangorde aan te brengen. De belangrijkste boodschap mag groot en duidelijk zijn, een ondersteunende tekst rustiger, en de actie die je wilt dat iemand onderneemt springt eruit. Zo geleid je de blik in de juiste volgorde. Dit principe vormt de motor onder elke goede hiërarchie in je ontwerp: zonder verschil is er geen rangorde.

De middelen om contrast te maken

Contrast hoeft niet luid te zijn. Je hebt verschillende knoppen om aan te draaien, en vaak werkt een combinatie het rustigst en sterkst:

Hoe je kleur als contrastmiddel verstandig inzet, lees je in de gids over een kleurenpalet samenstellen, waarin de accentkleur een vaste rol krijgt.

Eén held per scherm

De belangrijkste regel rond nadruk is eenvoudig: per scherm is er één element dat het meest opvalt. Dat is je held. Vaak is dat de hoofdboodschap of de belangrijkste knop. Al het andere mag wel zichtbaar zijn, maar moet ondergeschikt blijven, zodat de held alle ruimte krijgt om te schitteren.

Gaat dit goed, dan weet de bezoeker binnen een seconde waar het om draait. Zet je meerdere helden naast elkaar, twee even grote knoppen, drie even felle blokken, dan ontstaat verwarring en moet de bezoeker zelf kiezen waar hij kijkt. Die keuze wil je hem juist uit handen nemen. Het belang van die ene heldere actie zie je terug in de blog over een call-to-action die werkt.

Goed contrast is geen kwestie van harder roepen, maar van stiller maken. Door het meeste rustig te houden, hoeft het ene element dat ertoe doet maar fluisteren om op te vallen.

Contrast en leesbaarheid

Contrast stuurt niet alleen het oog, het bepaalt ook of mensen je tekst überhaupt kunnen lezen. Te weinig verschil tussen tekst en achtergrond, bijvoorbeeld lichtgrijze letters op wit, maakt lezen vermoeiend en sluit mensen met een minder scherp zicht uit. Hier is contrast dus niet alleen mooi, maar een kwestie van toegankelijkheid.

De vuistregel is dat tekst altijd genoeg afsteekt tegen zijn ondergrond, zonder dat het hard of schreeuwerig wordt. Een diep donkergrijs op een warme lichte achtergrond leest vaak prettiger dan puur zwart op fel wit. Meer over deze balans lees je in de blog over kleurcontrast en leesbaarheid en in de gids over ontwerpen voor leesbaarheid.

Valkuilen: als alles schreeuwt

De meeste contrastproblemen ontstaan niet door te weinig, maar door te veel.

Alles even groot en fel

Wanneer elke kop schreeuwt en elke knop fel is, verliest de pagina zijn rangorde. Houd het meeste bewust rustig zodat het belangrijkste opvalt.

Te veel accentkleuren

Een accentkleur werkt alleen als hij zeldzaam is. Gebruik je hem overal, dan is het geen accent meer maar achtergrondruis.

Nadruk op het verkeerde

Soms valt het verkeerde element op, bijvoorbeeld een sierplaatje in plaats van de offerteknop. Controleer altijd of de aandacht naar het juiste punt gaat.

Zelf doen of uitbesteden?

Het idee van contrast is snel te begrijpen, maar de juiste dosering is een vak apart. Te veel en de pagina wordt vermoeiend, te weinig en alles vervlakt. Een ervaren ontwerper voelt aan hoeveel verschil genoeg is en weet de aandacht precies naar de plek te leiden die ertoe doet, zonder dat het opdringerig wordt.

Wil je een pagina waarop bezoekers vanzelf bij het juiste punt uitkomen? Bekijk dan de pagina over webdesign of leg me je situatie voor via de contactpagina. Wil je weten hoe je die aandacht omzet in aanvragen, lees dan ook de gids over conversiegericht ontwerp.

Veelgestelde vragen

Contrast is het verschil tussen elementen: groot tegenover klein, fel tegenover rustig, druk tegenover leeg. Nadruk is wat je met dat contrast bereikt: één element dat eruit springt omdat het anders is dan de rest. Contrast is dus het middel, nadruk het doel. Zonder contrast kun je niets benadrukken.

Zeker. Als alles opvalt, valt niets meer op. Te veel felle kleuren, te veel grote koppen en te veel knoppen die om aandacht vechten, maken een pagina vermoeiend en stuurloos. Goed contrast betekent juist dat je het meeste rustig houdt, zodat het ene element dat ertoe doet vanzelf opvalt.

Nee, kleur is maar één manier. Je kunt net zo goed contrast maken met formaat, met ruimte eromheen, met een ander lettertype of met dik tegenover dun. Vaak werkt een combinatie het sterkst. Wie alleen op kleur leunt, mist de subtielere middelen die een pagina rust en richting geven.

Doe de kniptest: kijk een seconde naar je pagina en knijp je ogen daarna dicht. Wat herinner je je het eerst? Idealiter is dat precies het element dat het belangrijkst is. Zie je niets uitspringen of juist te veel tegelijk, dan klopt het contrast nog niet.

Verder in de kennisbank: Ontwerpprincipes die elke goede website deelt · Een kleurenpalet samenstellen · Conversiegericht ontwerp