Qu'est-ce que la règle 60-30-10 en matière de design ?

Le 12/06/2024

La couleur joue un rôle essentiel dans le design, capable d'évoquer des émotions, de définir l'ambiance et d'orienter l'attention des utilisateurs.

Qu'il s'agisse de décoration intérieure, de graphisme ou de conception d'interfaces utilisateur (UI), l'équilibre visuel est crucial pour attirer l'attention et communiquer efficacement.

La règle 60-30-10 est une méthode bien connue qui aide les designers à trouver cet équilibre visuel. Mais en quoi consiste exactement cette règle et comment peut-elle transformer un projet de design ?

Cet article vous présente en détail cette formule simple mais puissante, en explorant ses applications concrètes et en soulignant son importance dans la création de compositions harmonieuses et attrayantes.

Qu'est-ce que la règle des 60-30-10 ?

La règle 60-30-10 est un principe de conception de couleurs couramment utilisé dans le design d'intérieur, mais il peut également être appliqué efficacement dans la conception d'interfaces utilisateur (UI). Cette règle vise à créer un équilibre visuel harmonieux et attrayant en répartissant les couleurs selon un ratio spécifique.

Cette règle stipule qu'une palette de couleurs doit être composée de trois couleurs dans les proportions suivantes :

60 % de la couleur dominante
30 % de la couleur secondaire
10 % de la couleur d'accentuation

Pourquoi utiliser ce principe ?

Respecter ces proportions permet de créer une harmonie visuelle agréable, tout en établissant une hiérarchie claire entre les différents éléments de l'interface.

Mise en avant des éléments clés

La règle du 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'accentuation à 10% met en évidence des caractéristiques spécifiques ou des parties 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 du 60-30-10 garantit qu'il y ait une sensation d'équilibre et d'harmonie en attribuant des pourcentages à chaque couleur.

Simplicité et cohérence

Avoir trois couleurs établies simplifie le processus de conception. Cela réduit vos choix et évite les combinaisons de couleurs écrasantes.

Comment appliquer cette règle à vos conceptions UI ?

Couleur dominante (60%)

La couleur dominante représente la majeure partie de l'interface. Elle doit couvrir environ 60% de la surface. Cette couleur dominante doit refléter l'identité de la marque et créer une ambiance cohérente.

Application : Utilisez cette couleur pour les éléments de fond principaux comme les arrière-plans des pages, les sections principales, ou de larges zones de contenu.
Exemple : Si vous concevez une application mobile, la couleur dominante peut être la couleur de fond de l'écran principal.

Couleur secondaire (30%)

La couleur secondaire complète la couleur dominante et devrait occuper environ 30% de l'interface. Cette couleur secondaire doit attirer l'attention sans trop détoner avec la couleur principale.

Application : Cette couleur peut être utilisée pour les éléments moins proéminents comme les barres de navigation, les sections de contenu secondaires, ou les fonds de cartes.
Exemple : Dans une interface web, la couleur secondaire peut être utilisée pour les barres latérales, les boutons principaux, ou les en-têtes de section.

Couleur d'accentuation (10%)

La couleur d’accent est utilisée pour attirer l'attention et doit être appliquée de manière parcimonieuse, environ 10% de l'interface. Cette couleur d'accentuation crée des points d'intérêt visuels et guide l'utilisateur.

Application : Utilisez cette couleur pour les éléments qui nécessitent une attention particulière comme les boutons d'appel à l'action (CTA), les liens, les icônes interactives, ou les notifications.
Exemple : Si vous avez un bouton "S'inscrire" ou "Acheter maintenant", utilisez la couleur d'accent pour le faire ressortir.

Conseils supplémentaires

Maintenant que vous savez comment appliquer la règle des 60-30-10 à la conception de votre interface utilisateur, examinons quelques conseils pour vous aider à l'utiliser efficacement :

Expérimentez différentes combinaisons de couleurs

La règle des 60-30-10 est une ligne directrice, pas une règle stricte. N'hésitez pas à expérimenter différentes combinaisons de couleurs et à ajuster les proportions en fonction de vos objectifs de conception.

Utilisez des nuances et des teintes

Pour ajouter de la profondeur et de la complexité à votre palette de couleurs, utilisez des nuances et des teintes de vos couleurs dominantes et secondaires. Vous obtiendrez ainsi un design cohérent et harmonieux.

Utilisez des palettes de couleurs

Utilisez des outils en ligne tels que Coolors ou Adobe Color pour créer des palettes de couleurs basées sur la règle 60-30-10. Cela vous fera gagner du temps et vous aidera à choisir des couleurs qui vont bien ensemble.

Testez votre design

Une fois que vous avez choisi vos couleurs, testez votre design sur différents appareils et dans différentes conditions d'éclairage. Vous vous assurerez ainsi que votre design est lisible et accessible à tous les utilisateurs.