Comment créer la charte graphique de votre site web ?

La charte graphique est primordiale pour le fonctionnement et la cohérence d’une marque. Elle détermine la toute première impression de vos visiteurs, mais elle est parfois négligée.

Les marques et les entreprises l’utilisent pour construire leur image, et véhiculer un message impactant et homogène. Pour la navigation internet, la création d’un site bien conçu, tant au niveau contenu que visuel, permet aux visiteurs d’améliorer leur expérience et d’accroître pleinement leur satisfaction.

Elle rassemble, en un seul document, les normes et règles utilisables pour votre marque, ainsi que tous les éléments constitutifs de votre identité visuelle. Cette identité graphique peut ensuite être déclinée sur toute une palette de formats imprimés ou numériques.

Comprendre les enjeux de votre marque

Préalablement à chaque étape nécessaire à la création de votre charte, il est indispensable de caractériser votre marque, afin de vous assurer que le graphisme visuel, que vous allez concevoir, correspond, en tout point, aux valeurs que vous voulez transmettre.

Pour cela, 4 notions essentiels à prendre en considération :

  • Objectif :  comprendre pourquoi la marque a été créée, s’avère indispensable pour concevoir votre identité visuelle et le message que vous voulez transmettre.
  • Vision : ce que la marque vise à être et / ou à promouvoir. Vous allez devoir réaliser un travail de projection, en tenant compte de l’activité spécifique liée à votre marque et bien sûr, de votre public cible.
  • Mission : elle concerne votre raison d’être, votre désir profond de réaliser quelque chose de très important pour vous. Quelle que soit votre secteur d’activité, vous aurez à cœur d’assurer une prestation irréprochable
  • Valeurs :  ce qui est fondamental, voire vital pour vous, ce sur quoi vous ne transigerez pas, ce qui constitue l’authenticité de votre entreprise et la distingue de toute autre.

Ce qui détermine le succès d’une marque

Mais avant de parler de la ligne de conduite à suivre, partons d’un constat. Les marques, dont nous nous souvenons du nom, ont toutes un point commun : celui d’avoir une identité visuelle forte.

Alors oui, nous allons citer encore Apple, Nike ou Netflix, parce que ce sont de bons exemples. Pour preuve, nous pourrions reconnaître leurs logos parmi des milliers. Parce que la communication de ces marques repose sur une charte graphique solide, pertinente et créative, et à fréquence récurrente. Même logo, mêmes couleurs, même typographie. Partout. Sur tous les supports.

C’est pourquoi, nous allons passer en revue les avantages d’en élaborer une. Nous détaillerons également la différence de contenu, entre une charte graphique papier et une charte graphique web.

1. Qu’est-ce qu’une charte graphique ?

Lors de la création d’une entreprise, il est nécessaire d’établir l’univers graphique de sa marque. Cet univers sera ensuite utilisé pour tous les éléments, qu’ils soient papier (cartes de visite, flyers), physiques (vitrine, stands) ou virtuels (site internet, réseaux sociaux).

Peut-être allez-vous partir sur différents projets graphiques, avant d’en sélectionner un.

Vous venez de créer votre société, ou vous y pensez. Félicitations ! La charte graphique sera l’un des éléments fondateurs de votre communication. En effet, vous devez l’imaginer comme un guide, un ensemble de règles qui explique les éléments visuels de votre marque. Ce guide fera partie des appuis stratégiques importants pour vous.

Mais comment faire ? Généralement, la charte graphique est créée par un professionnel, spécialiste dans ce domaine, tels qu’un graphiste, un directeur artistique, un webdesigner.

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

Que vous envisagiez de créer vous-même votre charte graphique, ou que vous fassiez appel à l’un de ces profils, ou tout autre agence spécialisée, nous allons d’abord vous donner quelques préceptes. Il est important de comprendre les différentes informations qui doivent figurer dans ce document, pour que piloter ce projet avec succès.

Votre identité visuelle doit se retrouver de page en page, et dans le respect de votre ligne éditoriale. Il faudra veiller à un bon équilibre entre la répartition du contenu et des illustrations, pour obtenir une mise en page harmonieuse et stratégique.

Nous allons donc définir la charte graphique comme un socle fondateur, souvent sous la forme d’un document .pdf, qui regroupe les caractéristiques de votre identité visuelle, et pourra ensuite être adaptée, et utilisée, sur vos prochains vecteurs de communication (site internet, publicité, catalogue, carte de visite).

2. Pourquoi créer une charte graphique ?

Vous vous souvenez de l’exemple de la marque à la pomme dans l’introduction ? La construction d’une marque forte commence par une identité visuelle claire, solide et utilisée partout ! Même si vous êtes une petite marque, oui.

La charte graphique reflète la personnalité de votre entreprise. Elle vous indique comment vos prospects ou clients vont vous reconnaître.

