WEB DESIGN

Conception et exemples de charte graphique

La charte graphique est la colonne vertébrale de toute communication de marque. Pour vous aider, voici nos explications pour créer une charte graphique unique !

Anne-Laure CompainAnne-Laure Compain

Anne-Laure Compain

Graphiste chez Snoweb

Publié le 14 mars 2021 13:23 (Mise à jour le 19 novembre 2021 16:13)

Avant de parler de charte graphique et d’exemples, commençons par un constat. Les marques dont on retient le nom ont toutes un point en commun. 

Celui d’avoir une identité visuelle forte. 

Alors oui, on va encore citer Apple, Nike ou Netflix. Mais parce que ce sont de bons exemples ! La preuve, on pourrait reconnaître entre mille ces logos et les typographies utilisées.

Car la communication de ces marques s’appuie d’une part sur une charte graphique solide, sur la régularité, mais surtout sur la cohérence dans leur communication.

La charte graphique est utilisée tous les jours dans les outils marketing d’une marque ou d’une entreprise. À travers des cartes de visite, un site web ou encore une devanture de magasin !

Et rappelez-vous nos exemples : on se souvient de ces marques de par cette régularité. Même logo, même couleurs, même typographie. Partout. Sur tous les supports.

Bien sûr, toutes les marques n’ont pas les mêmes budgets communication pour s’offrir cette place au soleil dans le cerveau de tous ! 

Mais même à votre échelle, la construction d’une charte graphique va vous aider à asseoir votre marque. Parce que votre marque n’est pas qu’un logo. C’est bien plus que ça.

Ensemble, nous allons donc parcourir l’intérêt pour vous d’avoir une charte graphique avec des exemples. Nous vous détaillerons aussi la différence de contenu entre une charte graphique papier et une charte graphique web.

design charte graphique

Une charte graphique, c'est quoi ?


À la création de son entreprise, il faut établir l’univers graphique de sa marque. Cet univers sera ensuite repris dans la communication et tous les outils qu’ils soient papier (cartes de visite, flyer), physique (vitrine, stands) ou encore virtuel (site internet, réseaux sociaux).

On vous explique pourquoi c'est important. ⬇️

Charte graphique : définition

Vous venez de créer votre entreprise ou vous y songez. Félicitations ! 🥳

La charte graphique va être un des documents fondateurs de votre communication. 

En effet, vous devez imaginer votre charte graphique comme un guide, un ensemble de règles qui explique les éléments visuels de votre marque. Ce guide fera partie des documents stratégiques importants pour vous.

La charte graphique est réalisée par une personne spécialiste dans le domaine.

Par exemple :

  • un(e) graphiste
  • un(e) directeur.ice artistique
  • un(e) webdesigner

Tous ces profils ont en commun de travailler sur l’image des marques. Ils maîtrisent les codes visuels (couleurs, typographies), et les logiciels adaptés pour traduire des concepts en image.

Si vous faites appel à l’un de ces profils pour créer votre charte graphique, nous allons d’abord vous donner des exemples ! 

En effet, il est important de bien cerner les différentes informations que doit comporter une charte graphique pour que ce travail soit complet.

Tout d’abord, nous allons tenter de définir la charte graphique comme un document (souvent sous la forme d’un document .pdf) qui regroupe les éléments de votre identité visuelle :

  • logo et ses déclinaisons
  • couleurs de l’entreprise
  • typographies
  • optionnel : d’autres informations sur votre marque et vos valeurs

À partir de ce document, votre identité visuelle pourra alors être adaptée et utilisée sur vos prochains éléments de communication (site internet, publicité, catalogue, carte de visite).

Pourquoi créer une charte graphique ?

Vous vous souvenez de l’exemple de la marque à la pomme, dans l’introduction ? C’est exactement pour cela que vous avez besoin d’une charte graphique !

Construire une marque forte commence d’abord par une identité visuelle claire, solide et qui est déclinée partout ! Même si vous êtes une petite marque, oui.

La charte graphique traduit la personnalité de votre entreprise. Elle renseigne sur la façon dont vos prospects ou clients vont vous reconnaître.

Vous imaginez, si vous utilisez une typographie différente à chacune de vos communications ? De quoi perdre vos prospects et clients… Changer trop souvent d’apparence risquerait de les troubler !

Cela semble évident, pourtant cela est loin d’être le cas en entreprise. La charte graphique est parfois négligée ou alors plus à jour. Ne faites pas cette erreur.

Dans une entreprise où plusieurs personnes travaillent avec des documents de communication, la charte graphique est vitale. Elle permet de maintenir une cohérence graphique.

Elle va ainsi renseigner chaque nouveau salarié sur les règles établies. En somme, la charte graphique fait gagner du temps à toute l’équipe et sert surtout de socle pour décider des futurs éléments de communication

