Article original : What is the 60-30-10 Rule in Design? And How to Use it in Your Projects
En tant que designers, la couleur est un élément énorme de notre travail. Mais beaucoup d'entre nous ont du mal à utiliser les couleurs dans nos designs.
Dans cet article, vous apprendrez la règle des couleurs 60-30-10, comment elle est utilisée, et verrez un exemple pratique de son application.
Qu'est-ce que la règle 60-30-10 ?
Dans le monde du design, la règle 60-30-10 est une règle qui aide à guider les designers dans le choix et l'association des couleurs pour leurs designs.
Pour faire simple, cette règle dit que la couleur dominante/primaire doit occuper 60 % de votre design, la couleur secondaire doit occuper 30 %, tandis qu'une couleur d'accent doit occuper 10 % de votre design.
Pourquoi cette règle est-elle si importante ?
- Mettre en avant les éléments clés : La règle 60-30-10 est excellente pour mettre en avant les éléments clés de votre design. La couleur dominante attire l'attention sur les grandes surfaces et établit l'ambiance générale du design. La couleur secondaire la soutient, tandis que la couleur d'accent à 10 % met en évidence des caractéristiques ou des parties spécifiques du design.
- Équilibre visuel : Pour atteindre un équilibre visuel dans un design, une couleur/élément ne doit pas dominer les autres. La règle 60-30-10 garantit un sentiment d'équilibre et de balance, en attribuant des pourcentages à chaque couleur.
- Simplicité et cohérence : Avoir 3 couleurs établies simplifie le processus de design. Cela réduit vos choix et évite des combinaisons de couleurs écrasantes.
Comment choisir les couleurs pour vos designs
La règle 60-30-10 a trois composantes :
- La couleur primaire : Il s'agit de la couleur dominante du design. Elle forme la base de la palette de couleurs et couvre la majorité du design (60 %). La couleur primaire est généralement une couleur neutre et est souvent utilisée comme fond du design. Des couleurs comme le blanc, le bleu, le beige, et ainsi de suite peuvent être utilisées comme couleurs primaires.
- La couleur secondaire : Cette couleur soutient la couleur dominante et ajoute plus d'intérêt visuel au design. Elle couvre environ 30 % du design. La couleur secondaire peut être utilisée pour la typographie, les icônes, et les sous-titres dans un design. Des couleurs comme le bleu-vert, le noir, le bleu foncé, et autres peuvent être utilisées comme couleurs secondaires.
- La couleur d'accent : Cette couleur couvre généralement environ 10 % du design. Elle aide à mettre en évidence des sections spécifiques du design comme les boutons, les éléments d'appel à l'action, ou tout élément qui a besoin d'être mis en avant dans un design. Les couleurs d'accent sont généralement des couleurs qui ont un fort contraste. Des couleurs comme le jaune, l'orange, le vert clair, et autres font de bonnes couleurs d'accent.
Illustration de la règle 60-30-10
Il est important de choisir des couleurs qui se complètent pour vos designs. Cela contribuera à l'esthétique générale et créera une expérience visuelle dynamique et engageante.
Si vous êtes inquiet quant aux couleurs à utiliser lors de la conception, vous pouvez toujours consulter des générateurs de palettes de couleurs gratuits. Certains générateurs de palettes de couleurs que vous pouvez essayer incluent :
Exemple de page héro utilisant la règle 60-30-10
J'ai conçu une page héro pour illustrer comment fonctionne la règle.
Étape 1 - Choix d'un cadre
J'ai dû choisir quel cadre de bureau je voulais utiliser pour la page héro. J'ai choisi Macbook Air.
Cadre de bureau Macbook Air
Étape 2 - Ajout d'une grille
Ensuite, j'ai ajouté une grille au cadre. J'ai utilisé ces spécifications : Colonnes-12, Marges-100.
Ajout de la grille
Étape 3 - Ajout de contenu
Ensuite, j'ai ajouté le logo et la barre de navigation.
Ajout du logo et de la barre de navigation
Je savais déjà comment je voulais que la structure de ma page héro ressemble, donc j'ai simplement ajouté le reste de mon contenu de design.
Ma page héro terminée illustrant la règle 60-30-10.
Pour le design ci-dessus :
- Ma couleur primaire est le blanc. Elle couvre le fond du design. Elle améliore la lisibilité et la clarté des autres éléments du design. De plus, j'ai choisi le blanc parce que c'est une couleur neutre, comme je l'ai mentionné précédemment.
- Ma couleur secondaire est un noir saturé. Elle soutient la couleur primaire et est utilisée pour le texte et la typographie.
- Ma couleur d'accent est une nuance de marron. Elle ajoute une touche de dynamisme et fournit un contraste dans le design.
Conclusion
La règle 60-30-10 est utilisée dans différents secteurs du design en raison de son utilité pour les designers. De plus, ce n'est pas une exigence stricte et peut être ajustée pour répondre aux préférences individuelles et aux objectifs de design.
En suivant la règle 60-30-10, vous pouvez obtenir une palette de couleurs bien équilibrée qui garantit un intérêt visuel et une cohérence dans votre design. En résumé, choisissez simplement :
- Votre couleur primaire – une couleur neutre,
- Votre couleur secondaire – une couleur qui soutient la couleur primaire, et
- Votre couleur d'accent – une couleur qui attire l'attention !
Quelles que soient les couleurs que vous décidez d'utiliser pour votre design, elles dépendent des objectifs de design et de l'esthétique globale que vous souhaitez atteindre. N'oubliez pas que la maîtrise des couleurs vient avec une pratique adéquate. Alors assurez-vous de pratiquer davantage et vous verrez une grande amélioration dans votre utilisation des couleurs.