Charte graphique et identité visuelle : ne pas confondre

Un pres­ta­taire vous demande votre charte gra­phique, vous lui envoyez votre logo. La confu­sion est banale, et sans consé­quence dans une conver­sa­tion. Elle en a une dès qu’il faut refaire un site, faire impri­mer une pla­quette ou confier un visuel à quel­qu’un d’autre. Ces deux expres­sions ne dési­gnent pas la même chose, et un troi­sième terme les pré­cède. Voi­ci com­ment les situer, et ce que vous devez réel­le­ment avoir en main.

Trois notions que l’on confond

Le plus simple est de les prendre dans l’ordre : les deux pre­mières s’emboîtent, du plus abs­trait au plus concret, et la troi­sième est d’une autre nature.

L’identité de marque : ce que vous êtes

C’est la couche la moins visible, et pour­tant celle qui décide de tout le reste : votre posi­tion­ne­ment, ce que vous pro­met­tez, à qui vous vous adres­sez, et sur quel ton.

Pre­nons deux bou­lan­ge­ries dans la même rue. L’une met en avant le geste arti­sa­nal et la len­teur du tra­vail, l’autre la pra­ti­ci­té et la rapi­di­té du ser­vice. Elles vendent le même pro­duit, mais elles ne racontent pas la même chose. Ce niveau existe dans toute acti­vi­té, qu’il ait été for­mu­lé ou non. Dans les petites struc­tures, cette réflexion est rare­ment for­ma­li­sée, ce qui explique pour­quoi tant de pro­jets gra­phiques s’en­lisent : on dis­cute de cou­leurs alors que le désac­cord porte sur le positionnement.

C’est aus­si pour cette rai­son qu’un logo ne se des­sine pas pour faire joli. Le créer sup­pose d’a­voir répon­du, au moins som­mai­re­ment, aux ques­tions de ce niveau : à qui vous vous adres­sez, ce que vous vou­lez ins­pi­rer, ce qui vous dis­tingue. Un bon logo n’est pas celui qui plaît, c’est celui qui tra­duit quelque chose. Quand cette réflexion n’a pas eu lieu, elle ne dis­pa­raît pas pour autant : elle res­sur­git plus tard, sous la forme d’un « je ne sais pas pour­quoi, mais ça ne me cor­res­pond pas » que per­sonne n’ar­rive à expliquer.

Une marque peut se tra­duire de plu­sieurs manières : par le son (un jingle, une signa­ture sonore), par les mots (un nom, une accroche), et par l’i­mage. C’est cette tra­duc­tion visuelle, la plus expo­sée et la seule qu’en­cadre une charte gra­phique, que nous sui­vons ici.

L’identité visuelle : ce que l’on voit

C’est la tra­duc­tion visuelle du niveau pré­cé­dent : le logo, les cou­leurs, les typo­gra­phies, le style des images, par­fois des formes ou des motifs récur­rents. C’est ce que votre public recon­naît sans y pen­ser, sou­vent avant même de lire votre nom.

La charte graphique : le document qui fixe les règles

C’est là que se joue la confu­sion. La charte gra­phique n’est pas une col­lec­tion de visuels, c’est un docu­ment qui dit com­ment les employer. Quelle ver­sion du logo uti­li­ser sur un fond sombre, quel espace lais­ser autour, à par­tir de quelle taille il devient illi­sible, quelles cou­leurs peuvent se com­bi­ner, les­quelles ne le peuvent pas.

Une image résume bien le rap­port entre les deux : l’i­den­ti­té visuelle est le voca­bu­laire, la charte gra­phique est la gram­maire. Vous pou­vez avoir le voca­bu­laire sans la gram­maire. C’est même la situa­tion la plus fréquente.

Pourquoi ce vocabulaire flotte autant

Ces trois notions sont claires une fois posées. Les mots qui les dési­gnent le sont beau­coup moins, et c’est une bonne part du problème.

Iden­ti­té visuelle et iden­ti­té gra­phique sont sou­vent employées comme des syno­nymes. Les deux expres­sions cir­culent, la pre­mière est la plus éta­blie dans le métier, et vous pou­vez employer l’une ou l’autre sans risque de mal­en­ten­du dans la plu­part des situa­tions. Il n’y a rien à tran­cher ici, sim­ple­ment à savoir que vous croi­se­rez les deux.

