Vallen de belangrijkste elementen op jouw website of app genoeg op? Visuele hiërarchie helpt gebruikers snel te vinden wat ze zoeken. In deze blog ontdek je hoe de 60-30-10 regel je hierbij helpt.
Wat is de 60-30-10 regel?
De 60-30-10 regel is een ontwerprichtlijn waarbij 60% van een website of app bestaat uit de hoofdkleur, 30% uit een secundaire kleur en 10% uit een accentkleur. Deze verdeling zorgt voor een rustige en overzichtelijke uitstraling. Hierdoor zien gebruikers sneller wat belangrijk is en kunnen zij gemakkelijker door de website of app navigeren. Denk bijvoorbeeld aan een contactknop. Als deze is vormgegeven in een accentkleur, valt hij direct op en dat is ideaal voor gebruikers die snel contact willen opnemen.
Waar komt de 60-30-10 regel oorspronkelijk vandaan?
De 60-30-10 regel komt oorspronkelijk uit de wereld van interieurontwerp. Ontwerpers gebruiken deze verhouding om rust en harmonie in een ruimte te creëren. Mensen voelen zich prettiger in een omgeving waar het kleurgebruik in balans is.
Net zoals in een ruimte, wil je op een website of app geen chaos van kleuren, maar juist een prettige, duidelijke omgeving. Dit zorgt ervoor dat de gebruiker direct ziet waar zijn aandacht naartoe moet. De 60-30-10 regel helpt hierbij door het kleurgebruik te structureren.
Hoe wordt de 60-30-10 regel toegepast?
Het wordt toegepast door het kleurgebruik op een website of app te verdelen in drie verhoudingen:
1) 60% – Hoofdkleur
De hoofdkleur vormt de basis van je website of app. Deze kleur bepaalt de algemene sfeer en zorgt voor rust en stabiliteit.
Deze kleur wordt vaak gebruikt voor:
- Achtergronden
- Grote secties, zoals de header of hoofdnavigatie
2) 30% – Secundaire kleur
De secundaire kleur is de ondersteunende kleur die goed contrasteert met de hoofdkleur. Deze kleur zorgt voor visuele afwisseling en benadrukt belangrijke onderdelen, zonder af te leiden van de hoofdkleur.
Deze kleur gebruik je voor:
- Sectie achtergronden
- Tekst
3) 10% – Accentkleur
De accentkleur is bedoeld om de aandacht te trekken. Doordat je deze kleur weinig gebruikt, stimuleert het actie. Stel bijvoorbeeld dat het doel van je website is om mensen een donatie te laten doen. Dan is het belangrijk dat de call-to-action knop goed opvalt, zodat je gebruikers visueel helpt de juiste knop te vinden.
Je past deze kleur toe op:
- Call-to-action knoppen
- Links
- Iconen
Wat zijn voorbeelden?
Voorbeeld 1: coenhagedoorn.nl
Bij Coen Hagedoorn Bouwgroep zijn de verhoudingen binnen dit blok als volgt:
- 60% – Achtergrondkleur
- 30% – Tekst
- 10% – Linktekst
Dankzij de witte achtergrond straalt dit deel van de website rust en stabiliteit uit. De zwarte tekst zorgt voor contrast, terwijl de rode linktekst opvalt en de aandacht van de gebruiker trekt.
Voorbeeld 2: eurid.eu
Bij EURid zijn de verhoudingen binnen dit blok als volgt verdeeld:
- 60% – Achtergrondkleur
- 30% – Sectie achtergrond en tekst
- 10% – Knop
De lichtblauwe achtergrond straalt rust en stabiliteit uit. De witte sectie achtergrond biedt visuele afwisseling, terwijl de donkerblauwe tekst voor contrast zorgt. De gele knop valt op en trekt de aandacht van de gebruiker.
Wil jij ook dat jouw website of app visuele hiërarchie krijgt door middel van de 60-30-10 regel? Neem contact met ons op en laat ons je helpen bij het creëren van een gebruiksvriendelijke en visueel aantrekkelijke website of app!
