Design visuel
Fiche mémo / 01La règle 60-30-10
La seule formule couleur dont vous avez besoin.
Pourquoi c'est important
Vous passez 2 heures à tester des palettes.Vous ajoutez une couleur, puis une autre, puis vous revenez en arrière. Résultat : un design qui ressemble à un sapin de Noël ou un truc tellement neutre qu'il n'existe pas. Le problème, c'est pas vos couleurs. C'est la répartition.
Le framework
- 60%
Dominante
Votre fond, votre base. C'est la couleur qui occupe le plus d'espace. Elle pose l'ambiance sans la saturer. C'est elle qui donne le ton général.
- 30%
Secondaire
Votre structure visuelle. Elle crée le contraste avec la dominante. Blocs, barres latérales, titres. Elle donne le "caractère" de votre design.
- 10%
Accent
Votre arme de précision. CTA, icônes, liens, badges. C'est la couleur qui dit "regarde ici". Si elle dépasse 10%, elle perd son pouvoir.
Dominante calme + Structure visible + Accent chirurgical = Palette pro
Cas concret
🔴 Avant
Comment l'appliquer
- 01
Web / App
Appliqué en design d'interface, ce framework structure vos décisions. Vous savez exactement quoi prioriser et dans quel ordre. Le résultat gagne en cohérence sans perdre en créativité.
Pour aller plus loin
Universal Principles of Design, Lidwell, Holden, Butler (Livre), 200 principes de design expliqués avec des exemples visuels. Un dictionnaire de référence pour comprendre pourquoi certaines compositions fonctionnent mieux que d'autres.
Checklist WCAG 2.1, Accessibilité visuelle (Guide), Le standard d'accessibilité qui garantit que vos choix visuels fonctionnent pour tout le monde. Un ratio de contraste, une taille minimum, des critères objectifs.
Parlons-en ?