Exemple de charte graphique : ce que publient la NASA, GOV.UK et Cambridge, et quoi en retenir

Exemple de charte graphique : ce que les organisations publient pour leurs équipes

Le premier exemple de charte graphique qui sort d’une recherche rapide est souvent une maquette faite pour vendre un modèle. Les plus utiles sont les règles que les organisations écrivent pour leur personnel, leurs imprimeurs et leurs partenaires, puis publient. C’est le cas de GOV.UK, le site du gouvernement britannique, mais aussi de la NASA, de l’Université de Cambridge et de Mozilla. Leurs pages sont écrites pour des gens qui appliquent les règles dans l’urgence, pas pour un portfolio.

Lues côte à côte, elles couvrent le même terrain : logo et zone de protection, codes couleur, typographies, photographie, ton, modèles et droit d’utiliser la marque. L’essentiel du texte est fait de consignes. Les règles montrent souvent la bonne version à côté de la mauvaise. Une charte de dix pages pour une petite entreprise peut atteindre ce niveau.

Règles du logo dans l’insigne de la NASA et le logotype de GOV.UK

La charte de la NASA s’ouvre sur une leçon de continuité. L’insigne rond, surnommé « la boulette », a été adopté en 1959, a cédé la place de 1976 à 1992 au logotype appelé « le ver », puis a été rétabli en 1992. Il doit aujourd’hui figurer sur toutes les publications et expositions de l’agence. Son fond préféré est un blanc, un noir, un gris ou un argent unis, et la photo est admise tant que le contraste est maintenu.

Un détail de la NASA vaut pour tout logo irrégulier. Comme l’insigne n’est pas symétrique, la page demande de le centrer sur sa sphère bleue, pas sur toute la figure. Sa zone protégée se mesure dans une unité que la page appelle N, pas en millimètres, si bien que la règle suit la taille du logo. Cambridge fait de même avec ses armoiries : l’espace libre égale leur largeur, et le logo ne descend jamais sous 30 millimètres en impression ni sous 85 pixels à l’écran.

GOV.UK construit la même règle autour d’un point. Son logo a deux éléments, le mot GOV.UK et la couronne, et la zone de protection est définie par la taille du point de ce mot. Les largeurs minimales sont de 50 pixels pour le mot et de 16 pour la couronne, avec une couronne réduite pour les favicons. Les interdits sont concrets : ni étirement, ni ombres ou effets, ni retournement, ni fond chargé ou peu contrasté.

Codes couleur pour l’impression et l’écran chez Cambridge et GOV.UK

Cambridge ancre ses 24 couleurs sur le Cambridge Blue et le décrit de quatre façons : Pantone 7471, hex #8EE8D8, RVB 142 232 216 et CMJN 48 0 27 0. La règle sous le tableau : CMJN ou Pantone à l’impression, RVB à l’écran, et chaque impression comparée à une pastille Pantone imprimée. GOV.UK donne son bleu principal de la même manière, #1D70B8 pour le web et CMJN 84 39 0 28 avec la référence d’encre 7461 C pour l’impression. Sa palette ne se modifie pas et ne s’enrichit pas.

Le GOV.UK Design System ajoute une habitude que tout site peut reprendre. Il demande aux développeurs de ne pas coller de valeurs hexadécimales dans le code, mais d’appeler une couleur par sa fonction, par exemple brand, pour que le service reprenne la palette la plus récente à chaque mise à jour. Pour une petite entreprise, l’équivalent est un seul tableau avec quatre codes par couleur et un rôle pour chacune : texte, fond ou accent. Changer une teinte ne demande alors qu’une modification.

Règles de contraste du W3C que la couleur de marque ne peut pas contourner

Avec l’accessibilité, la charte rencontre une norme qu’elle ne maîtrise pas. Le critère 1.4.3 des WCAG 2.2 du W3C exige un rapport de contraste d’au moins 4,5:1 entre le texte et son fond, et de 3:1 pour le texte de grande taille, soit au moins 18 points, ou 14 points en gras. Le texte qui fait partie d’un logo ou d’un nom de marque n’a pas d’exigence de contraste. Les seuils ne s’arrondissent pas : 4,499:1 ne passe pas.

Plus bas, le W3C ajoute la phrase qu’un propriétaire de marque devrait relire : hors logos, un texte trop peu contrasté à cause de l’identité visuelle n’est pas exempté. GOV.UK l’inscrit dans sa marque : il exige le niveau AA des WCAG 2.2 et rappelle aux équipes qu’elles restent responsables des combinaisons de couleurs qu’elles choisissent. Quand un logo sert de lien, le W3C suggère une variante suffisamment contrastée. Une bonne charte liste donc les paires texte et fond qui passent le test.

Typographies et polices de secours chez GOV.UK, Cambridge et la NASA

GOV.UK utilise GDS Transport, fondée sur la typographie des années 1960 dessinée pour les panneaux routiers britanniques et adaptée au numérique en 2012. Le GOV.UK Design System la lie à un lieu : les services du sous-domaine service.gov.uk doivent l’utiliser, les autres prennent une autre police. La NASA, elle, interdit les polices décoratives ou fantaisie pour le nom de l’agence. Une police peut appartenir à un propriétaire et à un contexte : la charte doit donc dire où elle peut servir.

Cambridge associe Feijoa pour les titres et Open Sans pour le texte courant, et prévoit le cas où elles manquent. Quand une application ne peut pas les utiliser, par exemple une présentation ouverte sur un ordinateur extérieur, le personnel passe à Arial, et les documents Office peuvent être enregistrés avec les polices incorporées. La taille minimale est de 16 pixels à l’écran et de 10 points sur papier. Une petite entreprise a besoin des mêmes lignes : deux typographies, une police de secours présente sur tout portable et les tailles minimales.

Photographie et ton rédactionnel selon Cambridge et GOV.UK

Le style photographique de Cambridge est centré sur les personnes : il est spontané et saisit des moments réels. Les gens sont photographiés dans leur véritable environnement de travail, les portraits sont détendus plutôt que posés, et la lumière naturelle est préférée. La page écarte les photos de studio, l’éclairage stylisé, le noir et blanc et les filtres. L’université n’utilise pas non plus de photos créées avec des outils d’IA, pour que son public voie des images fidèles de Cambridge.

GOV.UK traite la voix écrite de même. Le ton y est précis, informatif, clair et concis, sérieux sans être pompeux ; on s’adresse directement au lecteur et on préfère la voix active. L’anglais simple est obligatoire, et la page sur le langage clair cite des données : 1 adulte sur 6 en Angleterre a de très faibles compétences en lecture et en écriture. Elle préfère les mots courts, limite les paragraphes à cinq phrases et demande de couper les phrases de plus de 25 mots. Dix règles de ce genre valent mieux que trois adjectifs sur la personnalité de la marque.

Modèles, droits sur le logo et une charte courte qui reste à jour

Les règles seules ne gardent pas une marque cohérente ; les fichiers prêts à l’emploi, si. Cambridge propose des modèles de kakémonos, brochures, cartes de visite, affiches, présentations, rapports et papier à en-tête, et le personnel n’a qu’à remplir le contenu. Sa signature d’e-mail est un texte simple en Arial noir de 12 points, sans images, parce que logos et bannières y sont régulièrement bloqués ou mal affichés. GOV.UK conserve les fichiers de sa marque dans un seul dépôt GitHub, et la version en vigueur n’a donc qu’une adresse.

Une charte publique dit aussi qui peut utiliser la marque. Les règles de Mozilla sur ses marques permettent de citer ses produits avec exactitude sans demande, mais exigent une autorisation écrite préalable pour le reste, noms de domaine compris. Même autorisé, le logo ne se modifie pas et ne passe pas devant le nom de celui qui l’emploie. Cambridge demande aux tiers de solliciter une autorisation et de ne pas utiliser son logo comme caution dans des études de cas ou des témoignages. La protection juridique de votre nom et de votre logo relève d’un spécialiste des marques de votre pays.

Ensemble, ces exemples dessinent la charte d’une petite entreprise en une douzaine de pages : versions du logo, tableau des couleurs, deux polices et une de secours, règles photo, mots à remplacer, modèles de travail et une note sur les droits. La tenir à jour relève de l’habitude, pas du volume. La page de la NASA affiche la date de sa dernière mise à jour et précise que sa liste d’infractions peut être modifiée et complétée. Une petite charte a besoin d’un responsable, d’un lien vers les fichiers en vigueur et d’une date sur la première page.

Que préparer avant de commander une charte graphique, et quand l’écrire vous-même

Quel que soit l’auteur, la matière vient de l’entreprise. Rassemblez les fichiers de logo dont vous disposez, de préférence les vectoriels d’origine, et notez chaque endroit où la marque apparaît déjà, du site aux factures. Relevez les couleurs et les polices utilisées aujourd’hui, même si elles se contredisent. Ajoutez les photos dont vous détenez les droits, trois textes qui sonnent juste et les personnes qui utiliseront la charte, de l’imprimeur à la personne qui gère vos réseaux sociaux.

L’écrire en interne fonctionne quand une seule personne conçoit tout, que le logo est arrêté et que la marque vit surtout sur un site. Les exemples ci-dessus donnent la structure. La commander a plus de sens quand plusieurs personnes ou prestataires produisent des supports, quand le logo exige des versions réduites et monochromes, quand les couleurs doivent concorder sur papier et à l’écran ou quand il faut construire des modèles. Demandez alors des fichiers de travail et pas seulement un PDF : logos sources, tableau des couleurs, modèles modifiables et fichier source de la charte.

VITON13 Studio réalise des chartes graphiques pour des entreprises de tous pays, à distance, à partir du logo et des supports que le client possède déjà. Les guides en lien ci-dessous traitent du prix et de la frontière entre un logo et une identité complète. Apportez la liste du premier paragraphe au premier échange : périmètre, délai et prix se fixent alors par écrit avant toute conception. Et chaque exemple de charte graphique de cet article devient une liste de contrôle pour la vôtre.