Créer une charte graphique gratuitement : l'outil né de la charte du studio
Quand le studio est devenu Studio Soleil Orange, j'ai écrit sa charte graphique et je l'ai mise en ligne, en entier. Logos, couleurs, contrastes, polices, interdits : tout y est. Elle a ensuite servi de modèle à un outil gratuit, qui met en page la charte de n'importe quelle marque, directement dans votre navigateur.
Une charte, c'est un mode d'emploi
Une charte graphique rassemble les règles qui rendent une marque reconnaissable : ses logos, ses couleurs, ses polices, et la façon de les utiliser. Elle ne sert pas qu'au graphiste. Elle sert à l'imprimeur, au développeur du site, à l'enseigniste, à la personne qui gère les réseaux. Sans elle, chacun improvise : un logo étiré, un orange qui change d'un support à l'autre, une police remplacée par celle qui traînait sur l'ordinateur.
Sur la page Graphisme du studio, j'écris qu'un client repart avec une charte « utilisable par n'importe quel imprimeur ou prestataire ». Le générateur de charte graphique met ce principe à la portée de tout le monde. Sa mise en page reprend celle de la charte du studio, que vous pouvez consulter en ligne.
Cinq étapes, un aperçu en direct
L'outil avance en cinq étapes, et l'aperçu de la charte se met à jour à chaque saisie, page par page, au format A4.
- Identité : le nom de la marque, son slogan, son histoire, sa mission, ses valeurs et son ton de voix.
- Logos : toutes les formes du logo et leurs déclinaisons, dans un tableau.
- Couleurs : les teintes de la marque et leur rôle, avec leurs valeurs HEX, RVB, TSL et CMJN calculées automatiquement, et une page facultative des contrastes validés et interdits.
- Polices : vos fichiers ou une des douze polices libres proposées, avec leur rôle (titres, texte courant, accent) et une échelle typographique.
- Contact : le site, l'adresse e-mail et les réseaux.
Trois modèles de mise en page sont proposés, éditorial, clair ou sombre, en A4 portrait ou paysage.
Le tableau des formes
C'est la partie sur laquelle j'ai passé le plus de temps, parce qu'elle vient directement de la vraie vie d'un logo. Une marque n'a presque jamais un seul logo : elle a une version principale, une version verticale, un symbole seul, un favicon, parfois un sceau. Chaque forme occupe une ligne du tableau. La grande case reçoit la version en couleur originale, les petites accueillent les versions monochrome, noire et blanche, et une dernière case ajoute une variante de votre choix, avec un nom, une couleur et, si vous l'avez, son fichier.
Il vous manque une version noire ou blanche ? L'interrupteur « Compléter les variantes manquantes » les crée à partir de la couleur originale, sous forme de silhouettes d'une seule couleur. Elles apparaissent dans le PDF et dans le pack ZIP, rangées par forme.
L'essai avec la charte du studio
Pour les images de cet article, j'ai donné à l'outil l'identité du studio : son nom et son histoire, trois formes de logo (principal, secondaire et symbole) avec leurs versions noire et blanche, une variante brun foncé, les sept couleurs de la charte et ses deux polices, Plus Jakarta Sans pour les titres et Inter pour le texte. Le résultat tient en treize pages A4, prêtes à exporter.
Un 7 sur 10 pour ma propre charte
Dans l'étape Couleurs, l'outil note la palette sur 10, selon cinq critères : la lisibilité du texte courant, la couleur principale, les associations, l'impression en noir et blanc et la palette elle-même. Celle du studio obtient 7 sur 10. Il lui reproche deux choses : en impression noir et blanc, les deux bruns et le noir donnent presque le même gris, et certaines teintes sont presque identiques, comme le crème rosé et le blanc cassé.
Sur le fond, il a raison. La charte du studio règle déjà la question en interdisant de superposer ces teintes, qui tombent à 1,1:1 ou 1,3:1 entre elles. J'ai quand même gardé la note telle quelle : un outil qui ne distribuerait que des 10 ne servirait à rien.
Exporter : PDF, HTML ou pack complet
- PDF : la charte s'ouvre avec la fenêtre d'impression de votre navigateur. Choisissez « Enregistrer au format PDF », des marges à « Aucune », et cochez « Graphiques d'arrière-plan ».
- HTML : un fichier autonome, lisible sans connexion, à envoyer tel quel.
- Pack complet (ZIP) : la charte, les logos en SVG et en PNG rangés par forme, le nuancier Adobe (.ase), les variables CSS et les polices.
- Projet (.json) : tout votre travail, logos et polices compris, pour reprendre plus tard.
Aucune adresse e-mail n'est demandée pour télécharger. Un encart facultatif permet d'en laisser une si vous voulez des nouvelles du studio ; c'est la seule information qui peut nous parvenir, et seulement si vous le décidez. Tout le reste est traité dans votre navigateur.
Qui s'en sert, et pourquoi
Les graphistes indépendants
En fin de mission, le livrable compte autant que le logo. L'outil produit en quelques minutes un document propre et un pack de fichiers rangé par forme, que le client peut transmettre à n'importe quel prestataire.
Les petites entreprises
Vous avez un logo, des couleurs, mais rien d'écrit ? Rassembler le tout dans une charte évite que chaque imprimeur, développeur ou enseigniste réinterprète votre identité. Et le diagnostic des couleurs révèle souvent des duos à éviter.
Les associations et les collectivités
Quand des partenaires, des bénévoles ou des services différents utilisent le même logo, la page « quelle version sur quel fond » et la liste des interdits évitent bien des déformations. Les formes « co-branding » et « événementiel » sont prévues pour ça.
Avant un changement d'identité
Faire la charte de l'existant, c'est le meilleur état des lieux avant un rebranding : on voit tout de suite les logos qui manquent, les couleurs en trop et les contrastes qui ne tiennent pas.
Les valeurs CMJN sont calculées automatiquement à partir de vos couleurs. Pour un travail d'impression soigné, faites-les valider par votre imprimeur, qui connaît son papier et son profil couleur.
La charte au travail
Au studio, la charte ne reste pas dans un tiroir. Elle prévoit le logo principal sur les certificats d'authenticité, et l'identité du studio se retrouve sur les papiers glissés dans chaque colis de tirage.
J'en raconte le détail dans l'article sur le certificat d'authenticité d'un tirage photo.
Questions fréquentes
Que doit contenir une charte graphique ?
Au minimum les logos et leurs déclinaisons, les couleurs avec leurs codes (HEX, RVB, CMJN), les polices et leurs usages, et les règles : quelle version sur quel fond, la zone de protection, la taille minimale et ce qu'il ne faut jamais faire. L'histoire et le ton de la marque complètent utilement l'ensemble.
Faut-il laisser son adresse e-mail pour télécharger ?
Non, jamais. L'encart « Restez en contact » est facultatif.
Quelle différence entre le PDF, le HTML et le pack ZIP ?
Le PDF se lit et s'imprime partout. Le HTML est un fichier autonome qui s'ouvre dans un navigateur, même hors ligne. Le pack ZIP ajoute tous les fichiers sources : logos, nuancier, variables CSS et polices.
Mes logos sont-ils envoyés sur un serveur ?
Non. Ils sont lus et mis en page dans votre navigateur. Rien n'est enregistré ni transmis au studio.
Peut-on reprendre sa charte plus tard ?
Oui. Enregistrez le projet en fichier .json : il garde tout, logos et polices compris, et se rouvre dans l'outil.
Et si on la faisait ensemble ?
Le générateur est gratuit et fait partie des outils du studio, avec le vérificateur de contraste et le générateur de palette de couleurs, qui lui envoie directement vos couleurs. S'il vous rend service, vous pouvez soutenir le studio. Et si vous préférez confier votre identité à quelqu'un, c'est aussi mon métier : le studio crée des logos, des chartes et des supports pour les professionnels.
Créer ma charte graphique →Graphisme pour les pros →
Corentin Godefroy Morlet
pour Studio Soleil Orange