Mettre à jour sa charte graphique

Et oui, il est très souvent nécessaire de mettre à jour l'identité de sa marque ! Mais pourquoi ?

Et bien tout simplement parce que vos utilisateurs évoluent et leurs goûts aussi, les tendances changent et ce qui était moderne il y a 5 ans, est aujourd'hui dépassé. Le design et les tendances évoluent très rapidement et votre marque doit suivre le rythme.

La refonte de votre marque est alors à envisager pour à nouveau marquer les esprits de votre cible.

Pour la création ou la refonte de votre marque, votre charte graphique doit contenir

charte graphique logo

Logo

Présentation de votre logo, de ses lignes de construction et de ses déclinaisons. On retrouve aussi ses droits d'utilisation, ce que vous pouvez faire et ne pas faire avec votre logo.

color swatch

Couleurs

Présentation des couleurs de la marque sous forme de palettes. Elles sont défini sur tous les supports, papier et web. Quelques fois des palettes light et dark peuvent être créées.

changement des textes

Typographie

Présentation des polices d'écriture de votre marque. Vous pouvez en avoir un ou plusieurs. Elles sont présentées avec toutes leurs graisses : normal, italic, gras...

Inscrivez-vous à notre newsletter.

Recevez les dernières nouveautés et astuces web design directement dans votre boite mail.

Charte graphique exemples


La plupart des chartes graphiques sont construites autour de différents éléments. Ici, on en notera 3 principaux : votre logo, vos couleurs et typographies.

À noter : On peut aussi faire figurer des règles éditoriales (tone of voice, baseline, éléments de langage), les valeurs de la marque ou encore des éléments d’histoire (date de création).

C’est pourquoi dans les pays anglophones on parlera de brand book. Ce type de document regroupe la charte graphique, la charte éditoriale ou des informations sur la gouvernance d’entreprise.

Voyez ci-dessous quatre exemples de charte graphique particulièrement parlants ! Ces chartes sont de bonnes sources d'inspiration.

design charte graphique slack

La charte graphique Slack

Slack est une plateforme de communication collaborative SaaS largement utilisée en entreprise sous forme de messagerie d’entreprise améliorée.

Sa charte graphique est divisée en plusieurs sections :

Explication sur le logo (version logo seul, version logo + typographie) : 

  • taille minimale
  • couleurs de fond
  • utilisation du logo en couleurs ou monochrome
  • ce qu’il faut faire ou ne pas faire avec le logo (étirer, couper…)

Les couleurs de l’entreprise :

  • couleurs principales 
  • couleurs secondaires
  • combinaisons possibles de couleurs

La typographie à utiliser :

  • Typographie des titres et informations importantes
  • Typographie paragraphes
  • Le cas échéant : la taille de la police en fonction de la taille

➡️ Slack est un bon exemple de charte graphique réussie et claire. On y apprend à connaître la personnalité de l’entreprise à travers tous ces détails sur la création du logo et le choix des couleurs.

La charte a aussi l’avantage d’être facile à lire. Résultat : pour ses salariés, c’est un outil facile à prendre en mains !

design charte graphique starbucks

La charte graphique Starbucks

Starbucks est une chaîne de cafés américaine connue dans le monde entier. Son identité de marque est forte et fait partie de ces marques que l’on n’oublie pas de si tôt… 

Grâce à son vert iconique et son logo emblème intemporel. D'ailleurs si vous souhaitez connaitre les différents type de logo qui existent c'est par ici.

La marque consacre un site web en entier à sa charte graphique. Le site est conçu à partir du brand book. C’est un excellent exemple de charte graphique ! 

Sur ce site, on y retrouve alors :

Le logo : 

  • son évolution depuis la création de l’entreprise
  • sa déclinaison en fonction des différentes couleurs de fonds
  • la typographie utilisée

Les couleurs : 

  • les différentes déclinaisons de couleurs utilisées
  • les couleurs utilisées sur les éléments de communication en fonction des saisons

La typographie  : 

  • les trois types de typographies utilisées 

Les images  : 

  • créations graphiques et images de marque et leur cas d’usage dans les éléments de communication

➡️ La charte Starbucks est assurément un exemple puissant : elle donne à voir une idée précise de la communication de l’entreprise.

On peut par exemple écrire un texte et voir le rendu avec la typographie que Starbucks utilise. On y découvre la théorie : ces règles graphiques et la pratique avec des exemples de publicités de la marque.

La charte graphique en elle-même porte l’identité graphique de la marque qui se veut fonctionnelle et expressive.

design charte graphique deezer

La charte graphique Deezer

Voici la charte graphique de Deezer, l’application de streaming musical française. 

C’est encore ici une version site web de la charte graphique. Elle détaille précisément :

