Charte graphique

Q: Quelle différence entre charte graphique et design system ?

La charte graphique a pour but de documenter les règles visuelles d'une marque. Le design system, lui, est plus complet : il inclut la charte graphique, mais également les composants de votre interface (boutons, formulaires, cartes…), les design tokens (variables CSS), les guidelines d'usage… Une charte graphique peut exister hors numérique, contrairement au design system, qui, lui, n'est spécifique qu'aux produits numériques.

Q: Qui produit une charte graphique ?

Majoritairement, il s’agira d’un designer ou d’un directeur artistique en agence de communication ou de design.

Q: Comment faire évoluer une charte graphique sans perdre la cohérence ?

Si votre charte graphique est déjà bien en place, il faudra alors identifier les éléments fondateurs qui ne doivent pas changer (ou que vous ne voulez pas changer) et les éléments secondaires qui, eux, peuvent évoluer. Les changements sont alors à appliquer progressivement tout en s’assurant que tout le monde dans vos équipes dispose de la version à jour.

Q: Une charte graphique est-elle suffisante pour garantir la cohérence visuelle d'un produit numérique ?

Non, elle ne sera pas suffisante à elle seule, surtout pour un produit numérique. Elle servira à fixer les règles de base mais elle ne couvre pas les composants, les états ou les règles de mise en page.

Livrable

La charte graphique, les règles visuelles d'une marque

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.

Découvrir notre offre direction artistique

À quoi sert une charte graphique ?

Garantir la cohérence et l'homogénéité sur l'ensemble des supports de communication (qu'ils soient imprimés ou digitaux)
Identifier simplement et rapidement la marque, le service ou l'entreprise
Renvoyer une image professionnelle et rassurante
Disposer d'un document de référence pour l'ensemble des collaborateurs
Développer sa stratégie de communication

Pourquoi faire une charte graphique ?

Permettre aux personnes qui produisent des contenus de créer de nouveaux supports de communication cohérents graphiquement
Unifier tous les composants de l'identité visuelle de la marque/entreprise
Définir la personnalité et l'image de la marque/entreprise de façon exhaustive
Produire des supports plus rapidement

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.

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.

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.

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.

Quelle différence entre charte graphique et design system ?

Qui produit une charte graphique ?

Comment faire évoluer une charte graphique sans perdre la cohérence ?

Une charte graphique est-elle suffisante pour garantir la cohérence visuelle d'un produit numérique ?

Les méthodes liées

Maquettes graphiques

Les maquettes graphiques donnent leur forme définitive aux futurs écrans, à transmettre aux équipes projet en vue de l'intégration.

Identité visuelle

Premier élément perçu par vos utilisateurs, l'identité visuelle illustre votre secteur d'activité et vous rend identifiable simplement.

Palette de couleurs

Palette de marque ou palette d'interface, les deux ne se confondent pas. Comment construire un système de couleurs cohérent, lisible et accessible.

Typographie

La typographie définit les polices, l'échelle des tailles, les graisses et les espacements d'une interface. Comment la choisir et garantir sa lisibilité.

Iconographie

L'iconographie d'une interface, c'est le style et la cohérence de ses icônes. Bien choisies, elles accélèrent la lecture, mal choisies elles créent le doute.

Moodboard

Le moodboard est une sorte de panorama d'éléments d’inspiration dont le but est d'aider le choix artistique pour la suite de la conception de votre projet.

Design system

Le design system, c'est une bibliothèque de composants et la gouvernance qui va avec. Ce qui le distingue d'un design kit, et quand il devient nécessaire.

Vous souhaitez en savoir plus sur nous ?

Tout 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.

Parlons-en