Kleurgebruik op jouw website

Geplaatst door Sumitra Otter • 17 mei 2016

Kleur speelt een grote rol bij het succes van websites. Lay-out bepaalt in grote mate of een bezoeker blijft of gelijk weer vertrekt. Ook heeft het een grote impact op de gebruiksvriendelijkheid; het accentueert en roept gevoel en emotie op. Onverstandig gebruik vermindert juist de gebruiksvriendelijkheid. Het leidt de bezoeker af, maakt de website chaotisch en bezoekers kunnen belangrijke informatie niet meer vinden.

Kleur wordt zowel een decoratief als een communicatief element genoemd. De kleur van een website moet passen bij het bedrijf, maar ook geschikt zijn voor gebruik op een website. In dit artikel gaan we het hebben over het communicatieve element; hoe zet je kleur effectief in op jouw website?

Het kleurenwiel

Bij het kiezen van kleuren wordt vaak gebruik gemaakt van het kleurenwiel. Hierin zijn de basiskleuren verwerkt, maar ook alle tinten die tussen deze basiskleuren in liggen. Het kleurenwiel kan op verschillende manieren ingezet worden.

 

 

Contrasterende kleuren

Wanneer je een website wilt laten opvallen, kies je kleuren die met elkaar contrasteren. In het kleurenwiel liggen deze kleuren tegenover elkaar. Kies bijvoorbeeld paars en geel of blauw en oranje. Het contrast zorgt ervoor dat de website opvalt. Maar let op; de kleuren kunnen ook als erg onrustig en vermoeiend aan de ogen worden ervaren.

Analoge kleuren

Kleuren die meer met elkaar overeenstemmen worden analoge kleuren genoemd. Kies één basiskleur, en gebruik daarbij de kleuren die hiernaast in het kleurenwiel liggen. Denk bijvoorbeeld aan groen, geel en blauw. Omdat deze kleuren dicht bij elkaar liggen zal het niet snel storend zijn voor de bezoeker.

Monochrome kleuren

Monochroom kleurgebruik is het gebruik van één kleur in verschillende lichtsterktes. Zo kan een website compleet blauw zijn, maar door de verschillende kleurtinten toch een speels effect hebben.

Goed kleurgebruik

De beste kleur voor een website bestaat niet. Het is, net als mode, afhankelijk van trends. Zorg er in ieder geval voor dat de kleuren goed bij elkaar passen en dat je niet meer dan 2 of 3 verschillende kleuren kiest. Wel zijn er een paar basisprincipes die je makkelijk kan toepassen.

Als je uit een raam kijkt zie je diepte. De dingen dicht bij je zijn lichter en ver weg zie je donkerder en waziger. Om diepte in je website te creëren en de blik van bezoekers te kunnen sturen, kan goed gebruik gemaakt worden van deze kennis. Houd koele en donkere kleuren op de achtergrond en gebruik warme, lichte kleuren voor elementen op de voorgrond. Dit maakt de website erg rustig en overzichtelijk voor de bezoeker, wat ten goede komt aan de conversie!

Wil je opvallende elementen in de website, maak dan niet te veel gebruik van één kleur. Oranje is bijvoorbeeld een opvallende kleur, maar als de hele website oranje is zal een oranje button er niet meer uit springen. Hierbij kan goed gebruik gemaakt worden van lichtverzadiging. Vaak worden er verschillende kleuren gebruikt om hiërarchie aan te geven, maar verschil in lichtsterkte is vele malen effectiever. Verschillende kleuren roepen geen gevoel van hiërarchie op, en belangrijker; kleurenblinde mensen zien het verschil tussen de kleuren niet. Door verschillende lichtsterkten toe te passen, zullen de donkere kleuren meer opvallen en automatisch als belangrijker gezien worden.

Test je website

Is de keuze voor de kleur gemaakt, en wil je testen of het de juiste keuze was? Dat kan! Allereerst kun je zelf je beeldscherm instellen op grijstinten. Deze tip helpt je om te bekijken of je genoeg contrasten hebt gemaakt in lichtsterktes, en of slechtzienden je website ook goed zullen begrijpen. Daarnaast kun je de bezoekers zelf betrekken in de tekst door middel van usability testing. Begin bijvoorbeeld een A/B- test om te kijken welke kleuren beter werken, of vraag je bezoekers direct wat zij van de lay-out vinden.

Heb je hulp nodig bij het bouwen van een website, wil je een kleurenadvies of wil je een usability test opzetten? Wij helpen je graag! Neem gerust contact op.