IN DEZE HANDLEIDING:
60-30-10 kleurenpalet voor webdesign en WordPress website
Beslissen hoe kleur effectief te gebruiken in ontwerp en websites kan een ontmoedigende klus zijn. Bij het toepassen van een kleurenschema voor zowat elk ontwerpproject, helpt het om te beginnen met het toepassen van een beproefd ontwerpprincipe: de 60-30-10 regel.
Meer over kleuren en kleurenschema’s
Ik ben eigenlijk al vanaf mijn kunstacademie-opleiding gefascineerd door kleuren en kleurgebruik. Ik heb een eigen kleurensysteem opgezet. Al met al heb ik hier honderden uren inzitten.
Veel lezers maken hier gebruik van voor hun WordPress websites. Meer informatie over deze kleuren? Kijk dan op:
GoldenRatioColors.com
Hoe werkt het 60-30-10 kleurenschema?
De basis van de 60-30-10 regel is het kiezen van 3 kleuren
- een primaire kleur die 60% van het gebied domineert
- een secundaire kleur om ongeveer 30% van het visuele veld te compromitteren
- en een accentkleur die zorgt voor een 10% kleur.
Om het gebruik van deze 60-30-10 regel te visualiseren, denk aan een man in een zakelijk pak:
60% is de broek en het jasje, 30% is het overhemd, en 10% is de stropdas.
Visuele ordening met 60-30-10 kleurenschema
De 60-30-10 regel helpt om kleuren visueel te ordenen, zodat uw ontwerp, of het nu drukwerk of internet is, niet onoverzichtelijk en verwarrend wordt door te veel kleurgebruik. Begin met een 3-kleuren schema dat vaak gebruikt wordt voor uw merk. Als u een “handtekening kleur” hebt, bv Coca-Cola rood of Facebook blauw, gebruik je het als een van de drie kleuren. Bepaal vervolgens het gebruikspercentage (primair, secundair en accent) voor elk van de drie kleuren.
Bij het kiezen van de drie verschillende tinten, vergeet niet dat de accentkleur (10%) het meest levendig moet zijn, omdat het de nadruk zal leggen op kritische website-items zoals call-to-action elementen. De hoofdkleur (60%) moet een neutrale kleur zijn die gemakkelijk is voor de ogen, en de secundaire kleur (30%) moet mooi contrasteren met de hoofdkleur om visueel belang te creëren.
Het verdelen van complementaire kleuren met deze verhoudingen in gedachten zal helpen om uw ontwerp visueel te organiseren en in balans te brengen.
Kleuren inspiratie
Moeder natuur is de beste ontwerper waar je inspiratie uit kunt halen. Om mijn palet te vinden, blader ik meestal door Unsplash en haal ik drie hoofdkleuren uit een foto die voldoen aan de 60-30-10 regel. Ik zorg ervoor dat ik de meest levendige kleur neem en gebruik die als accentkleur in mijn ontwerp. Dit maakt de call-to-action elementen effectiever en het algehele ontwerp van de webpagina digitaler en moderner.
Tip kleurenpalet: Focus eerst op grijstinten
Zodra ik mijn kleurenpalet klaar heb, is het volgende wat ik doe het wireframe van mijn ontwerp. Ik probeer me eerst te concentreren op spatiëring en layout-elementen, omdat het hebben van dit soort beperkingen erg productief is en je later veel tijd zal besparen bij het toepassen van je kleurenschema.
Ook al is er in dit stadium nog geen kleur in het wireframe, dat betekent niet dat het er saai uit hoeft te zien! Ik gebruik graag verschillende grijstinten om het eerste wireframe visueel aantrekkelijker te maken. Daarna pas ik het kleurenpalet toe en itereer ik mijn lay-out voordat ik visuele elementen toevoeg die functioneel en aantrekkelijk zijn.
60-30-10 Tips op een rijtje
- Eerst grijstinten. U kunt veel tijd verliezen door kleuren te vroeg toe te passen. Concentreer je op spatiëring en opmaak van elementen voordat je met kleur aan de slag gaat.
- Contrasteer de tekst. Maak het leesbaar door te contrasteren met de achtergrond
- Gebruik geen puur grijs of zwart. Het is natuurlijker om wat verzadiging toe te voegen. We zien zelden zuiver grijze kleuren in het echte leven
- Gebruik kleurengeneratoren. Zij zullen uw zoektocht naar een evenwichtig kleurenpalet vereenvoudigen. We hebben de populairste hieronder voor je op een rijtje gezet
Meer kleuren toevoegen aan kleurenpalet
Als u een vierde of vijfde kleur moet toevoegen, splitst u de primaire of secundaire kleuren en voegt u een lichtere of donkerdere tint van die kleur aan de mix toe. Denk eraan dat u de splitsing van de kleur binnen het aangegeven percentage houdt. Als u bijvoorbeeld uw primaire kleur splitst om een lichtere tint toe te voegen, zou de 60% veranderen in iets als 40% oorspronkelijke kleur plus 20% lichtere tint. Splits uw accentkleur niet, want dit zal de kracht die deze kleur moet overbrengen, afzwakken.
Toepassing kleurenpalet op webdesign en website
Dus, hoe pas je de 60-30-10 regel toe op je lay-outs?
- Gebruik je primaire kleur (60%) voor achtergronden, kleurblokken en grote tekstvlakken.
- Gebruik uw secundaire kleur (30%) voor koppen, zijbalken, markering of tekstcall-outs.
- Gebruik vervolgens uw accentkleur (10%), meestal uw meest gedurfde kleur, om de lezer aan te zetten tot een bepaalde actie. Gebruik deze kleur voor gebieden waar u de aandacht op wilt vestigen, zoals call-to-action gebieden (cta button), knoppen en links.
Welke kleuren u ook kiest, vergeet de leesbaarheid niet. Als algemene richtlijn geldt: gebruik een lichtgekleurde achtergrond. Zet donkere kleuren op de voorgrond. Vermijd harde, ongebruikelijke tekstkleuren.
