Hoe kies ik de juiste kleuren voor mijn website?

Het kiezen van de juiste kleuren voor een website is ontzettend belangrijk. Slim kleurgebruik kan er onbewust voor zorgen dat de bezoeker wat langer op de website blijft hangen of net wat sneller geneigd is om op de koop-knop de klikken. De kleuren op een website worden vaak gekozen op basis van persoonlijke voorkeur, smaak of eigen associaties. Deze kleuren zijn niet altijd optimaal voor de website. In dit artikel heb ik een aantal punten op een rijtje gezet waarmee je rekening kunt houden bij het kiezen van de juiste kleuren.

Vijf basistips

Tijdens mijn opleiding Grafisch Vormgeven heb ik vijf belangrijke tips geleerd bij het kiezen van kleuren. Of het nu gaat om het maken van een website, het ontwerpen van een huisstijl of reclame-uitingen voor jouw bedrijf. Voor het gemak licht ik ze hier specifiek toe op het gebruik van websites.

  1. Bedenk allereerst waar jouw bedrijf voor staat. Wat zijn de kernwaarden en welke boodschap wil ik via mijn website overbrengen? Heb ik een nationaal bedrijf of een internationaal bedrijf?
  2. Wat is mijn doelgroep? Zijn dat mannen of vrouwen? Zijn dat ouderen of jongeren? Deze vragen zijn belangrijk om te stellen voordat je de basiskleur gaat uitkiezen. Vrouwen kunnen over het algemeen meer kleuren onderscheiden dan mannen en ouderen zijn vaak gevoeliger voor felle kleuren dan jongeren.
  3. Het gebruik van veel verschillende kleuren kan een website erg onrustig maken. Het is daarom belangrijk om het kleurenpalet de beperken tot maximaal vijf kleuren. Daarbij zijn felle kleuren minder prettig om naar te kijken dan natuurlijke kleuren.
  4. Heeft u een website waar veel tekst op staat, zorg dan voor een duidelijk contrast tussen tekst en achtergrond om de leesbaarheid te bevorderen. Bijvoorbeeld zwart op wit, wit op donkerblauw en lichtgrijs op donkergrijs.
  5. Heeft u een website met veel foto’s, dan komen deze het beste tot hun recht tussen kleurloze onderdelen zoals zwart, wit en grijstinten.

Psychologische kleurassociaties

Nu we deze basistips hebben doorgenomen is het tijd om stil te staan bij de betekenissen van verschillende kleuren. Het is belangrijk om te beseffen (zeker bij een internationale website) dat de betekenissen van kleur per cultuur kunnen verschillen. Zo staat wit in Nederland voor schoon, fris, puur, simpel en rust, maar staat de kleur wit in China voor ongeluk en rouw. Hier een overzicht van de belangrijkste associaties per kleur volgens Michiel Knuiman via Frankwatching:

Rood: energie, moed, kracht, opwinding en warmte.

Blauw: betrouwbaarheid, loyaliteit, oprechtheid en effectiviteit.

Geel: jeugdigheid en optimisme, zelfvertrouwen, creativiteit en vriendelijkheid.

Groen: balans, verfrissing, herstel, gezondheid, evenwicht, milieuvriendelijkheid, gerustheid en vrede.

Paars: rustgevend, luxe, visie, kwaliteit en waarheid.

Oranje: warmte, veiligheid, passie en plezier.

Roze: romantisch, vrouwelijke, liefde, warmte, voeden en rust.

Grijs: neutraliteit, saai, zakelijk.

Bruin: warmte, betrouwbaarheid, hulp en eerlijkheid.

Zwart: wijsheid en efficiëntie.

Wit: hygiëne, helderheid, zuiverheid en eenvoud.

De website van TUI

Hieronder heb ik twee screenshots geplaatst van de websites van grote bedrijven in Nederland. Ik zal per screenshot uitleggen hoe het juiste gebruik van kleuren ervoor zorgen dat de juiste associaties bij bezoekers worden opgeroepen.

Schermafbeelding 2016-10-18 om 11.12.53.pngBron afbeelding: http://www.tui.nl

Op de website van TUI is de kleur blauw duidelijk gekozen als basiskleur. De associaties van de kleur blauw sluiten perfect aan op de visie van TUI, namelijk betrouwbaarheid, loyaliteit, oprechtheid en communicatie.Dit komt ook duidelijk terug in de USP’s die worden genoemd, zoals het bezorgen van een onvergetelijke vakantie voor reizigers en het gratis omboeken en annuleren van reizen.

Ook wordt er veel gebruik gemaakt van de kleur rood. In dit geval legt rood de associatie met energie, opwarming en warmte. Vakanties zijn immers bedoeld om jezelf op te laden en je denkt hierbij al snel aan het warme zonnetje. Ook is rood een kleur die je triggert om snel actie te ondernemen wat weer ten goede komt van de conversie knoppen. De kleuren zorgen gezamenlijk voor een rustig en overzichtelijk geheel en de foto’s springen er mooi uit op de blauwe kleur.

De website van de HvA

Schermafbeelding 2016-10-18 om 11.23.55.pngBron afbeelding: http://www.hva.nl

De website van de Hogeschool van Amsterdam is ook een mooi voorbeeld. Wat mij opvalt is dat de HvA weinig gebruik maakt van kleur. Als basiskleuren hebben zij gekozen voor zwart en wit. Zwart staat in dit geval voor wijsheid en efficiëntie, wit staat hier voor zuiverheid en helderheid. Vier associaties die van belang zijn bij de uitstraling van een Hogeschool. Voor de knoppen heeft de Hogeschool van Amsterdam gekozen voor de kleur paars. Ook deze kleur roepen de juiste associaties op voor de school zoals luxe, visie, kwaliteit en waarheid.

Kleurmodellen

Volgens Hedwyg van Groendendaal (boek: webdesign; van concept tot realisatie) bestaan verschillende kleurmodellen die kunnen helpen bij het creëren van een geschikt kleurenpalet. Hieronder leg ik verschillende kleurenpaletten uit op basis van
het kleurenwiel.

color-wheel-1024x1024-1

Bron afbeelding: http://thestylenote.com

Monografisch model: dit model is gebaseerd op één kleur. De kleur wordt weergegeven in verschillende waarden en intensiteiten. Dit betekend dat de kleur hetzelfde blijft, maar de elementen verschillen in helderheid en lichtheid. Websites op basis van dit model worden vaak als rustig ervaren.

Complementair model: dit model wordt ook wel het contrastmodel genoemd. Hierbij gebruik je kleuren die tegenover elkaar in de kleurencirkel liggen. Bij de toepassing van dit model is meestal één van de kleuren dominant en wordt de andere kleur als accentkleur gebruikt. Dit is belangrijk omdat er anders een onrustig beeld kan ontstaan.

Analoog model: bij dit model wordt het kleurenpalet gevormd door naastliggende kleuren in de kleurencirkel. Dit zijn dan kleuren die op elkaar lijken, zoals rood, oranje en geel of diverse blauw- en groentinten. Deze kleuren liggen naast elkaar op de kleurencirkel. Een website op basis van dit model komt over het algemeen rustig over en komt ook vaak voor in de natuur waardoor het prettig en vertrouwd oogt.

Heb je iets aan mijn tips gehad? Of heb je nog andere goede tips? Reageer hieronder! Ik wens je veel succes bij het creëren van een mooie en succesvolle website en ben zeer benieuwd naar de resultaten.

Wil jij weten hoe een goede conversieknop eruit ziet voor een website? bekijk dan mijn video via de volgende link: https://micwatching.nl/2016/10/27/aaaaaand-action/  
Advertenties

9 reacties Voeg uw reactie toe

  1. Olaf schreef:

    Heeft iedere persoon dezelfde associaties met kleuren?

    Like

    1. kimvdwacht schreef:

      Hoi Olaf, dat is een goede vraag. Ieder individu heeft andere kleurassociaties. Het is daarom onmogelijk om vast te stellen wat bijvoorbeeld de kleur rood voor iédereen betekend. Er zijn heel veel onderzoeken gedaan naar kleurassociaties en de meeste komen met elkaar overeen. Zo komt uit veel onderzoeken naar voren dat ontzettend veel mensen blauw een betrouwbare kleur vinden, maar helemaal zeker weten of deze associatie voor iedereen zo is, daar zullen we helaas nooit achterkomen.

      Like

  2. Mariëlle Swager schreef:

    Hoi Kim,

    Wat een mooi artikel! Ik ben zelf bezig met het bouwen van een website voor een hulporganisatie in Guatemala en ik heb een klein probleem met het kiezen van de juiste kleuren. We hebben momenteel veel grijs en geel, maar voor de nieuwe website willen we graag een andere kant op en beter nadenken over ons kleurgebruik. We zijn een organisatie met een duidelijke visie en we willen graag overkomen als een plek waar mensen hulp kunnen krijgen en veiligheid kunnen vinden. We richten ons vooral op kinderen en hun ouders. Heb jij enig idee wat goede kleuren zouden zijn voor onze website?

    Alvast bedankt voor je advies!

    Mariëlle

    Like

  3. kimvdwacht schreef:

    Hoi Mariëlle, wat een goed initiatief! Voor jouw website adviseer ik om de kleur blauw als basiskleur te gebruiken. Blauw is wereldwijd de favoriete kleur en staat onder andere voor betrouwbaarheid, loyaliteit en oprechtheid. Deze sluiten goed aan bij jullie visie. Voor eventuele kopjes op de website adviseer ik de kleur oranje. Oranje staat voor warmte en veiligheid en deze kleur staat tegenover blauw in de kleurencirkel waardoor de kopjes goed opvallen. Mochten jullie foto’s gebruiken op de website adviseer ik om deze in sepia te plaatsen. Deze bruinige kleur wordt geassocieerd met warmte, betrouwbaarheid, hulp en eerlijkheid, dit is precies wat jullie willen bereiken. Ik hoop dat je wat hebt aan deze tips. Ik wens je heel veel succes met het ontwerpen van de website en als je nog vragen hebt kun je mij altijd even mailen op kimvanderwacht@hotmail.com.

    Liked by 1 persoon

  4. lisavdam schreef:

    Wat een top artikel! Iets waar je als vormgever echt wat aan hebt. Ik houd persoonlijk erg veel van neutrale kleuren en gebruik in ontwerpen dan ook vaak de kleuren zwart/wit/grijs. Ook in mijn fotografie maak ik vaak zwart-wit foto’s. Hoe zorg ik ervoor dat ik dan niet ‘saai’ over kom?! Dat is natuurlijk het laatste wat ik wil. Toch maar overstappen op (meer) kleur?

    Like

    1. kimvdwacht schreef:

      Hoi Lisa, je kan ervoor kiezen om te werken met pasteltinten of natuurtinten. Dit zijn neutrale kleuren die rustig ogen, net zoals zwart, wit en grijs. Ook passen deze kleuren prachtig bij zwart-wit foto’s. Toch combineren zwart-witte foto’s met een zwart-wit-grijze website het best. Doordat er geen afleiding is van kleur gaat alle aandacht naar de foto’s en deze springen er dan echt uit. Met een paar prachtige foto’s ben ik er van overtuigd dat jouw website alles behalve saai wordt!

      Like

      1. lisavdam schreef:

        Bedankt voor je antwoord! Hier heb ik echt wat aan!

        Like

  5. Nienke schreef:

    Wat een handig artikel! Zelf Veel bezig met het ontwerpen van websites en huisstijlen altijd fijn om wat achter liggende informatie te hebben!

    Liked by 1 persoon

  6. nesrinechaara schreef:

    Wat een leerzaam artikel! Ik wist dat kleuren verschillende associaties oproepen bij mensen, maar ik wist niet dat, dat per cultuur zou kunnen verschillen. Als ik een internationale website wil lanceren en de kleuren die het best bij het bedrijf passen zijn zwart, wit, grijs en pasteltinten, loop ik dan niet een enorm risico aangezien de kleur wit in China andere associaties oproept?

    Liked by 1 persoon

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s