Qu'est-ce qu'une charte graphique ? Définition et exemples

La charte graphique est le document qui rassemble les règles visuelles d'une marque : son logo, ses couleurs, ses typographies et la façon de les utiliser. Elle fait qu'un site, une application, une carte de visite et un post sur les réseaux sociaux se reconnaissent au premier coup d'œil, quelle que soit la personne qui les a faits.

On la confond souvent avec l'identité visuelle. L'identité visuelle, ce sont les éléments eux-mêmes ; la charte graphique, c'est le mode d'emploi qui dit comment s'en servir. Elle prend en général la forme d'un PDF de quelques pages à plusieurs dizaines.

• Le logo et ses versions : en couleur, en une seule couleur, sur fond clair et sur fond foncé, avec l'espace à laisser autour, sa taille minimale et les usages interdits (déformé, recoloré, sur une photo chargée).
• Les couleurs, avec leurs codes : en hexadécimal ou en RVB pour les écrans, en CMJN ou en Pantone pour l'impression.
• Les typographies : celle des titres, celle des textes, leurs tailles et leurs graisses.
• Les éléments graphiques : pictogrammes, motifs, style des photos ou des illustrations.
• Des exemples d'application : une page web, un post, une carte de visite, une signature de mail.

Un écran demande des règles qu'un document imprimé n'a pas : la couleur des boutons et des liens, leur apparence au survol ou quand ils sont désactivés, les tailles de texte lisibles sur un téléphone, les icônes. Il faut aussi des contrastes suffisants : pour l'accessibilité, le texte courant doit atteindre un rapport de contraste de 4,5 pour 1 avec son fond.

C'est là que la charte rejoint le design system : la charte dit à quoi ressemble la marque, le design system en fait des composants prêts à l'emploi, boutons, champs, cartes, réutilisés sur chaque écran.

Un exemple public : l'État a sa propre charte, organisée autour du bloc Marianne, et un système de design pour ses sites, consultable en ligne par tous.

Beaucoup d'entreprises n'ont jamais eu de charte formelle, et ce n'est pas un obstacle pour créer un site. Un logo et une ou deux couleurs suffisent pour démarrer : le design du site fixe ensuite les typographies, les tons et le style des boutons, qui deviennent les règles de la marque à l'écran.

Ce qui fait vraiment gagner du temps : le logo en version vectorielle (un fichier SVG, EPS ou PDF, qui reste net à toutes les tailles), les codes exacts des couleurs, et quelques exemples de sites dont le style vous plaît.

Chez Beaspo, le design est compris dans le prix d'un site, d'une application ou d'un logiciel, conçu pour vous et validé écran par écran. Si vous avez déjà une charte graphique ou un designer, on construit à partir de ce qui existe. Le cahier des charges d'un site internet a une question sur votre style et vos exemples.