» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #89

Een lekker kleurtje! - Kleuren, emoties en ontwerp

Een goede website heeft een logische structuur, een heldere navigatie en een mooi design. En één van de aspecten die komt kijken bij een mooi design is kleur. Kleur is meer dan alleen een ondersteunend middel om belangrijke onderwerpen aan te geven: kleur kan namelijk je website maken of breken.

Luke Wroblewski schrijft op Boxes and Arrows dat er waarschijnlijk geen ander designelement te vinden is dat zoveel invloed heeft op hoe we ons voelen in een ruimte als kleur. Kleur is bewust of onbewust gekoppeld aan de sfeer: denk maar aan de gezellige, bruine kroeg. En iedereen weet dat je de muren van een kleine kamer beter niet donker kunt verven, omdat de ruimte anders veel kleiner lijkt dan hij in werkelijkheid is. De invloed van kleur geldt echter niet alleen voor fysieke ruimtes, maar ook voor websites. De kleurstelling van een website draagt voor een belangrijk deel bij aan hoe je bezoekers de website ervaren.

Hoe werkt kleur?

Kleuren die je ziet worden door je hersenen geïdentificeerd als bijvoorbeeld rood of groen. Je ziet gras en je hersenen vertellen je dat het groen is. De hersenen doen daarnaast nog iets: ze koppelen waardeoordelen aan de kleur die je ziet op basis van menselijke instincten en aangeleerd gedrag. Kinderen leren al snel dat de blauwe kraan ongevaarlijk is omdat daar koud water uitkomt, maar dat ze met de rode kraan moet oppassen, omdat het water wel eens erg heet zou kunnen zijn. Ook het idee dat bepaalde kleuren bij elkaar vloeken, zoals roze en rood, is aangeleerd. Kijk je naar een mooie bos bloemen, dan zie je dat de combinatie roze en rood helemaal zo slecht nog niet is.

Kleur toepassen op websites

Aangeleerd of niet, kleur maakt emotie los en kan je daardoor blij of boos, verrast of verveeld, ongemakkelijk of prettig laten voelen. Dit principe kun je prima toepassen op websites door een kleurenschema te maken dat de gewenste emotie oproept. De eerste stap is om niet bij de kleur zelf te beginnen, maar bij de boodschap van de website. Wordt het een zakelijke presentatie of moet de website juist speels zijn? Schrijf een groot aantal emoties op die de boodschap moeten dragen, zoals bijvoorbeeld professioneel, overtuigend of interactief. Schrijf en schrap net zolang totdat je een duidelijk beeld hebt van de belangrijkste emotie.

Naar welke kleur welke emotie los kan maken is uitgebreid onderzoek gedaan. De verschillende onderzoeken heb ik gebruikt om mijn eigen lijstje van kleur en emotie samen te stellen. Voor uitgebreidere overzichten kun je terecht op de website van Claudia Cortés en op Wikipedia. Op basis van je hoofdemotie kun je met behulp van het onderstaande kleurenoverzicht je hoofdkleur vinden. Het schema helpt je een basiskleur te kiezen, ook als het niet je persoonlijke eerste keuze zou zijn.

Hou bij het gebruik van één van deze kleuren rekening met het verschil in warme en koele kleuren. De warme kleuren zijn de rode, bruine, gele en oranje tinten (herfstkleuren). De warme kleuren zijn opwindender en agressiever dan koude kleuren en kun je daarom beter met mate toepassen. Koele kleuren zijn tinten gebaseerd op blauw, blauw-groen en paars. Omdat deze tinten meer rust uitstralen zijn ze wat makkelijker en wat meer in te zetten dan de warme kleuren.

Vaststellen van de hoofdtint

Nu je de hoofdkleur van de website hebt gekozen ben je klaar voor stap twee: het vaststellen van de hoofdtint. Stel dat je groen hebt gekozen voor een website over gezondheid, dan zijn er miljoenen soorten groen die je kunt gebruiken. Wat je nodig hebt is een groen om mee te starten. Hoe kom je het eenvoudigst aan een groen? Ga naar een website, pak een plaatje erbij of ga gewoon wat zitten vogelen in Photoshop en kies een groen. Zie je ergens een groen die je bevalt, gebruik dan een van de vele programmaatjes (ik gebruik zelf de Hex Color Finder om de RGB waarden vast te stellen. Heb je een foto gebruikt om je eerste groen te vinden? Bewaar deze dan, want die heb je later nodig.

Kleurenschema op basis van de hoofdtint

Nu is het zaak om bij je hoofdgroen een aantal bijpassende tinten te vinden. Een eenvoudige manier om dit te doen is met behulp van een beetje wiskunde. Op EasyRGB.com kun je de RGB waarden van je hoofdkleur invoeren en daar berekent de website de tinten die daar het beste bij passen. In het groene voorbeeld zie je dat er ook een rode tint uitkomt. Erg handig, want die kun je gebruiken voor onderdelen in je website die extra aandacht nodig hebben (denk hierbij wel aan je kleurenblinde bezoeker, die deze twee kleuren niet goed van elkaar kan onderscheiden). Uit de resultaten van pak je vier of vijf tinten en je bent klaar met het creëren van een kleurenschema!

Een tweede methode om de kleuren bij elkaar te zoeken is met behulp van de foto die je gebruikt had voor je hoofdtint. Deze methode neemt iets meer tijd in beslag, maar het grote voordeel is dat het eigenlijk niet mis kan gaan en je altijd een kleurenschema krijgt dat er prettig uitziet. De theorie hierachter is dat de natuurlijke omgeving met al zijn verschillende kleuren – ook degenen waarvan je aangeleerd is dat ze niet bij elkaar passen – er altijd goed uitziet. Heb je een foto gevonden die bij de boodschap past, of waar je startkleur uit afkomstig is, dan kun je het overige deel van de foto gebruiken om je andere tinten te vinden. Alle kleuren die je uit de foto haalt zullen goed bij elkaar passen, omdat ze dat in het echt ook doen!

En nu?

Nu je je kleurenpalet bij elkaar hebt kun je deze (met mate) gaan toevoegen aan de website die je aan het ontwikkelen bent of gebruiken voor een redesign. Ook al zorgt een goed kleurenschema voor een prettig ogende website, dit betekent niet dat er automatisch meer bezoekers komen. Echter, je jaagt nieuwe bezoekers ook niet meteen weg. Ervaren (nieuwe) bezoekers je website als prettig, dan heb je grote kans dat ze nog eens terugkomen. En dat is eigenlijk waar je het allemaal voor gedaan hebt!

Meer lezen?

Gebruikte tools

Auteur

Nicoline Wouterlood

is betrokken bij Struikelblok en werkzaam als Concept Designer bij Rhinofly.

Ze houdt zich primair bezig met concepting, usability en user experience in een veelheid van projecten. Daarnaast schrijft zij stukjes voor Frank-ly, een weblog met meningen en inzicht op het gebied van communicatie, webdevelopment, nieuwe media en grafische ontwikkelingen.

Rhinofly is een internetcommunicatie- bureau met alle expertise van Internet, communicatie en webapplicaties in eigen huis. Als leverancier van meerdere Internet vacaturebanken, corporate websites en diverse imago campagnes staan zij duidelijk in de markt voor internetcommunicatie.

Publicatiedatum: 22 september 2004

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs