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.
En savoir plus sur Maquettes graphiquesCharte graphique
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.
À quoi sert une charte graphique / charte graphique web ?
- 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 / charte graphique web ?
- 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
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.
En pratique
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.
Questions fréquentes
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.
Majoritairement, il s’agira d’un designer ou d’un directeur artistique en agence de communication ou de design.
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.
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.
Quelques exemples de réalisations
La Coupe d’Or pivote vers la jeunesse, son logo aussi
Voir l'étude de cas : La Coupe d’Or pivote vers la jeunesse, son logo aussiVous 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.