En anglais, on ne retrouve pas tou­jours un équi­valent terme à terme de « charte gra­phique ». Selon le péri­mètre du docu­ment, on ren­contre sur­tout les expres­sions brand gui­de­lines, brand style guide, brand book ou sim­ple­ment style guide. La notion existe donc bien, mais son appel­la­tion varie.

Sur­tout, le mot ne vous dit rien de ce qu’il recouvre. C’est le point le plus utile de toute cette sec­tion. Quand un pres­ta­taire vous annonce une charte gra­phique, la bonne ques­tion n’est pas de savoir s’il emploie le terme exact, mais ce que contient réel­le­ment la livrai­son : quels élé­ments sont cou­verts, quels fichiers sont four­nis, sous quelle forme. Deux pres­ta­tions por­tant le même nom peuvent aller d’une page réca­pi­tu­lant trois cou­leurs à un docu­ment de qua­rante pages. Deman­dez le conte­nu, pas l’étiquette.

Ce que contient une charte graphique

Le conte­nu varie selon l’am­pleur du pro­jet, mais quatre blocs reviennent presque toujours.

Le logo et ses décli­nai­sons. La ver­sion prin­ci­pale, mais aus­si les variantes pré­vues pour les cas réels : for­mat hori­zon­tal, ver­sion mono­chrome, ver­sion pour fond sombre, sym­bole seul quand la place manque. S’y ajoutent la taille mini­male, la zone de pro­tec­tion à lais­ser autour, et sur­tout les usages inter­dits : ne pas le défor­mer, ne pas le reco­lo­rer, ne pas lui ajou­ter d’ombre ou de contour. Le logo mérite d’ailleurs un article à lui seul, tant ses com­po­santes et ses variantes ont cha­cune un nom et une rai­son d’être : c’est le sujet de notre article sur logo, logo­type, sym­bole et bloc-marque.

Les cou­leurs. Avec leurs réfé­rences exactes, et non « le bleu du site ». Des réfé­rences HEX et RGB pour les écrans, ain­si que des valeurs CMJN et, si néces­saire, des réfé­rences Pan­tone pour l’im­pres­sion. La charte dis­tingue géné­ra­le­ment les cou­leurs prin­ci­pales des cou­leurs secon­daires, et indique dans quelles pro­por­tions les employer.

Les typo­gra­phies. La police des titres, celle du texte cou­rant, la hié­rar­chie entre les deux, et la solu­tion de repli quand la police pré­vue n’est pas dis­po­nible. C’est un cha­pitre plus tech­nique qu’il n’y paraît, notam­ment sur le Web où toutes les polices ne s’af­fichent pas de la même façon selon les appa­reils. Le sujet est déve­lop­pé dans notre article sur la typo­gra­phie sur le Web.

Le style des images. Pho­to­gra­phie ou illus­tra­tion, cadrage, trai­te­ment colo­ri­mé­trique, pré­sence ou non de per­sonnes. C’est le bloc le plus sou­vent oublié, alors que c’est celui qui se voit le plus : deux sites avec le même logo et les mêmes cou­leurs paraî­tront étran­gers l’un à l’autre si leurs images n’ont rien à voir.

Cer­taines chartes ajoutent le ton rédac­tion­nel : vou­voie­ment ou tutoie­ment, lon­gueur des phrases, voca­bu­laire à évi­ter. C’est un plus appré­ciable, mais ce n’est pas le cœur du document.

Pourquoi ça change quelque chose au quotidien

Le pre­mier béné­fice est la recon­nais­sance. Une iden­ti­té ne s’ins­talle que par la répé­ti­tion. Si chaque sup­port réin­vente ses cou­leurs et ses polices, il n’y a rien à mémo­ri­ser, et l’ef­fort consen­ti sur le logo est perdu.

Le deuxième est plus terre à terre : les arbi­trages sont ren­dus une fois pour toutes. Sans charte, la ques­tion « on met quel bleu ? » revient à chaque nou­veau sup­port, avec la même dis­cus­sion et par­fois une réponse dif­fé­rente. Le temps ain­si gagné est loin d’être négligeable.

Le troi­sième se révèle le jour où quel­qu’un d’autre tra­vaille pour vous. Un nou­veau pres­ta­taire, un impri­meur, une per­sonne en stage : avec une charte, cha­cun pro­duit quelque chose de cohé­rent sans avoir à vous sol­li­ci­ter, et sans repro­duire de mémoire ce qu’il a cru comprendre.

Une charte n’est donc pas une contrainte créa­tive. C’est un cadre qui évite de rejouer indé­fi­ni­ment les mêmes arbitrages.

Ce que vous devez avoir en main

Un point tech­nique décide sou­vent de tout le reste : le for­mat sous lequel votre logo vous est remis. Un logo existe idéa­le­ment en ver­sion vec­to­rielle, c’est-à-dire décrit par des tra­cés et non par des pixels. Il se redi­men­sionne alors sans perte, de la carte de visite à l’en­seigne. Les exports en PNG ou en JPEG, eux, sont com­po­sés de pixels et pré­vus pour des usages pré­cis : un PNG de 400 pixels de large fera l’af­faire sur un site, mais ne ser­vi­ra à rien le jour d’une impres­sion grand for­mat. Les for­mats d’i­mages et leurs usages res­pec­tifs sont détaillés dans notre article sur les for­mats et la com­pres­sion des images sur le Web.

Ce qu’il est légi­time de réclamer

• ➔ Le logo en ver­sion vec­to­rielle, en plus des exports courants.
• ➔ Les décli­nai­sons pré­vues : mono­chrome, fond sombre, for­mat horizontal.
• ➔ Les réfé­rences exactes des cou­leurs, à l’écrit.
• ➔ Le nom des polices uti­li­sées et les condi­tions de licence néces­saires à leur uti­li­sa­tion, notam­ment lors­qu’elles sont payantes ou sou­mises à des restrictions.
• ➔ La charte elle-même, sous une forme consul­table et transmissible.

Reste une ques­tion qui se pose sou­vent trop tard : dis­po­sez-vous des fichiers néces­saires, mais aus­si des droits vous per­met­tant d’u­ti­li­ser le logo, de l’a­dap­ter ou d’en confier la modi­fi­ca­tion à un autre pres­ta­taire ? Cela ne va pas de soi, et cela doit être pré­ci­sé par écrit au moment de la com­mande, pas le jour où vous chan­gez de prestataire.

Le réflexe vaut d’ailleurs bien au-delà du gra­phisme. Sur un pro­jet Web, la même ques­tion se pose pour le code, les accès et le nom de domaine, et c’est le sujet de notre article Nou­veau site web : êtes-vous vrai­ment pro­prié­taire de tout ?.

Si vous n’avez pas de charte

Ce n’est pas blo­quant, et c’est le cas de la majo­ri­té des petites struc­tures. L’ab­sence de docu­ment for­mel ne vous empêche pas de gagner l’es­sen­tiel de ses bénéfices.

Une simple page suf­fit à démar­rer : les codes exacts de vos cou­leurs, le nom de vos polices, la liste des ver­sions de votre logo et l’en­droit où sont ran­gés les fichiers. Ce n’est pas une charte détaillée, mais c’est déjà une mini-charte exploi­table. Elle couvre l’es­sen­tiel des situa­tions cou­rantes et peut faci­le­ment être transmise.

Lors­qu’une orga­ni­sa­tion conçoit de nom­breux sites, ser­vices ou inter­faces, un autre outil peut com­plé­ter la charte gra­phique : le desi­gn sys­tem. Il for­ma­lise notam­ment des com­po­sants réuti­li­sables, leurs règles d’u­sage et, sou­vent, leur implé­men­ta­tion tech­nique. C’est un sujet de fond, que nous trai­tons dans notre article qu’est-ce qu’un desi­gn sys­tem et en avez-vous besoin ?.

À retenir

Trois notions, à ne plus confondre. L’i­den­ti­té de marque est ce que vous êtes : posi­tion­ne­ment, pro­messe, public, ton. L’i­den­ti­té visuelle, ou iden­ti­té gra­phique, en est la tra­duc­tion que l’on voit : logo, cou­leurs, typo­gra­phies, style d’i­mages. La charte gra­phique est le docu­ment qui fixe les règles d’u­sage de cette identité.

Autre­ment dit, le logo n’est pas l’i­den­ti­té, et l’i­den­ti­té n’est pas la charte. Vous pou­vez très bien pos­sé­der un logo sans dis­po­ser d’une iden­ti­té visuelle réel­le­ment construite ni d’une charte graphique.

Le jour où vous refaites votre site ou confiez un visuel à quel­qu’un, la vraie ques­tion n’est pas « ai-je une charte », mais « ai-je les fichiers exploi­tables, les réfé­rences exactes et les droits néces­saires pour m’en ser­vir ». Si la réponse est oui, vous êtes déjà dans de bonnes conditions.

Image mise en avant : Pho­to de Mar­tin Sanchez