Scroll

Het effect van kleur in je webdesign (update augustus 2020)

Het uiterlijk van een website is vaak bepalend voor het succes ervan. Vanaf het allereerste moment dat bezoekers je website zien, reageren zij onbewust op (verkeerd!) kleurgebruik. Bij webdesign wordt veel tijd gestoken in een intuïtieve layout en prachtige foto’s die hierbij aansluiten. Naast deze voor de hand liggende factoren is het bewust gebruik maken van kleuren ontzettend belangrijk. Een essentieel onderdeel dat vaak wordt onderschat.

Kleuren worden vaak gekozen op basis van persoonlijke voorkeur. Je kunt bepaalde emotionele reacties oproepen bij gebruikers door de juiste kleuren te gebruiken. Je wilt namelijk dat je bezoekers een prettig gevoel krijgen bij de look en feel van je website. In dit artikel vertel ik je meer over impact goed kleurgebruik en de psychologische voorkeuren.

Hoe kies je de juiste kleurencombinatie?

Bij het ontwerpen van een website dien je altijd een aantal basiskleuren vast te stellen. Het is belangrijk om bij het kiezen van deze kleuren rekening te houden met de psychologische kleurassociaties die aan kleuren verbonden zijn.

Voor het kiezen van de juiste kleuren is het belangrijk dat je de visie van je bedrijf of website goed geformuleerd hebt.

Aan de hand van een goed geformuleerde visie kun je de bijbehorende kleuren kiezen. De visie is namelijk hetgeen waar je bedrijf voor staat en door je kleuren hierop aan te sluiten wordt deze visie onbewust versterkt.

Een voorbeeld uit de praktijk:
Het tuincentrum Groenrijk, zij hebben er zelfs voor gekozen om de kleurkeuze in de bedrijfsnaam naar voren te laten komen. Groen wordt vaak gezien als de kleur van natuur, verfrissing, gezondheid en evenwicht. Groen is een kleur die vaak op de website terugkomt. In dit geval legt groen vooral de associatie met natuur. Als accentkleur heeft Groenrijk voor de kleur oranje gekozen wat in dit geval geassocieerd kan worden met warmte en energie. De combinatie met wit op de website zorgt bovendien voor een frisse en overzichtelijke uitstraling.

logo groenrijk

Bij het kiezen van de juiste kleuren is het dus belangrijk dat je weet welke psychologische betekenis een bepaald kleur heeft. In de alinea hieronder wordt dit uitgebreid toegelicht.

Kleuren combineren op je website

Kleur is zo’n fundamenteel onderdeel van de manier waarop we de wereld waarnemen dat we het vaak als vanzelfsprekend beschouwen. Denk er eens over na: even zonnen geeft je een gezonder uiterlijk. Of de kaki kleding van ouderen die er vaak somer uitziet. Kleuren hebben de kracht om onze perceptie van anderen en zelfs de omstandigheden waarin we ons bevinden te vormen.

Daarom is kleur een van de krachtigste tools in het arsenaal van een ontwerper. Het kan een ontwerp maken of breken; het kan de bepalende factor zijn om kijkers aan te spreken of ze snel op weg te sturen.

Kleurencombinaties voor je website

Een beetje inspiratie kan nooit kwaad daarom hieronder een aantal prachtige kleurencombinaties van website welke erkend zijn door Awwwards (prestigieuze onderscheiding voor webdesigners en ontwikkelaars.)

Kleurenpalet website

Tenzij je een doorgewinterde ontwerper bent, kost het tijd en moeite om een ​​kleurencombinatie voor je te bepalen die past binnen de stijl van je merk. Het is daarom makkelijk om te kijken naar complementaire kleuren op je website om zo tot de kleurencombinaties te komen die je website onderscheidend maakt ten opzichte van de rest. Heb je geen idee waar je moet beginnen, check dan deze kleurengenerator.

Hulp nodig bij het ontwerpen van je website?

Stuur een mail naar Peter

Peter Leenen

Projectmanager & online marketeer

Psychologische kleurassociaties

Verschillende kleuren hebben verschillende betekenissen. Niet iedere kleur staat in iedere cultuur voor hetzelfde, zo wordt zwart in westerse landen gezien als een rouwkleur terwijl dit in oosterse landen wit is. Aan de hand van de volgende kleuren leggen we graag uit welke associatie men er mee heeft.

Rood: liefde, passie, actie, agressie, kracht, gevaar en voedsel. Voedsel? Jazeker! Toevallig dat de grote jongens van de fastfoodketen rode logo’s hebben? (ja we weten dat McDonalds inmiddels over is gestapt op de steunkleur groen, maar je snapt ons standpunt).

kleurassociatie rood

Uit onderzoek is namelijk gebleken dat de kleur rood honger opwekt.

Funfact

Geel: de kleur van de zon is een vrolijke opvallende kleur, die het brein, denkproces en zenuwstelsel stimuleert. Geel wordt geassocieerd met energie, zon, lente, zomer, een nieuw begin, levensplezier en geluk.

kleurassociatie geel

Oranje: de mengkleur tussen rood en geel. Oranje is een aandachttrekkende kleur die warmte en enthousiasme uitstraalt. De warme kleur staat voor vrolijkheid, optimisme, plezier, kracht, energie, aandacht, beweging, creativiteit  en natuurlijk de kleur van onze oranje leeuwen. Oranje zorgt voor een stimulerende werking, ideaal om verkoop te bevorderen en is veelzijdig te gebruiken door diverse tinten oranje en schaduwen toe te passen.

kleurassociatie oranje

Blauw: wordt gezien als zakelijk, analytisch en loyaal. Voornamelijk bedrijven die betrouwbaar gevonden willen worden maken gebruik van de kleur blauw. Het is dan ook niet raar dat de overheid gebruik maakt van de kleur blauw. Kosten van dit in 2008 in gebruik genomen logo zijn trouwens een kleine 15 miljoen eurotjes.

kleurassociatie blauw

Groen: de lievelingskleur van milieuactivisten en boomknuffelaars. De kleur groen roept bij mensen een vernieuwend, verzorgend en natuurlijk gevoel op. Bedrijven die zich bezighouden met duurzaamheid maken steeds vaker gebruik van deze kleur om in te springen op de natuurlijk associatie die mensen hierbij hebben.

kleurassociatie groen

Roze: zoet, onschuldig, jeugdig en vrolijk. Roze wordt vaak geassocieerd met de vrouwelijke kant van onze natuur en geeft een onschuldige en speelse uitstraling.

kleurassociatie roze

Bruin: natuur, aards, duurzaam en kracht. Bruin is een natuurlijke kleur en wordt geassocieerd met betrouwbaarheid en is een veelgebruikte achtergrondkleur van websites. Door gebruik te maken van verschillende tinten bruin is dit een kleur die veelzijdig te gebruiken is.

kleurassociatie bruin

Zwart: hoewel zwart eigenlijk geen kleur is en het moet eerder gezien worden als het ontbreken van licht wordt zwart geassocieerd met duisternis, autoriteit en ernst. Zwart overheerst al het andere, ben daarom voorzichtig in het gebruik hiervan. Gebruik zwart om een gedurfd statement te maken of door het toe te passen als een accentkleur.

Wit: schoon, puur, rust en simpel. Een veilige kleur die perfect als basis gebruik kan worden voor ieder design.

Grijs: neutraal, saai en veilig. Door deze associaties is grijs een kleur die niet al te vaak als hoofdkleur gebruikt wordt in webdesign, maar vaak als ondersteunende kleur op ‘veilige’ plaatsen.

Zoals je ziet zeggen kleuren die gebruikt worden in logo’s en webdesign veel over wat een organisatie uitdraagt. Het is dus erg belangrijk hier goed over na te denken.

Passende Kleurencombinaties kiezen

Oke, je hebt nu je basiskleur gekozen die aansluit bij de visie van je bedrijf maar je weet niet met welke kleuren je deze kunt combineren. Met behulp van een kleurenwiel kunnen er verschillende kleurschema’s worden gebruikt om tot de juiste combinatie van kleuren te komen. De vier belangrijkste die je kunt onderscheiden zijn:

  • Analoge kleuren: in dit geval worden er twee of drie kleuren gebruikt die naast elkaar in het kleurenwiel staan. In dit geval is er meestal één kleur die overheerst.
  • Complementaire kleuren: twee kleuren die tegenover elkaar staan in het kleurenwiel. 
  • Triadische kleuren: drie kleuren die gelijk verspreid over het kleurenwiel zitten.
  • Tetradische kleuren: vier kleuren die in een vorm van een rechthoek of vierkant tegenover elkaar staan.

Adobe heeft hier een handige tool voor ontwikkeld namelijk Adobe Color, hier kun je de door jou gekozen basiskleur instellen en vervolgens verschillende kleurenschema’s uitproberen om te kijken welke kleurcombinatie hieruit voortkomen.

Hopelijk heeft dit artikel je een beetje geholpen bij het maken van de juiste kleurencombinatie voor jouw huisstijl of website.

Hulp nodig bij het ontwerpen van je website?

Stuur een mail naar Peter

Peter Leenen

Projectmanager & online marketeer