Vous imaginez, si vous utilisez une typographie différente pour chacune de vos communications ? Vous pourriez perdre vos prospects et clients… Changer trop souvent d’apparence pourrait les déconcerter !

Cela semble évident, mais c’est loin d’être le cas dans toutes les sociétés. La charte graphique est parfois négligée ou dépassée. Ne commettez pas cette erreur. Dans une entreprise où plusieurs personnes travaillent sur des documents de communication, elle est vitale. Elle permet de maintenir une cohérence graphique.

Elle informera chaque nouvel employé des règles établies. En bref, la charte graphique fait gagner du temps à toute l’équipe, et sert de base de décision pour la stratégie marketing.

3 – Mettre à jour votre charte graphique

Oui, il est très souvent nécessaire de mettre à jour l’identité de votre marque ! Mais pourquoi ?

Eh 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 maintenant dépassé.  Votre présentation éditoriale peut paraître désuète. Le design et les tendances évoluent très vite et votre marque doit suivre le rythme.

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

Qu’il s’agisse d’une mise à jour ou d’une refonte, prévoyez la synchronisation de votre site pour Pc, à l’application de votre portable.

4. Comment créer votre charte graphique ?

4.1 Intégrer le logo dans la conception de votre charte graphique

Le logo est en effet l’élément central de votre communication. C’est le symbole de votre société. Ce symbole doit en refléter la personnalité.

Il a un rôle d’image. Il suscite l’impression première : il est la porte d’entrée d’un simple prospect, ou d’un client potentiel, vers vous.

Le logo doit pouvoir être décliné sous plusieurs fonds de couleurs, et pour toutes sortes de formats. Ainsi, on retrouvera le logo sur une carte de visite, sur une plaquette commerciale, sur un site internet…  Il doit donc être : unique, simple et mémorisable !

4.2 Sélectionner les bonnes couleurs pour personnaliser votre marque

Dans un deuxième temps, la charte graphique fixe également le choix des teintes. Nous conseillons l’utilisation d’un maximum de 5 couleurs : c’est un nombre idéal pour ne pas perturber la mémorisation.

Dans la charte graphique, vous devez indiquer ces teintes, ainsi que l’utilisation du logo avec ses différentes tonalités.

On doit renseigner le code hexadécimal des couleurs avec : le nom Pantone, CMYK, RGB. Cela facilitera l’intervention des graphistes pour votre future stratégie marketing.

Notez que les professionnels de la création, comme les graphistes, les webdesigners, ou toute agence spécialisée, connaissent les couleurs et leurs significations. Cela sera utile pour orienter l’identité visuelle de votre entreprise. En voici les significations les plus courantes :

  • Le bleu est le plus souvent utilisé pour promouvoir :

–   les entreprises du secteur de la santé (médicaments)

–   le nettoyage (produits de nettoyage)

–   les transactions financières (banques)

–   les transports et les voyages (compagnies aériennes, aéroport, énergie éolienne).

Le bleu a le grand avantage d’inspirer la confiance, c’est une couleur rassurante.

Cela explique peut-être pourquoi Facebook, Twitter ou Paypal, l’ont choisie : ces sites manipulent des données personnelles et doivent donc inspirer confiance.

En revanche, il est déconseillé d’utiliser le bleu pour lancer un concept dans l’industrie alimentaire.

  • Le rouge attire fortement le regard.

En web design, c’est donc une couleur que l’on réserve aux promotions, ou encore aux boutons d’appel à l’action.

  • Le jaune évoque la joie et les loisirs.

Si vous travaillez dans le secteur de l’enfance, de l’éducation ou des loisirs, cette couleur sera parfaite. Le jaune peut également être utilisé pour une marque alimentaire.

  • Le vert est une bonne option pour évoquer la stabilité ou la croissance d’une entreprise.

Bien sûr, c’est aussi une teinte associée à la protection de l’environnement, au bien-être, à la détente.

  • Le vert foncé, quant à lui, est plutôt une couleur choisie dans le domaine de l’argent et de la finance.

Notez bien que la couleur n’est pas perçue de la même manière par tout le monde : elle ne doit donc pas être le seul critère pour véhiculer une information. A savoir également qu’il existe toute une palette de teintes dérivées, permettant d’apporter des nuances très précises.

4.3 Choisir la typographie

Elle a également un grand rôle à jouer dans la personnalisation graphique de votre marque. Il est important d’utiliser une typographie qui reflétera votre société et le message que vous souhaitez faire passer.

Certaines marques font appel à des designers, ou à une agence spécialisée, pour créer une typographie personnelle et unique. C’est un choix judicieux, car il rendra votre marque encore plus identifiable et unique.

Néanmoins, il est certain que cela représente un coût important. C’est pourquoi Google Font est une mine d’or pour la typographie, et de nouvelles polices sont ajoutées presque tous les jours.

Voici quelques exemples en fonction de l’univers que vous souhaitez :

Pour un style féminin :

  • Playfair Display
  • Crimson Text

