Slim kleuren kiezen voor je website in 4 stappen
Websites maken en een gevoel voor stijl, kleuren en design. Het gaat hand-in-hand. Toch hoef je geen gevoel voor het web ontwerp te hebben om een website te maken. Hier ligt meteen het grote risico. Kleuren kiezen voor een website is lastig.
Webdesign zorgt voor een eerste indruk bij je bezoekers. Dat is in veel gevallen de beslissing of ze blijven en of ze jouw website serieus (gaan) nemen).
De essentials van een goed webdesign zijn uitgewerkt door Joost onze complete webdesign gids.
Toch verdient kleurgebruik en kleurkeuze een extra verdiepingsslag. Het is namelijk enorm belangrijk voor je website.
De eerste indruk van een website is voor 90% gebaseerd op kleurgebruik. In dit artikel laat ik je zien welke kleuren emoties oproepen en hoe je hier slim mee om kan gaan in je website.
Laten we beginnen.
Kleuren kiezen: waarom is het belangrijk?
Er zijn duizend-en-een kleuren en tinten bij elkaar te brengen. Wanneer je jouw website wil gaan maken, dan wil je een aantal kleuren uitzoeken.
Je maakt dan met jezelf de afspraak deze kleuren op bepaalde plekken te gebruiken.
Heb je al een bestaand merk? Dan is het een logische stap om het kleurenpallet van je merk door te voeren op je website. Dit klinkt als een open deur. Laat me echter het belang ervan uitleggen.
Je website is jouw bedrijf maar dan online. Zorg je ervoor dat men jouw website als uniek beschouwd, dan is de kans dat ze terugkomen om in te gaan op jouw “call to action” groter.
Consistent kleurgebruik zorgt voor een stijging van de herkenbaarheid van je merk van wel 80%.
Wanneer je jouw logo laat ontwerpen of bezig gaat met de huisstijl van jouw bedrijf is het niet gek om een “brandsheet” te maken.
Hierin staan alle stijlafspraken die je met jouw bedrijf gebruikt. Dus ook de kleuren.
Een andere belangrijke reden om goed over je kleuren na te denken is het gevoel dat je wil dat de bezoekers krijgen van de gekozen kleuren.
Hieronder staat een overzicht:
Grijs – staat voor balans, kalm en neutraal
Groen – staat voor gezond, klimaatbewust en groei
Blauw – staat voor vertrouwen, stevigheid en kracht
Paars – staat voor creatief en uitdagend
Rood – staat voor enthousiast, jong en expressief
Oranje – staat voor vrolijk, opgewekt en vriendelijk
Geel – staat voor optimistisch, duidelijkheid en warmte.
Het kleurenwiel
Goed, het ene groen is het andere niet, mooi rood is niet lelijk en er zijn minstens 50 tinten grijs. Het kiezen van kleuren blijft lastig. Hoe kom je er nu achter wat je wil gebruiken op je website?
In de regel zal je drie kleurniveaus willen kiezen. Dat zijn:
1. primaire kleuren – voor de grote elementen in je site zoals achtergrond en menubalk
2. secundaire kleuren – voor logo’s en bijvoorbeeld links of achtergrondkleuren
3. tertiaire kleuren – voor accenten zoals een CTA-knop
De primaire kleuren zijn in termen van pixels het meest aanwezig, de tertiaire kleuren het minste.
Maar hoe kies je goede?
Het kleurenwiel kan je helpen bij het kiezen van kleuren. Het kleurenwiel is simpelweg een uitsplitsing van alle kleuren van de regenboog (prismatische kleuren).
Ik ga nu alle designers in de wereld tegen de schenen schoppen, maar voor een simpele eerste website is dit alles dat je moet weten:
Kleuren tegenover elkaar in het kleurenwiel gaan goed samen.
Donkerblauw en lichter oranje doen het goed samen en bijvoorbeeld rood en groen zijn ook goede kleuren om samen te overwegen.
Kleurgebruik op Start24
Met Start24 hebben we voor wit, lichtblauw en oranje gekozen. Wij vinden het belangrijk dat Start24 rustig, robuust en betrouwbaar overkomt. Dat zie je vooral terug in het gebruik van blauw en wit.
Daarnaast geven we met oranje knoppen belangrijke links aan. Wij zijn daar enthousiast over en we willen dat enthousiasme overdragen aan de bezoekers op deze manier.
Je ziet dat het oranje er direct uitspringt en zo ons helpt ons gevoel hierover over te dragen op jou als bezoeker over te dragen.
Er is een grote kans dat je de knop hier direct onder eerder gezien heb dan dat je deze tekst las.
In 4 stappen naar een goede set aan kleuren voor je website
Welke kleuren je kiest voor jouw website hangt helemaal van jouw doel af. Ik heb een stappenplan gemaakt om door te lopen.
Stap 1 – Schrijf op wat je wil uitstralen
Heb je al een brandsheet, brand book of brand identity?
Top. Dan is het makkelijk. Gebruik de kleuren en kleurcombinaties zoals daar aangegeven ook op je website.
Zorg voor consistentie tussen alle andere vormen van kleurgebruik in bijvoorbeeld folders, visitekaartjes of social media.
Heb je nog geen merk of bestaand brandsheet?
Schrijf jouw beoogde brand beleving uit. In de meeste gevallen kan je met de bovenstaande emoties die kleuren opwekken een heel eind komen.
Wil jij de website maken voor begrafenisondernemers die het anders doet en juist heel fris en vrolijk wil overkomen?
Doe maar niet.
Probeer in eerste instantie emoties te vatten die voor de hand liggend zijn bij jouw concept.
Het vinden van de juiste kleuren hierbij is al lastig genoeg. Vanuit daar kan je langzaam doorwerken naar een meer uitdagend en onderscheidend concept.
Stap 2 – Kies 3 kleuren uit
Kies drie kleuren uit die jouw primaire, secondaire en tertiaire kleur gaan worden. Doe dit op basis van jouw in stap 1 beschreven beleving.
Dit hoeft nog niet zo precies en je mag deze kleuren nu nog best lelijk vinden samen.
Kies dus nu gewoon “groen”, “wit” en “rood” bijvoorbeeld.
Stap 3 – Pluis de kleuren uit en zoek naar de juiste tinten
Nu wordt het spannend. Nu ga je namelijk jouw kleuren verder uitwerken die het precies JOUW project maken en niet dat van een ander.
Je gaat van de gekozen kleuren verschillende tinten in verschillende combinaties bij elkaar brengen.
Je kan nu in Word, Photoshop of Powerpoint gaan klooien. Net zolang totdat je het hebt.
Tegenwoordig zijn er echter meerdere websites die je hierbij kunnen helpen om kleuren goed met elkaar te vergelijken.
Bij bijvoorbeeld Coolors.co kan je alle kleuren invullen. Je kan direct de HEX-code, de naam en alle afgeleide tinten inzien.
Ook kan je snel jouw gekozen kleuren testen bij meer of minder licht. Ook kan je zien hoe de kleuren uitkomen voor mensen met kleurenblindheid.
Dit laatste lijkt wellicht belangrijk issue, maar 8% van de mannen en 0.5% van de vrouwen hebben een vorm van kleurenblindheid. Dat betekent dat er ongetwijfeld bezoekers op jouw site komen met kleurenblindheid.
Met bijvoorbeeld imagecolorpicker.com kan je gemakkelijk zien welke kleuren er precies passen bij jouw gekozen kleur.
De functionaliteiten van deze twee websites overlappen. Toch gebruik ik ze vaak naast elkaar. Dan heb ik binnen enkele minuten vaak al een combinatie die ik passend vind. Ze zijn beiden gratis trouwens.
Vervolgens maak ik een aantal kleurencombinaties. Noem het een shortlist om later uit te kiezen.
Stap 4 – Test de kleuren uit op je website en stel het kleurenschema bij
Je hebt je kleuren gekozen. Test deze even uit. Het toevoegen van je kleurenschema op je website in aanbouw is makkelijk. Je ziet dan al heel snel of tinten toch iets te licht of te donker zijn.
Optimalisatie
Nadat je jouw kleuren gekozen hebt en geïmplementeerd hebt, begint het werk pas.
Je kan nu twee dingen doen om alles te optimaliseren.
Kijk hoe bezoekers van je website reageren door bijvoorbeeld in Google Analytics op bouncerate te letten.
Je kan zo ook meten hoeveel er op knoppen geklikt wordt. Zijn deze percentages lager dan je verwacht? Dan ligt het misschien aan de kleurencombinatie.
Een andere optie is om het voor te leggen aan jouw doelgroep. Er zijn bedrijven gespecialiseerd in dit uitvragen. Dit kost vaak geld en zou ik bij kleine websites afraden.
Heb je echter budget, kan een usability test met daarin de gebruikerservaring rond de kleur meegenomen worden.
Trends en websitekleuren
Design trends veranderen doorlopend en wat tien jaar terug fris was, voelt nu als oubollig en achterhaald.
Moet je je hier zorgen om maken?
Nee. Je kan je website vaak gemakkelijk bijschaven en je kleuren net weer wat hipper maken zodat het fris blijft.
