mercredi 11 Mai .22

Refondre la charte graphique de mon entreprise : quand et comment la faire évoluer ?

Votre entreprise évolue et vous réfléchissez à changer votre charte graphique ? Vous vous posez la question de savoir si une seule charte graphique suffit pour l’ensemble de vos projets web et print ? Dans cet article, nous allons vous expliquer ce qu’est une charte graphique et pourquoi il est très important de bien distinguer le web du print.

Une charte graphique, qu’est-ce que c’est ?

La définition d’une charte graphique est simple : c’est un ensemble de règles qui régissent la communication graphique d’une entreprise. Elle regroupe donc l’intégralité des supports de communication, comme la carte de visite, les goodies (Print), mais aussi le logo, le site web ou encore une application mobile (Web). Avoir une charte graphique au sein d’une entreprise, c’est garantir une cohérence dans la communication entre tous les supports.

Comme vous avez pu le constater, une charte graphique peut être séparée en deux grandes parties :

Une charte graphique print, qui regroupe l’ensemble des supports de communication physique.
Une charte graphique web, qui regroupe l’ensemble des supports de communication présent sur le web.

Nous reviendrons plus tard dans cet article sur ces deux types de charte graphique.

Pour quelles raisons les entreprises refondent-elles leur charte graphique ?

Pour les entreprises de toute taille, l’identité graphique est ultra-importante car elle contribue à l’image mais aussi à la notoriété de la marque. Par exemple, si je vous parle de McDonald’s, je suis persuadé que 99% d’entre vous connaissent le logo et les couleurs dominantes.

Mais alors, quelles sont les principales raisons qui poussent les entreprises à changer leur identité graphique ?

Les cibles

Tout d’abord, abordons le plus important, les cibles. Ce sont évidemment les personnes que vous cherchez à atteindre absolument, pas tous les moyens. Cependant, ces cibles peuvent légèrement évoluer, voir totalement.

Un logo peut être très bien accueilli par un certain type de personne, beaucoup moins par d’autres. C’est pourquoi il est capital de connaître ses cibles sur le bout des doigts avant d’entamer une quelconque refonte graphique. Prenez en compte leur valeur, leur parcours mais aussi les motivations qui les pousseraient à se rendre chez vous. Ces facteurs sont à prendre en compte pour véhiculer le bon message aux bonnes personnes.

Les produits/services

Si vos cibles évoluent, c’est probablement que vos produits également. Même si une entreprise garde une côte très importante, l’évolution de ses produits peut conduire à un changement radical dans la charte graphique de l’entreprise. Ces changements vont susciter un nouvel intérêt et permettre un repositionnement par rapport aux principaux concurrents.

L’image de marque

Imaginez une marque créée il y a 50 ans avoir toujours le même logo ? Probablement que la grande majorité des gens trouveraient ça un peu « ringard », et ils auraient raison. Dans le monde contemporain, une image trop « figée » n’est pas très bon signe, à moins que ce soit un choix parfaitement assumé par votre marque.

En modifiant son logo ou sa charte graphique dans son entièreté, vous envoyez un message comme quoi vous êtes parfaitement conscient des évolutions qui se déroulent autour de vous. Vos clients sont des personnes d’aujourd’hui et non d’il y a 50 ans. En instiguant une refonte graphique, cela ne dénaturera pas votre entreprise. Cela montrera simplement que vous entamez une nouvelle dynamique, plus en phase avec les attentes d’aujourd’hui.

La charte graphique web

Une charte graphique web est un document qui définit un ensemble de règles à respecter lors de la création ou de la refonte d’un site web. L’objectif est d’être cohérent sur toutes les pages du site, quel que soit le support, mais aussi de faciliter la navigation et la compréhension du site web par les internautes.

Voici les principaux éléments que l’on retrouve dans une charte graphique web :

Les couleurs: votre marque est probablement associée à une ou plusieurs couleurs. Ces couleurs serviront à créer un univers visuel cohérent entre les supports. Il est conseillé de ne pas dépasser 2 couleurs principales.
La typographie: voici l’un des éléments principaux d’une charte graphique web. La typographie est présente partout où il y a du texte, elle est donc capitale. Le choix d’une typographie est une étape importante d’une charte graphique. Elle peut, par exemple, être avec ou sans sérif. La typo regroupe la police que vous aurez choisie, la fonte, la taille, mais aussi les couleurs. Là aussi, ne dépassez pas 2 polices différentes pour un souci de cohérence.
Les boutons : voici une particularité de la charte graphique web. Les boutons présents sur les sites web sont d’une importance capitale car ils guident les visiteurs vers là où vous souhaitez qu’ils aillent. Il peut y avoir un bouton simplement avec du texte, un bouton avec du texte et une icône ou uniquement avec une icône.

La charte graphique print

Le « Print » désigne toute conception (généralement effectuée sur ordinateur) dont la forme finale est destinée à être imprimée. On peut y trouver des brochures, des dépliants, des autocollants, des couvertures de livres, des affiches, des cartes de visite et même des t-shirts !

Comme pour le web, une charte graphique print est également un document qui vise à respecter les règles graphiques émises par l’entreprise. On y retrouve :

L’utilisation du logo: comment il peut être utilisé, quelle forme prendra-t-il et, surtout, comment il ne doit PAS être utilisé.
Les règles d’adaptation: quoi utiliser pour tel ou tel support. Par exemple, le logo avec votre slogan ne pourra peut-être pas être inclus sur votre carte de visite mais seulement sur un tee-shirt.
La typographie: comme pour la charte graphique web, la typographie est extrêmement importante pour tout ce qui est relatif au print.

Pourquoi une charte graphique print n’est pas adaptée à la refonte d’un site web ?

Vous vous posez probablement la question de savoir pourquoi ne pas simplement utiliser une charte graphique print pour la refonte de votre site web ? Nous avons déjà commencé à répondre à la question, mais voici quelques précisions.

La résolution

Vous entendrez souvent parler de résolution en utilisant deux termes : DPI (dots per inch) ou PPI (pixels per inch). Beaucoup de gens les utilisent à tort de manière interchangeable, mais il s’agit en réalité de deux choses différentes.

Le DPI entre en jeu dans le processus d’impression proprement dit : il s’agit de la densité des points d’encre imprimés sur un pouce de surface d’impression. Un équipement réglé pour imprimer à un DPI plus élevé produira une reproduction d’image de meilleure qualité. Mais, contrairement au PPI, le DPI n’a rien à voir avec la taille d’une impression. Il est lié aux capacités de l’équipement d’impression utilisé, ce que la plupart des concepteurs ne peuvent pas contrôler. En outre, le DPI n’est pas pertinent pour la conception de sites Web, car il concerne spécifiquement la façon dont l’encre est imprimée sur une surface.

Statique vs interactif

Les éléments tels que les boutons, les liens, les effets de survol de la souris, les formulaires ou les sondages, les vidéos et autres fonctions interactives doivent fonctionner correctement. Il n’y a pas de moyen plus rapide de perdre un utilisateur que lorsque quelque chose ne fonctionne pas comme prévu. La conception Web se distingue de la conception imprimée par le fait que cette qualité interactive et dynamique exige souvent une certaine forme d’effort de la part de l’utilisateur, comme cliquer, taper, etc.

La taille du support

Dans le cas du Print, la taille de la surface d’impression est l’un des facteurs les plus déterminants de la façon dont le concepteur utilisera cet espace – quels éléments de conception seront utilisés, la quantité et la taille du texte, etc. Bien qu’il existe des tailles standard pour de nombreux projets (lettres, cartes de visite, affiches, photos), les possibilités sont pratiquement illimitées, car le papier et les autres surfaces d’impression peuvent être découpés dans n’importe quelle taille ou forme.

Pour le web, la « taille » est plus abstraite. Les tailles auxquelles les créations sont visualisées ont tendance à être limitées à un certain nombre d’appareils actuellement disponibles – des écrans d’ordinateur et des ordinateurs portables aux tablettes et aux smartphones, mais ce contenu devrait idéalement s’adapter à tous les appareils. Cette adaptabilité, connue sous le nom de « responsive design« , est de plus en plus demandée à mesure que les habitudes de navigation sur le web évoluent vers plus de mobilité.

La typographie

Si vous avez déjà acheté ou téléchargé une police gratuite pour un projet de conception, vous avez probablement remarqué qu’il existe deux catégories de polices : les polices de bureau et les polices Web. En général, les polices de bureau sont concédées sous licence à un seul utilisateur qui peut les installer sur son ordinateur et les utiliser de diverses manières.