Un esprit plus masculin :

  • Oswald
  • Anton

Une typographie enfantine :

  • Bowlby One SC
  • Sniglet

Des polices de caractères plus classiques :

  • Roboto
  • Space grotesk

Les polices trouvées sur Google Font sont également parfaitement adaptées à une utilisation sur internet. En revanche, ce n’est pas le cas de tous les caractères, que vous pouvez télécharger à partir de bases de données gratuites.

Mais comment les sélectionner parmi le choix énorme que représente Google Font ?

Voici nos 3 conseils :

  • Listez 3 adjectifs qui représentent votre marque

Trouver des adjectifs pour décrire votre marque est important, car cela va donner le ton de votre communication. Cela peut être simple, classique, chaleureux, créateur de liens…

La typographie utilisée doit refléter votre adjectif principal. Pour une marque qui prône le minimalisme ou la modernité, nous pouvons choisir des polices sans empattement comme Arial ou Helvetica. Elles ont des bords lisses, elles montrent une image contemporaine.

  • Choisissez entre 2 et 3 polices

De manière générale, il est recommandé de choisir 2 à 3 polices maximum, une principale pour les titres, et une secondaire pour les paragraphes.

  • Sélectionner une police complémentaire pour vos titres

Plutôt que d’utiliser la même que votre logo, optez pour la complémentarité. De cette manière, vous obtiendrez une cohérence typographique qui sera remarquée. De plus, vous aurez une sorte de hiérarchie sur votre site, entre la typographie de votre logo, et celle de vos titres et textes.

5. Les nuances entre une charte graphique papier et une charte graphique web

Nous avons vu les propriétés graphiques générales pour une personnalisation visuelle impactante. Il est, à présent, important de comprendre la différence entre une charte graphique papier et une charte graphique web. En effet, dans le second cas, il y aura des éléments spécifiques à l’interface web.

5.1 La charte graphique papier                   

  • Le logotype et ses déclinaisons : il reflète l’image de votre société. Vous pouvez envisager toutes les déclinaisons possibles du logo (tonalité, fond, texture…) qui seront détaillées sur différents supports : carte de visite, flyer, papier à lettres, devis, facture, affiche, véhicule.
  • La typographie : à la fois caractères du logo, mais aussi des titres et des textes s’ils sont distincts.
  • La Teinte : les associations de couleurs ne doivent pas être nombreuses, une seule suffit avec seulement 4 ou 5 coloris complémentaires.
  • Le positionnement de chaque élément, pour chaque support. Les marges, et les zones de sécurité doivent être indiqués.
  • Les représentations graphiques et illustrations éventuelles, tels que les icônes, les images ou les photographies.

5.2 La charte graphique web

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

  • Le logo : son utilisation sur le site, son emplacement et sa « zone de sécurité ».
  • Couleurs : maximum 5 qui définissent votre identité sur internet.
  • Typographie : choix de la police, taille des titres (H1, H2, H3, …, H6), des paragraphes, des citations. Mais aussi l’interligne (espace entre chaque ligne d’un texte) et l’interlettrage (espace entre les lettres d’un titre par exemple).
  • Boutons : coloris et affichage du texte au clic et au passage de la souris. Vous pouvez indiquer le rendu s’il y a une micro interaction (comme un changement de taille lors du déplacement de la souris par exemple)
  • Sections : indiquer la teinte de fond sous un texte, et la teinte du texte en fonction de celui-ci
  • Formulaires : on indique cette fois la couleur des champs de formulaire vides, en cours de remplissage, remplis et le rendu potentiel de l’affichage d’un message d’erreur.
  • Illustrations diverses, icônes, images, photographies …
  • Et tout autres éléments de style, telle qu’une ligne horizontale qui sépare vos titres de vos paragraphes.

A vous de jouer !

Comme nous l’avons vu, la charte graphique est utilisée tous les jours dans les outils marketing d’une marque ou d’une société. A travers les cartes de visite, le site web, ou encore la devanture d’un magasin.

Bien sûr, toutes les marques n’ont pas les mêmes budgets en marketing, pour s’offrir cette place au soleil, dans l’esprit de chacun. Cependant, même à votre niveau, construire une charte vous aidera à établir et à promouvoir votre marque, avec une identité visuelle forte.

Alors, prêt à créer votre propre charte à partir de ces précieux conseils apportés à chaque étape ? Et d’en assurer l’application rigoureuse ? Ou bien préférez-vous passer par un web designer ?

Il est souvent intéressant de confronter ses propres idées avec un professionnel, extérieur à votre entreprise, pour faire émerger un projet créatif et porteur. Et un logo, réalisé par un passionné de son métier, aura peut-être un retour plus qualitatif que le logo que vous avez pu dessiner sur un calepin !

9

Vous avez un projet ? Une question ? Parlons-en !

Ou réservez votre rendez-vous en ligne :

Ou réservez votre rendez-vous en ligne :