Le logo : 

  • comment le logo est construit 
  • l’espace à respecter entre le logo et les autres éléments graphiques
  • la déclinaison du logo sous différents fonds de couleurs
  • les tailles maximales et minimales
  • les “do” et “don’t” autrement dit ce qu’il faut faire ou ne pas faire avec le logo
  • la déclinaison du logo sous différentes langues

Les couleurs :

  • les couleurs principales
  • les couleurs secondaires

La typographie : 

  • la typographie principale et secondaire
  • la déclinaison en arabe et hébreux

La charte graphique French Tech Grande Provence

Enfin, découvrez la parfaite charte graphique à travers l’exemple de la French Tech Grande Provence.

La French Tech est un label officiel français attribué à des pôles métropolitains ou des entreprises innovantes françaises.

Ici, la charte graphique est un bon modèle qui reprend les codes habituels des chartes graphiques :

Le logotype y est représenté avec des informations sur sa taille minimale et maximale. On le voit aussi avec ses différentes variantes. On retrouve un panorama des bonnes pratiques et de ce qu’il ne faut pas faire avec ce logo.

Toutes les couleurs utilisées sont détaillées ainsi que les typographies utilisées.

Créer une charte graphique l’exemple pas à pas


Beaucoup de petites entreprises pensent que le logo suffit pour créer une charte graphique. Ne commettez pas cette erreur ! 

Il est vrai que le logo est un pilier de la charte graphique, mais ce n’est pas le seul. Voici le pas à pas pour construire une charte graphique.

Bien choisir les couleurs de son identité de marque

Dans un second temps, la charte graphique fige aussi les choix des couleurs. On conseille l’utilisation de 5 couleurs maximales : c’est un nombre idéal pour ne pas troubler la mémorisation.

Dans la charte, vous devez faire apparaître ces couleurs, ainsi que le rendu de l’utilisation du logo avec ces différentes couleurs.

On doit renseigner les valeurs des couleurs avec : le nom Pantone, CMJN, RVB et les valeurs hexadécimales. Cela va faciliter l’intervention des graphistes pour vos futures communications.

Notez que les professionnels créatifs comme les graphistes ou webdesigners connaissent les couleurs et leurs significations. Cela peut-être utile pour orienter l'identité graphique de votre entreprise.

Voici la signification des couleurs les plus courantes :

Le bleu va être utilisé le plus souvent pour promouvoir :

  • des entreprises du domaine de la santé (médicaments)
  • de propreté (produits de nettoyage)
  • de transactions financières (banques)
  • de transport et du voyage (compagnies aériennes, aéroport, éolien)

Le bleu a l’immense avantage d’inspirer confiance, c’est une couleur rassurante. Cela peut expliquer pourquoi Facebook, Twitter ou Paypal l’utilisent : ces sites utilisent des données personnelles et ils doivent donc inspirer confiance !

Il est déconseillé d’utiliser le bleu pour lancer un concept dans le domaine de l’alimentaire.

  • Le rouge attire fortement l'œil. En webdesign, c’est donc une couleur que l’on réserve aux promotions ou sur des boutons d’appels à l’action. 
  • Pour construire votre idée de marque, la couleur jaune va évoquer la joie et le loisir. Si vous travaillez dans le secteur de l’enfance, de l’éducation ou des activités de loisirs, cette couleur sera parfaite ! On peut aussi utiliser le jaune pour une marque de nourriture.
  • Enfin, le vert est une bonne solution pour évoquer la stabilité ou la croissance d’une société. Naturellement, c’est aussi une couleur que l’on associe à la protection de l’environnement, au bien-être, à l’écologie ou encore à la relaxation. Le vert foncé, lui, est plutôt une couleur choisie dans le domaine de l’argent et de la finance.

💡Notez que la couleur n'est pas perçue de la même façon par tout le monde : elle ne doit donc pas être le seul élément pour transmettre une information !

Le choix des typographies

La typographie ou police d’écriture a aussi une grande part à jouer dans la construction de votre identité de marque !

Il est important d’utiliser des typographies qui vont refléter votre entreprise et le message que vous voulez faire passer à travers votre communication.

Certaines marques font appel à des designers pour concevoir une typographie personnelle et unique. C’est un choix judicieux car il se trouve que votre marque sera encore plus identifiable parmi les autres ! 

Néanmoins, il est certain que cela représente un coût important. 

C’est pourquoi Google Font est une mine d’or pour le recherche de typographies ! De nouvelles typographies y sont ajoutées presque tous les jours. Le choix ne manque donc pas. 

Voici quelques exemples selon l’univers de marque souhaité : 

Pour un style féminin : 

Un esprit plus masculin :

Une typographie enfantine : 

Police plus classiques : 

Le typographies que l’on retrouve sur Google Font sont aussi parfaitement adaptées à l’utilisation sur un site internet. En revanche, ce n’est pas le cas pour toutes les typographies que vous pourrez télécharger sur des banques de données gratuites. 

Alors comment choisir votre typographie parmi ce choix immense que représente Google Font ?

Voici nos 3 astuces pour choisir votre typographie :

Listez 3 adjectifs qui représentent votre marque

La recherche d’adjectifs pour qualifier votre marque est importante car elle va donner le ton à votre communication. Par exemple, elle peut être : simple, classique, chaleureuse, créatrice de liens…

La typographie utilisée devra retranscrire votre adjectif principal. Par exemple, pour une marque qui prône le minimalisme ou la modernité, on pourra choisir des typographies sans empattement comme Arial ou Helvetica. Ces polices ont des bords lisses, elles montrent une image contemporaine. 

Choisir de 2 à 3 polices 

Généralement, on recommande de choisir 2 à 3 typographies maximum. Par exemple : vous utiliserez une police pour les titres et une secondaire pour les paragraphes. 

Choisir une police qui est complémentaire du logo

Enfin, plutôt que d’utiliser la même police que votre logo, vous pouvez en choisir une complémentaire pour vos titres. Ainsi, on remarquera une cohérence entre ces deux typographies. De plus, vous aurez ainsi une sorte de hiérarchie sur votre site entre la typographie de votre logo, de vos titres et de votre texte.

site internet cahier des charges typographie

Différences entre une charte graphique papier et web


Nous avons vu jusque-là les spécificités d’une charte graphique papier. Il est important de bien comprendre la différence entre une charte graphique papier et une charte graphique web. En effet, dans le second cas, il y aura plus de détails relatifs à l’interface web.

Créer une charte graphique papier 

Comme nous l'avons vu dans nos chartes graphique exemples, la charte graphique papier fera apparaître :

  • Logo ou logotype et ses déclinaisons : il reflète  l’image de votre entreprise. On retourne aussi toutes les déclinaisons possibles du logo (couleur, fond, texture…) détaillés sur différents supports : carte de visite, flyer, papier en-tête, devis, facture, affiche, véhicule. 
  • Typographie : à la fois la typographie du logo mais aussi des titres et textes si elles sont différentes. 
  • Couleurs : les associations de couleurs (voir article « comment créer son logo ») ne doivent pas être nombreuses, une suffit avec seulement 4 ou 5 couleurs complémentaires
  • Le positionnement de chaque élément (logo, titre, baseline,…) pour chaque support de communication. On doit y renseigner  les marges, le positionnement dans le document et les zones de sécurité
  • Éléments graphiques éventuels comme des icônes ou des photographies

La charte graphique web 

La charte graphique web est réalisée dans le cas d’une création de site web ou d’une refonte. Elle doit permettre à toute l’équipe projet (développeurs web, webdesigner, UX designer…) d’utiliser les mêmes codes.

On indique dans cette charte graphique :

  • Logo : son utilisation sur le site, son emplacement et sa “zone de sécurité”
  • Couleurs web : au maximum 5 couleurs qui définissent votre identité sur le web
  • Typographies web : choix de la typographie, taille des titres (H1, H2, H3, …, H6), paragraphes, citations. Mais aussi les interlignes (espace entre les lignes d’un texte) et inter lettrage (espace entre les lettres d’un titre par exemple)
  • Boutons : couleurs et affichage du texte au clic et au passage de la souris. On peut indiquer le rendu s’il y a une micro interaction (comme un changement de taille au passage sur la souris par exemple)
  • Sections : indiquer la couleur de fond sous un texte et la couleur du texte en fonction
  • Formulaires : cette fois on précise la couleur des champs du formulaire vides, en cours de remplissage, remplis et les potentiels rendus de l’affichage d’un message d’erreur
  • Icônes 
  • Tout autre élément style comme une ligne horizontale qui sépare vos titres de vos paragraphes

Alors ! Prêts à créer votre propre charte graphique avec ces exemples ?

Nous vous conseillons de faire appel à un professionnel pour la réaliser. D'ailleurs, il est souvent intéressant de confronter ses idées à un professionnel extérieur à votre entreprise. Celui-ci apportera un regard neuf et objectif.

Et puis, entre nous... Un logo fait par un passionné de son métier aura certainement un rendu plus qualitatif que le logo dessiné sur votre cahier ! 😉


Découvrez un modèle exemple de charte graphique sur ce lien.

J'ai besoin d'aide en web design pour larefonte de mon site internet

Articles en liens avec le web design de votre site internet

Retrouvez tous nos articles sur le web design de votre site internet

Inscrivez-vous à notre newsletter web design

Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.

Nos derniers articles sur le web design

Inscris-toi à notre newsletter et reçois les dernières nouveautés et astuces en lien avec le web design.

pop-up newsletter web design