Een betekenisvol kleurenpalet voor een interface samenstellen

Geschreven door: op woensdag 3 oktober 2018

Leestijd:

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:

Adelaar Logistics B.V.

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.

Basiskleuren 1

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.

Basiskleuren 2

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:

basiskleuren3.png

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:

actiekleur.png

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:

kleuren5.png

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.


Andere blogartikelen

  • Performance website hoog houden met behulp van SOLR

    Geschreven door: op maandag 3 december 2018

     Websites van onze klanten bevatten soms tienduizenden pagina’s. Dit zijn pagina’s die betrekking op de diensten die zij leveren en waar zij deze diensten leveren. Deze pagina’s worden gevuld me ...

    Bekijk het artikel »
  • HTML tips voor mail templates

    Geschreven door: op zaterdag 10 november 2018

    Bij het bouwen van een e-mail template binnen HTML komen er veel dingen kijken, ik leg in deze post een aantal basiselementen uit hoe je om moet gaan met de HTML van een mail template, en hoe wij daar ...

    Bekijk het artikel »
  • Documenteer je code

    Geschreven door: op zaterdag 27 oktober 2018

    Documenteren van je code is uiteraard een best practice. De code op zich mag zo beschrijvend mogelijk zijn, zodat de documentatie impliciet is, maar bijvoorbeeld een uitleg over het waarom van een bep ...

    Bekijk het artikel »
Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg