Charte graphique : de sa création à sa mise en application !

On entend souvent en entreprise l’expression « Il faut que ça respecte la charte graphique », une notion que l’on pense maîtriser sur le bout des doigts alors qu’elle cache un bon nombre de rouages et de codes qu’on ne soupçonne même pas au premier abord.

La charte graphique est l’étape créative qui arrive juste après la production d’un moodboard. Le moodboard étant un assemblage d’éléments graphiques : images, photos, couleurs, ambiances, mots… généralement disposés sous la forme d’un collage dans le but de mettre en avant l’univers créatif que l’on souhaite véhiculer à sa marque / son produit digital...

Illustration de la notion de moodboard Source : carnetderoses

Ainsi, une fois l’étape du moodboard réalisée, il est bien plus aisé de passer à l’étape suivante : la production d’une charte graphique.

Point fondamental : qu’est-ce qu’une charte graphique ?

Une charte graphique est un document qui regroupe sur un seul et même support tous les éléments graphiques définissant l’identité visuelle d’une marque, d’une entreprise, d’un produit digital…

Charte graphique de la marque de parfums "A l’écoute des senteurs" Source : 107 créations

On y retrouve ainsi toutes les règles visuelles ou encore les codes permettant de définir simplement les conditions d’utilisation des différents éléments graphiques d’une charte suivant les supports de communication que l’on souhaite produire.

A quels objectifs répond une charte graphique ?

L’objectif principal d’une charte graphique est de garantir une cohérence visuelle quel que soit le support de communication réalisé.

En effet, qu’il s’agisse d’une affiche pour une campagne d’affichage dans le métro, d’une bannière web pour promouvoir la sortie d’un nouveau produit ou encore d’une carte de visite : tous ces supports doivent suivre la même ligne de conduite graphique et ainsi insuffler l’esprit d’une marque, d’un produit digital, etc…

On distingue généralement les notions de “print” et de “digital” (ou encore “web”) car les règles visuelles diffèrent suivant les types de supports :

• Le print fait référence à l’impression c’est-à-dire aux différents supports de communication nécessitant d’être imprimés à l’issue de leur réalisation comme par exemple les affiches ou encore les flyers. Certains éléments clés de la charte graphique permettent ainsi de répondre aux enjeux du print qui sont de : capter rapidement l’oeil tout en véhiculant un message simple et compréhensible par tous.

Exemple d'un support de communication print : affiche Dior__Source : https://bit.ly/3coIvTS

• Le digital, quant à lui, intervient sur des supports de communication très variés : email, publicité display, réseaux sociaux, vidéo, application mobile, site web… et répond à des normes ergonomiques spécifiques liées à des usages web standards. C’est la raison pour laquelle la charte graphique est indispensable dans un écosystème digital et doit permettre de garantir la lisibilité des contenus produits et d’accompagner implicitement l’utilisateur à trouver l’information qu’il cherche le plus rapidement possible.

• > Capture d’écran d’un post instagram du compte My Provence Officiel :Source : https://www.instagram.com/p/BGqkZy9pOvj/Capture d’écran d’une app mobile :Source : https://www.blogduwebdesign.com/25-interfaces-mobiles-univers-graphique-inspiration/ Ainsi, la charte graphique a pour rôle de garantir l’harmonie visuelle des différentes productions graphiques réalisées et de véhiculer un esprit général de marque / produit digital cohérent.

Que contient une charte graphique ?

Une charte graphique ne se réduit pas à une palette de couleurs et de typographies à utiliser sur ses supports de communication ou sur son produit : c’est bien plus riche que cela et voici une liste exhaustive des éléments que l’on peut y trouver :

• Le logo est le résumé de l’identité visuelle d’une marque / d’un produit. C’est l’élément graphique que l’on va retenir en premier et qui permet de se différencier de la concurrence. Il peut se matérialiser sous différentes formes (ex : une police, un dessin, une illustration, un pictogramme…), doit rester simple et transmettre une intention. Par exemple, la virgule inversée et pointée vers le haut du logo Nike traduit une idée de mouvement et est supposée représenter de manière stylisée l'aile de Niké, la déesse grecque de la victoire, qui a également donné son nom à la marque.

Moodbard de différents logos__Source : https://enovdesign.com/identite-visuelle/concevoir-un-logo-pourquoi/

• Les typographies (ou encore polices d’écriture) sont des éléments cruciaux d’une charte graphique car ce sont les éléments que l’on voit le plus. Sur une typographie, on peut jouer avec les graisses (ex : italique, gras, regular…), les tailles et les caractères (avec ou sans serif) et c’est la combinaison de ces 3 variables qui peut du tout au tout changer la vision et la portée d’un texte en permettant de créer différents niveaux tout en assurant un confort de lecture.

Typographies__Source : https://www.u-pem.fr/charte-graphique/2-lunivers-de-marque/

• La sélection des couleurs doit se faire intelligemment et de façon limitée (de manière générale, les chartes graphiques se composent de 3 couleurs principales) afin de garantir une meilleure mémorisation de l’identité visuelle et de bien se différencier de la concurrence. C’est à partir des couleurs principales de la charte que l’on va créer une palette de déclinaisons afin de pouvoir jouer avec les contrastes et mettre en avant des éléments par rapport à d’autres.

Palette de couleurs d'une charte graphique__Source : https://community.moneway.com/t/la-palette-de-couleur/50

• Les icônes et les pictogrammes sont des éléments graphiques qui doivent être compréhensibles en un coup d’oeil (on ne doit pas avoir besoin d’une légende pour comprendre leur signification) et qui permettent d’aérer le contenu tout en le rendant pédagogique : un schéma vaut mieux qu’un long discours. Attention tout de même à la fréquence d’utilisation !

Palette de pictogrammes / icônes d’une charte graphiqueSource : https://www.creads.fr/blog/inspirations-design/sites-trouver-pictogrammes-gratuits

• Les images, illustrations ou encore les photos font partie intégrante d’une charte graphique et doivent être utilisées avec parcimonie. Chaque image, illustration ou photo doit apporter une information et non pas juste être utilisée à titre de décoration.

Exemples d’usages d’illustrations, images ou encore photosSources :https://www.pinterest.se/pin/454230312420259916/https://myald.fr/public/feedhttps://www.respire.co/

• Les règles d’insertion et de placement des différents éléments graphiques permettent de garantir les mêmes rapports de proportion quel que soit le support. Sous cette notion découle les notions de marges, de tabulations, les espaces à respecter entre un titre, un paragraphe, une image, un bouton… l’objectif de ces règles étant de maintenir la lisibilité et la cohérence.

Exemple de règles de pixels entre les différents élémentsSource : https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

Quelles professions et outils se cachent derrière la création d’une charte graphique ?

Focus sur les professions créatives

Derrière la notion de charte graphique se cache plusieurs professions

• Le directeur artistique traduit les messages de ses clients en image. Il porte une attention particulière au style et à la personnalité de la marque / du produit digital. C’est lui qui va porter les idées graphiques et les faire réaliser par son équipe de création. Quel que soit le support à réaliser, print ou digital, le directeur artistique est capable de traiter le volet création graphique dans sa globalité.
• Le designer web / UI designer travaille sur l’aspect visuel et le rendu de l’interface d’un produit. Il intervient juste après la création de l’expérience utilisateur réalisée par l’UX designer et porte un point d’attention à la disposition graphique des pages ainsi qu’à la navigation et aux différentes interactions avec l’interface. A partir de la charte graphique, l’UI designer peut créer son design system (regroupement des différents éléments qu’il va utiliser de façon régulière comme des boutons, des champs de recherche / de saisie, des popins… On parle aussi de “banque d’éléments design”) dans lequel il pourra piocher facilement lors de la production de ses interfaces. Son but premier est de fluidifier la navigation des utilisateurs et de leur permettre la concrétisation de leur action dans les meilleurs délais comme l’ajout au panier, la finalisation d’un paiement en ligne à l’issue d’un tunnel de conversion...
• Le product designer possède à la fois la casquette de l’UX designer et celle de l’UI designer et intervient sur toute la chaîne du produit qu’il conçoit.

• > Les chantiers sur lesquels intervient un Product DesignerSource : Hubvisory Son rôle est avant tout de gérer la recherche utilisateur et de garantir la cohérence visuelle du produit.Il façonne au quotidien des hypothèses à valider, les tests via des entretiens utilisateurs animés soit par un guide d’entretien soit par un prototype et veille sur le respect des règles ergonomiques et de l’application de la charte graphique sur les différents écrans qu’il produit.Le product designer est donc le garant de l’expérience utilisateur du produit et de la simplicité de navigation. A cela, il doit faire preuve d’empathie et être capable de comprendre au mieux les besoins des utilisateurs afin de proposer à chaque fois la meilleure version d’un produit.

Focus sur les outils utilisés

Concernant les outils utilisés pour réaliser une charte graphique il y a plusieurs écoles :

• La combinaison de plusieurs logiciels de la suite Adobe avec notamment l’utilisation de :
• Photoshop (Ps) : pour la retouche d’images,
• Illustrator (Ai) : pour la création de logos, illustrations, pictogrammes, palettes de couleurs,
• Indesign (Indd) : pour le travail de typographies, des règles d’insertion et de mise en page.

Le trio gagnant des outils de la suite Adobe à utiliser pour concevoir une charte graphiqueSource : https://www.freepik.com/blog/a-brief-overview-of-photoshop-illustrator-and-indesign/

• L’utilisation de Sketch / Figma / Adobe Xd :

Illustration des 3 outils consécutifs : Adobe Xd, Sketch et FigmaSource : https://www.uxbeginner.com/best-ux-design-tool/

Ces 3 outils se rapprochent fortement en termes de fonctionnalités et ont la particularité de proposer une fonctionnalité de prototypage permettant de donner vie aux éléments graphiques et d’aider l’utilisateur à se projeter dans son parcours.

Donner vie à des écrans en passant par la case prototypage et animationSource : https://www.figma.com/blog/bring-figma-prototypes-to-life-with-gifs/

Focus sur l’évolution des chartes graphiques des produits Digiposte et Swile

La charte graphique d’un produit n’est pas figée dans le marbre. De la même façon qu’un produit, elle est - au fil des années - amenée à évoluer notamment pour des raisons stratégiques.

Le cas de l’application mobile Digiposte

En début d’année 2019, l’application mobile Digiposte - application permettant de recevoir et classer automatiquement ses documents importants (factures, fiches de paies..) de façon sécurisée - a refondu entièrement son application.

Créée par le groupe La Poste, l’application jouissait initialement de la charte graphique assez vieillissante du groupe et a profité de cette refonte pour revoir de fond en comble sa charte graphique (logo, typographies, couleurs, pictogrammes…) et proposer un produit plus actuel et simple d’utilisation.

Nouveau design de l’application Digiposte Source : wolfconceptions

La promesse de cette application est forte : “Digiposte, l’application qui vous simplifie la vie administrative” et c’est à travers cette promesse que le product designer s’est inspiré pour proposer un produit plus simple, plus intuitif et plus personnalisé comme en témoigne cette vidéo.

Cela met en relief que le design d’un produit digital n’est pas juste un coup de peinture mais sert bien à améliorer l’expérience utilisateur en simplifiant les parcours.

Le passage de Lunchr à Swile

En début d’année 2020, la startup Lunchr - spécialisée dans la digitalisation des titres-restaurant - a décidé de refondre son produit de la tête au pied en proposant une V2 : Swile, avec en baseline : “Nouvelle marque, nouvel univers !”.

Communication mail de la nouvelle marque SwileSource : newsletter Lunchr /Swile

Proposer un service de digitalisation des titres-restaurant n’était plus suffisant pour la startup qui a voulu enrichir son produit en proposant des fonctionnalités supplémentaires :

• Un système de cagnotte 100% gratuite,
• Le remboursement facile entre collègues,
• Le partage d’addition,
• Ou encore une messagerie instantanée.

A travers sa nouvelle charte graphique très moderne et couplant à la fois un nouveau nom de marque, de nouvelles couleurs, typographies, éléments 3D, Swile a proposé une V2 unique de son produit permettant d’améliorer l’expérience utilisateur et de l’enrichir à travers un système de gamification de la pause déjeuner.

Une stratégie audacieuse et complètement différenciante de ce que peut proposer la concurrence.

En conclusion, la charte graphique d’une marque / d’un produit digital est un élément indispensable amené à évoluer dans le temps et permettant de poser un cadre visuel à toutes les productions réalisées dans le but de maintenir une cohérence graphique et de servir intelligemment l’expérience utilisateur.