Conception et exemples de charte graphique

1. 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. ⬇️

1.1 Définition d'une charte graphique

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 soit par :

• 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).

1.2 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 ! 

1.3 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.

2. 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.

2.1 Slack

2.2 Starbucks

2.3 Deezer

2.4 French Tech Grande Provence

3. 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. Nous vous détaillons chaque partie juste en dessous !

3.1 Bâtir sa charte graphique à partir du logo

Le logo est en effet l’élément central de votre communication. C’est à partir de lui que l’on construit une identité graphique.

Votre logo ou logotype se doit de refléter la personnalité de votre entreprise. Il a un rôle d’image : c’est la porte d’entrée pour un prospect ou un client vers vous.

Le logo doit pouvoir se décliner sous plusieurs fonds de couleurs ou sur des formats différents.

Ainsi, on va retrouver le logo sur une carte de visite, sur une plaquette commerciale, sur un site internet… Et sur l’ensemble des éléments de communication.

Il se doit donc d’être : unique, simple et mémorable !

Vous connaissez les étapes importantes pour créer un logo ?

3.2 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.

Voici la signification d'autres couleurs :

• 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 ! Venez découvrir la signification des couleurs dans l'article design et couleur, duo de choc.

3.3 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 : 

• Playfair Display
• Crimson Text

Un esprit plus masculin :

• Oswald
• Anton

Une typographie enfantine : 

• Bowlby One SC
• Sniglet

Police plus classiques : 

• Roboto
• Space grotesk

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 ?

4. 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.

4.1 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

4.2 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 ! 😉