La charte graphique est le document qui établit les éléments et les règles permettant de construire l'univers de votre marque. On y trouve : la gamme chromatique, la typographie, les pictogrammes, les logos et l'explication de leur usage. Ce guide des “bonnes pratiques” permet de centraliser tous les éléments qui permettent de représenter une marque, leur organisation et leurs règles d'utilisation. Disposer d’une charte graphique et surtout la diffuser auprès des membres internes ou externes de l'entreprise permet de garder une cohérence et une homogénéité globale. C’est un gain de temps non négligeable lorsqu'il s'agit de créer de nouveaux supports et contenus. La charte graphique n'est pas seulement un guide à suivre, elle présente aussi les usages à éviter. Par exemple, si elle proscrit l’utilisation de votre logo sur un fond rouge, alors les utilisateurs (designers, membres de la partie communication, etc.) devront respecter cette règle.
01
Charte graphique et palette de couleurs
Attention à ne pas définir trop de couleurs dans votre palette, au risque de tomber sur un arc-en-ciel qui ne permettra pas aux utilisateurs/consommateurs de vous identifier rapidement. En général, nous recommandons d'avoir entre deux ou quatre couleurs. Une principale (ex: boutons d'actions), une secondaire (boutons secondaires) et deux autres qui peuvent servir pour des pictogrammes ou en retouches colorimétriques des photos. Dans votre charte graphique, pensez à noter les codes couleurs en RVB (utilisation web) ainsi qu'en CMJN (utilisation print) afin que vos intervenants puissent avoir les couleurs exactes. Il est également important de noter quelle est l'utilisation de chaque couleur, en décrivant les combinaisons autorisées ou non. Exemple : Le bleu, couleur primaire, est à utiliser sur le logo et les boutons principaux.
02
Les typographies
Les polices de caractères sont à choisir en fonction du support de communication utilisé. Sur un support web, il est primordial d'utiliser des polices simples et lisibles : des typographies sans serif. Sur un support print, où la lecture est plus simple, il est possible d'utiliser des typographies plus atypiques et avec des serifs. Pour une bonne lisibilité et cohérence graphique, nous recommandons l'utilisation de 2 familles de typographies, maximum (une pour les titres, une pour le texte). La charte graphique doit être très claire sur l'utilisation de ses familles de polices de caractères : pour quel support, pour quel type de contenu (paragraphes de textes, titrages, bouton, labels, etc). Pour être uniforme sur l'ensemble des supports, il est également important de noter sur votre charte quels sont les espaces, l'interlignage, l'alignement à respecter.
03
Les éléments graphiques
Veillez également à regrouper vos icônes, pictogrammes et illustrations dans votre charte. Il est important de donner un maximum de détails, comme la taille qui doit être utilisée sur les pictogrammes, où les positionner, avec quelle couleur, etc.
04
Les images dans une charte graphique
Tout comme les éléments graphiques, les dimensions et proportions à respecter des images doivent être décrites dans la charte graphique. Pour garder une cohérence dans votre image de marque, il faut également stipuler quel style d'image est attendu et quelles retouches colorimétriques sont préconisées. Exemple : les images doivent comporter des humains, éviter des éléments de type robots/électroniques et doivent être en noir et blanc.
Il est tout à fait possible de rajouter d’autres éléments à votre charte graphique (quels types de vidéos, l’utilisation des animations, type de visuels pour les réseaux sociaux; etc). Les éléments listés plus haut restent cependant une base solide à mettre correctement en place avant d’aller plus loin. À garder en tête que la charte graphique va évoluer et prendra de plus en plus d’ampleur au fur et à mesure des besoins internes. Il est important de la mettre régulièrement à jour, à chaque fois qu’un nouveau besoin ou support est créé. Enfin, sa diffusion et son accès simple par toute personne qui génère du contenu à votre image est la clé de la réussite.
Une charte graphique est le document de référence qui formalise les règles visuelles d'une marque ou d'un produit : palette de couleurs (codes hexadécimaux, CMJN, Pantone), typographies retenues (familles, graisses, tailles), règles d'usage du logo (tailles minimales, zones de protection, versions autorisées), et conventions iconographiques et photographiques. Elle garantit la cohérence visuelle de toutes les productions d'une organisation.
La charte graphique documente les règles visuelles d'une marque. Le design system est plus complet : il inclut la charte graphique, mais y ajoute les composants d'interface (boutons, formulaires, cartes), les design tokens (variables CSS), les patterns d'interaction et les guidelines d'usage pour les équipes digitales. Une charte graphique peut exister indépendamment du numérique (pour les supports imprimés) ; un design system est spécifique aux produits numériques.
Généralement un graphiste ou un directeur artistique, souvent en agence de communication ou de design. Pour les grandes organisations, elle est produite par des équipes brand design internes. La charte est construite après la définition de la stratégie de marque (positionnement, valeurs, cibles) dont elle est la traduction visuelle. Elle peut aussi être produite en collaboration avec des équipes produit quand elle est conçue d'emblée pour des usages numériques.
On documente précisément l'état actuel avant toute modification. On identifie les éléments fondateurs (logo, couleur principale) qui ne doivent pas changer, et les éléments secondaires qui peuvent évoluer. On applique les changements progressivement, en s'assurant que toutes les équipes et tous les prestataires disposent de la version à jour. Pour les produits numériques, les design tokens permettent de propager un changement de couleur ou de typographie dans toute l'interface sans modifier chaque composant individuellement.
Non, pas à elle seule. Une charte graphique fixe les règles de base, mais ne couvre pas les composants d'interface, les états interactifs, les patterns de navigation ou les règles de mise en page. Pour un produit numérique, la charte graphique est le point de départ d'un design system : elle fournit les fondations visuelles (couleurs, typographie, iconographie) que le design system construit en composants et en tokens utilisables par les équipes de production.
Conception des futurs écrans en ajoutant la dimension graphique de manière à produire la représentation finale de l'interface à transmettre aux équipes projet en vu de leur intégration
En savoir plus sur Maquettes graphiquesLe sprint UI consiste à décliner les wireframes en maquettes graphiques en cycle court et itératif, en général sur une semaine
En savoir plus sur Sprint UITout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.