Les polices Web, quant à elles, ont été créées et optimisées spécifiquement pour être utilisées sur des sites Web, à l’aide de CSS. Les choix des designers en matière de polices Web étaient auparavant assez limités, mais des ressources comme Google Fonts (gratuit) et TypeKit (options gratuites limitées, sinon abonnement payant) sont en train de changer la donne.

Outre les ressources que les graphistes utilisent pour gérer la typographie, les approches de la disposition des caractères diffèrent selon qu’il s’agit de projets Print ou Web. Pour le print, en dehors des meilleures pratiques communes, tout est permis – l’approche dépend largement des projets spécifiques, et les designers ont un contrôle total sur l’apparence de la typographie.

Pour le web, en revanche, la priorité est donnée aux polices qui s’affichent proprement et sont faciles à lire. Les designers ont moins de contrôle sur la façon dont les polices s’affichent sur les différents appareils. C’est pourquoi le contenu Web comporte souvent de courts paragraphes de texte et un espacement généreux entre les lignes.

Désormais, à travers les quelques différences que nous venons de lister, comprenez-vous mieux pourquoi une charte graphique print ne suffit pas pour un projet web ?

DIFFÉRENCES ENTRE CHARTE GRAPHIQUE ET BRAND BOOK

Charte Graphique

La charte graphique est un document technique concentré sur l’aspect visuel de la communication d’une entreprise. Elle inclut des directives précises sur le logo, la palette de couleurs, la typographie, et d’autres éléments graphiques. Son objectif est d’assurer une

cohérence visuelle à travers tous les supports, du contenu web aux impressions.

Brand Book

Le brand book est un guide plus complet qui englobe la charte graphique tout en ajoutant des dimensions supplémentaires à l’identité de l’entreprise. Il inclut non seulement les aspects visuels comme la charte graphique, mais aussi le ton de la communication, les valeurs de l’entreprise, et la manière dont elle souhaite être perçue par son public. Le brand book sert de référence globale pour toutes les initiatives de marque, du design au marketing.

LES MEILLEURS OUTILS POUR CRéER SA CHARTE GRAPHIQUE

Adobe Creative Suite

Cette suite est essentielle pour les professionnels de la communication graphique. Avec des outils comme Photoshop et Illustrator, elle permet une création de logo précise, une gestion approfondie des couleurs, et offre une vaste gamme de typographies. Elle est idéale pour les entreprises souhaitant une charte graphique sophistiquée et un design de contenu riche en détail.

Canva

Très accessible, Canva est parfait pour les entreprises et les individus débutant dans la création graphique. Sa facilité d’utilisation et ses nombreux modèles prêts à l’emploi permettent de créer rapidement des éléments de charte graphique, des logos aux couleurs et typographies variées, adaptés particulièrement pour le contenu web.

Sketch

Spécialisé dans le design UX/UI, Sketch est un outil de choix pour les entreprises axées sur le web. Il permet une manipulation précise de la taille et de la disposition des éléments, offrant des fonctionnalités avancées pour la création de typographies et de designs adaptatifs.

GIMP

GIMP est une alternative gratuite offrant des fonctionnalités similaires à Photoshop. Il est particulièrement utile pour les petites entreprises ou les indépendants cherchant à manipuler des images, ajuster des polices et des couleurs sans investir dans des logiciels coûteux.

Figma

Figma est un outil de design collaboratif en ligne, très apprécié pour sa facilité d’utilisation et sa flexibilité. Il permet aux équipes de travailler ensemble en temps réel sur la création de chartes graphiques, intégrant des éléments tels que les logos, les couleurs, et la typographie. C’est une excellente option pour les entreprises cherchant à impliquer plusieurs intervenants dans le processus de design.

Un projet web ? Parlons-en ! Audit gratuit

Anthony Ladouce

Directeur marketing de l'agence Churchill et responsable éditorial, je me passionne pour la création de contenus à forte valeur ajoutée qui répondent aux véritables besoins de nos clients et de leur audience. Dans un univers digital en constante évolution, je m'efforce de rester en phase avec les innovations et d'anticiper les tendances, afin d'offrir des solutions éditoriales avant-gardistes.