Een betekenisvol kleurenpalet voor een interface samenstellen

Het samenstellen van een kleurenpalet voor je website of programma is van groots belang. Zoals je misschien weet zijn kleuren in staat een sfeer en een betekenisvolle uitstraling te creëren. Simpele voorbeelden zijn blauw die vertrouwen en zakelijkheid uitstralen, terwijl rood de kleur is van actie en gevaar. Kleurgebruik kan de uitstraling van je onderneming dus flink beïnvloeden. Zo wil je bijvoorbeeld als industrieel dienstverlener een website met een strakke, vertrouwelijke en industriële vormgeving hebben, terwijl een informatiewebsite over een horecagelegenheid klasse en kwaliteit wilt uitstralen. Maar kleur kan ook gebruikt worden als communicatiemiddel in je website- of programma-interface. Met kleur kan informatie gestructureerd worden en kunnen elementen benadrukt worden. Ik zou je graag willen laten zien hoe je een kleurenpalet kunt samenstellen die past bij een bestaande logo en waarmee een interface duidelijk kunt vormgegeven.

De basiskleuren

Waarschijnlijk gebruik je in de uitstraling van je onderneming al distinctieve kleuren. Laten we als voorbeeld het fictieve logistiekbedrijf ‘Adelaar Logistics B.V.’ nemen. Zij hebben ons gevraagd een redesign te maken voor hun website. Hun logo ziet er zo uit:

We zien hier dat er twee belangrijke, complementaire kleuren worden gebruikt – vel geel en een ietwat onverzadigde blauwe kleur. Deze kleuren moeten we in ieder geval in het kleurenpalet opnemen. De gele kleur wordt hier als achtergrond gebruikt, wat ook in de website gebruikt kan worden als achtergrondkleur om bepaalde elementen te benadrukken. De blauwe kleur kunnen we goed gebruiken voor kopteksten. Deze kleur leent zich hier goed voor omdat het een donkere kleur is en deze goed zou contrasteren met een lichte achtergrond en dus goed leesbaar is. Tevens zou deze kleur kunnen dienen om witte tekst op te zetten, denk hierbij aan een footer of een blok met unique selling points.

Het logo heeft een witte achtergrond, en dit kunnen we gebruiken als achtergrond voor de website. Wel is het vaak goed een tweede lichte kleur uit te kiezen. Ik heb een grijze kleur uitgezocht die goed bij de gele, blauwe en witte kleuren passen, namelijk een koele, lichtgrijze kleur. De donkerblauwe tekst moet hierop ook goed leesbaar zijn.

We moeten ook nog een kleur uitzoeken voor de algemene tekst. Ik heb de blauwe kleur van het logo genomen en deze donkerder gemaakt, zodat tekst met deze kleur goed leesbaar blijft, ook als de tekst klein is.

Op dit moment ziet ons kleurenpalet er zo uit:

Actiekleuren

Deze kleuren vormen een goede basis om vanaf te werken. We zullen op onze website elementen hebben waarop je kunt klikken, denk bijvoorbeeld aan een link naar een pagina of een verzend-knop bij een formulier. De kleur die we daarvoor gebruiken mag er zeker wel uitspringen, maar moet wel binnen het opgestelde pallet passen. Ik heb de volgende kleur uitgekozen:

Deze blauwe kleur past goed tussen de eerder gekozen kleuren, maar springt er wel uit. Ik ben tot deze kleur gekomen door de blauwe kleur uit het logo te pakken, deze lichter te maken en verzadiging aan de kleur toe te voegen (‘feller’ maken).

De laatste kleur die we moeten kiezen is de kleur voor belangrijke call-to-actions. Dit zou een kleur moeten zijn die net zoals de actiekleur er uit springt. Deze kleur mag wat meer buiten het opgestelde pallet vallen om extra op te vallen. We willen deze kleur maar enkele keren gebruiken in ons ontwerp. Ik heb de volgende groene kleur uitgekozen:

We hebben nu zeven kleuren uitgekozen, en dat is een mooi aantal om bij te stoppen. Je wilt niet teveel kleuren definiëren, anders wordt het te druk en verliest je vormgeving consistentie en een distinctief karakter.

De kleuren toepassen

Het kleurenpalet is compleet. Nu is het belangrijk het kleurenpalet te controleren door het in het design toe passen. Werkt een kleur niet goed, of mis je iets? Geen man overboord, het is niet ongekend dat je tijdens het ontwerpproces je kleurenpalet aanpast. Het belangrijkste is dat je nadenkt over je kleurgebruik, en beseft dat elke individuele kleur communicatieve waarde bevat. Probeer de kleuren ook eens in een webbrowser te bekijken, of te printen. Daar worden ze mogelijk anders en moet het kleurenpalet nog steeds goed werken en herkenbaar zijn. Houd er rekening mee dat 10% van alle mannen en 1% van alle vrouwen (licht) kleurenblind zijn, dus het kan geen kwaad je ontwerp door een kleurenblindheidssimulator te halen. Door al deze stappen te doorlopen en goed te testen kom je hopelijk tot een prachtig kleurenpalet dat je onderneming herkenbaar en je website duidelijk en mooi maakt.