Site icon WPMarmite

Comment créer une charte graphique de site web mémorable ?

Apple, Amazon, Mercedes ou encore Nike. Toutes ces grandes marques ont au moins un point commun : elles disposent d’une identité visuelle très forte qui les rend reconnaissables entre mille.

Prenez-leur logo, par exemple. Je mets ma main au feu si vous ne le visualisez pas dans la seconde pour chacune d’entre-elles. Alors, est-ce que je me brûle ?

Je parie que ma mimine n’a pas trop chauffé

Derrière toute cette belle mécanique visuelle qui s’imprime mécaniquement dans le cerveau des consommateurs et des internautes, on retrouve très souvent un document incontournable.

Un document que les graphistes et webdesigners n’hésitent pas parfois à qualifier de “Bible”. Hum, rien que ça. Doux Jésus.

Ce document, c’est la charte graphique d’un site web. Dans cet article, vous allez apprendre comment en créer une aux petits oignons, grâce à un tutoriel étape par étape rempli d’astuces et de conseils pratiques.

L’idée ? Vous mettre en action immédiatement sans vous poser de questions. L’objectif ? En mettre plein les mirettes à vos visiteurs, comme Apple et consorts. Et croyez-moi, c’est possible, même si vous partez de zéro. Suivez le guide.

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Et pour savoir comment créer un site WordPress de A à Z, consultez notre guide complet.

Qu’est-ce qu’une charte graphique de site web ?

Une charte graphique est un document de travail de plusieurs pages qui comporte les éléments majeurs de votre identité visuelle (logo, couleurs, typographie, visuels etc), ainsi que leurs règles d’utilisation sur le web et sur papier.

Son objectif principal consiste à garantir une cohérence optimale dans votre communication visuelle, tout en solidifiant votre image de marque. 

On a tendance à la confondre avec plusieurs éléments distincts, bien que complémentaires : 

J’espère que c’est un peu plus clair pour vous. Afin que cela soit plus concret, je vous ai déniché quelques exemples de chartes graphiques en ligne trouvées au gré de mes recherches sur le web (merci à ce site qui en recense quelques-unes, notamment des chartes graphiques de site web en PDF). 

Ces exemples datent un peu, en particulier parce que les marques sont peu enclines à diffuser et à rendre publiques leurs créations.

Mais peu importe, finalement : l’idée ici est de vous livrer un premier aperçu. On va ensuite développer dans le détail les éléments constitutifs d’une charte graphique web qui dépote.

En attendant, voici déjà quelques petites bribes :

On peut aussi penser aux design systems (Systèmes de designs) de grandes entreprises comme Google, par exemple.

Mais dans ce cas précis, on va bien souvent encore plus loin dans le détail qu’avec une charte graphique, puisque les composants, par exemple, sont même détaillés.

Pourquoi réaliser une charte graphique ?

Après cette mise en bouche, une question vous brûle peut-être les lèvres : au fait, pourquoi créer une charte graphique ?

Tout est essentiellement une question de “cohérence”, comme je vous l’ai expliqué au début de cet article. Une charte graphique permet d’homogénéiser et de professionnaliser l’identité visuelle de votre site web, ainsi que de tous vos supports de communication.

Si vous vous y penchez de plus près, c’est logique et pertinent : si vous utilisez un logo bien défini sur votre page d’accueil, vous n’allez pas utiliser un autre logo différent sur votre page Contact. Cela n’aurait pas de sens.

En restant cohérent – j’insiste sur ce mot -, vous facilitez la compréhension de votre univers pour les visiteurs de votre site, et les aidez à vous reconnaître aisément en suivant une ligne directrice claire.

Parce que si vous commencez à changer de couleurs et de logo tous les quatre matins sur votre site web, vos visiteurs risquent fort d’être déboussolés.

Prenons un exemple musical, pour imager la chose. Imaginez si les Daft Punk étaient casqués à un concert, puis déguisés en canards au concert suivant, et enfin habillés en cowboys au concert d’après : on s’y perdrait, non ?

Pour rester cohérents, les Daft Punk ne sortent jamais sans leurs masques casques. Disons que ce code vestimentaire constitue leur charte graphique à eux. Eh bien cela doit être la même chose sur votre site. Vous devez proposer quelque chose d’uniforme, grâce à une charte graphique de site web qui claque

Pour savoir comment procéder, direction la partie suivante. Vous allez apprendre à créer une charte graphique au top étape par étape, en partant de zéro. 

Après ça, vous allez voir : votre image de marque, votre professionnalisme et votre notoriété vont s’en retrouver grandies. Et ce, que vous soyez une grande entreprise ou un entrepreneur individuel.

En fait, n’importe qui peut tirer profit d’une charte graphique !

Formez-vous à WordPress en 3 mois

Apprenez à concevoir des sites WordPress sécurisés, rapides et conformes aux obligations légales avec la formation à distance la plus généreuse du marché (éligible au CPF).

Réaliser la charte graphique de votre site web en 6 étapes

Étape 1 : Définir votre identité de marque

Avant de vous lancer frais et sémillant dans le grand bain, dégagez d’abord un peu de temps pour réfléchir au message que vous souhaitez diffuser au travers de votre charte graphique. 

Vous allez voir, cela va grandement vous aider pour y voir plus clair dans la réalisation des étapes suivantes. 

Faites d’abord le point sur les éléments suivants, en tentant de les détailler au maximum : 

A côté de cela, dans un second temps, n’oubliez pas de réfléchir à votre public cible. On parle aussi d’audience, ou encore, dans un jargon marketing, de persona. Un persona est une représentation fictive de votre client idéal. 

Pour bâtir vos personas, HubSpot propose un outil dédié fort pratique, si cela vous intéresse. 

Évidemment, il n’est jamais facile de réfléchir sur soi-même et ses propres créations. On a bien souvent du mal à se montrer critique et avoir le recul nécessaire pour saisir tous les rouages de notre activité.

Si vous séchez, n’hésitez pas à faire appel aux autres (un client cible, une personne de votre entourage etc.). Une petite séance de brainstorming n’est jamais de trop et peut vous aider à débloquer pas mal de situations à l’horizon bouché. 

C’est bon pour vous pour cette première étape ? Super ! On attaque tout de suite la phase 2 avec un premier élément majeur de votre charte graphique : la typographie. 

Étape 2 : Choisir une typographie

Présentation de la typographie et règles de base 

En simplifiant grandement, car le terme recouvre plusieurs champs d’application, la typographie désigne l’ensemble des caractères utilisés sur votre site web au niveau de vos textes.

Par extension, on parle aussi très souvent de police d’écriture, ou de police de caractère. 

De façon générale, n’utilisez pas plus de 2 à 3 polices d’écriture sur votre site web. Par exemple, une pour vos titres, et une autre pour votre corps de texte. Rappelez-vous la sacro-sainte règle de cohérence ;-).

Il faut aussi savoir que certaines familles de polices sont réputées plus lisibles sur le web. Il s’agit des polices sans serif (sans empattement), par opposition aux polices serif (avec empattement) :

Une police avec empattement, bien visible par exemple sur la lettre “n”.
Deux polices sans empattement

Ce critère est à prendre compte lors de l’élaboration de la charte graphique de votre site web.

Après la taille de votre police y est pour beaucoup aussi (on recommande au moins du 14 pixels sur écran). Vous aurez beau utiliser une police sans serif agréable à l’oeil, si elle s’affiche en minuscule (ex : 10 px), cela ne servira pas à grand-chose…

Une police adéquate sera celle qui collera à votre image de marque et à votre univers graphique.

Comme vous allez le voir juste en-dessous, chacune d’entre-elle a sa propre personnalité qui ne sera pas toujours adaptée à votre situation.

Où et comment choisir une typographie pour la charte graphique de votre site web ?

Il existe plusieurs sites pour trouver la police d’écriture de vos rêves :

Après avoir effectué un premier débroussaillage, il sera important de choisir des polices complémentaires, pour ne pas tout gâcher visuellement et conserver une lisibilité optimale.

Ces quelques ressources vous seront d’une aide précieuse pour marier au mieux vos polices entre-elles : 

La typographie dans votre charte graphique 

Au niveau de la charte graphique de votre site web, il est de coutume de présenter :

Un extrait du passage consacré à la typographie sur la charte graphique web d’Arte

Comment ajouter une typographie sur WordPress ?

Présence de vos polices d’écriture dans la charte graphique de votre site web : check. Pour être raccord, pensez à ajouter ces polices sur votre site WordPress. 

Ca va de soi, je sais, mais ce n’est pas toujours évident à mettre en oeuvre. En pratique, il est possible que le thème que vous utilisez intègre des polices pour vous faciliter la vie. Par exemple, le thème Astra vous met à disposition toutes les polices issues de la bibliothèque Google Fonts.

Chaque thème a ensuite ses propres réglages pour les activer. En gros, cela se passe soit via l’Outil de personnalisation (c’est le cas d’Astra ou GeneratePress), soit via une interface de réglages personnalisée.

Si jamais le choix est très faible et ne vous convient pas, il est toujours possible de mettre les mains dans le cambouis afin d’intégrer ces polices dans le code de votre site WordPress

Si vous débutez, utiliser une extension sera plus simple et moins risqué. Use Any Font pourrait par exemple faire l’affaire.

Soyez vigilants lorsque vous ajoutez des polices d’écriture sur votre site WP. Cantonnez-vous à 2 polices au maximum car leur utilisation déclenche des requêtes additionnelles qui peuvent ralentir le temps de chargement de vos pages. De plus, combiner plus de 2 polices n’est pas une tâche facile pour un débutant.

Étape 3 : Créer un logo pour la charte graphique de votre site web

Un bon logo, c’est quoi ?

Un logo ou logotype est la représentation graphique d’une marque et d’une entreprise. Son importance est capitale car c’est souvent à travers lui que l’on identifie prioritairement une marque.

Par exemple, si on me dit Nike, je ne sais pas vous, mais moi je pense immédiatement à la fameuse virgule.

Si je vous dis Apple, je parie que vous allez visualiser la célèbre pomme associée à la marque.

Enfin, en pensant à WPMarmite, vous visualisez immédiatement une… marmite, n’est-ce pas 😉 ?

En dehors de votre site web, n’oubliez pas aussi que votre logo est susceptible d’être utilisé sur tous vos éléments de communication : cartes de visites, plaquettes commerciales, flyers etc. 

Vous devez donc le concevoir avec le plus grand soin. Pour qu’il soit réussi, il doit réunir plusieurs qualités : 

Où et comment créer un logo ?

Concevoir un logo qui claque pour la charte graphique de votre site web n’a rien d’évident, a fortiori si vous n’avez aucune connaissance en webdesign.

Pour vous aider, il existe plusieurs sites en ligne gratuits qui vous prendront par la main : 

Pas mal pour commencer sans débourser trop d’argent, mais difficile de vous démarquer avec ce genre de logos. Ils sont souvent froids, impersonnels et peu créatifs.

Pour un rendu unique et professionnel, je vous conseille plutôt de vous tourner vers un spécialiste en graphisme et/ou webdesign.

Vous pouvez soit passer par une agence, soit contracter les services d’un freelance (souvent moins onéreux) en passant par une plateforme dédiée comme Malt, Codeur etc.

Logo et charte graphique : on parle de quoi, au juste ?

Une fois votre logo créé, n’oubliez pas de l’intégrer dans votre charte graphique. Vous pouvez y préciser les éléments suivants : 

Le logotype sur la charte graphique d’ERDF

Comment ajouter votre logo sur WordPress ?

Une fois votre nouveau logo créé et intégré sur votre charte graphique, n’oubliez pas de le télécharger sur votre site WordPress.

Pour cela, utilisez l’Outil de personnalisation (Customizer, en anglais) en passant par le menu Apparence > Personnaliser > Identité du site.

Personnalisation du logo sur mon site web

Et tant qu’à faire, au passage, ajoutez une favicon (icône du site, que vous retrouvez en illustration sur l’onglet de votre navigateur).

Étape 4 : Définir des couleurs

Après le logo, il est désormais temps de vous arrêter sur un autre élément de taille à faire figurer dans votre charte graphique : les couleurs. 

Là encore, leur choix ne doit pas se faire par-dessus la jambe. Ce n’est pas parce que vous adorez le rose bonbon que vous devez obligatoirement tartiner votre site web de cette couleur.

Cela peut fonctionner dans certains cas de figure, mais je vous conseille plutôt de miser sur la cohérence – encore elle ! – plutôt que sur votre amour frénétique du rose.

Pourquoi le choix de la raison ? Simplement parce que les couleurs ont une signification et doivent servir votre propos pour illustrer au mieux le message que vous souhaitez véhiculer

Par exemple, on associe le rouge à l’amour, à la passion, au pouvoir ou encore au sang. On le retrouve souvent dans plusieurs domaines spécifiques : la gastronomie, la restauration, le sport ou encore l’humanitaire.

Mais attention : le rouge est aussi associé aux messages d’erreur lorsque l’on parle de conventions web !

Le site web du Syndicat des vins des Côtes-du-Rhône

La couleur verte est quant à elle associée à la nature, à l’écologie, aux plantes, à la croissance, ou encore au partage. Il n’est donc pas innocent de voir cette teinte sur des sites en lien avec la nature, le voyage et l’environnement.

Le site web de Greenpeace France

Ne prenez pas non plus ces deux exemples comme une règle à appliquer absolument. Si votre activité tourne autour de la gastronomie, vous n’êtes pas obligé d’utiliser du rouge un peu partout.

C’est bien de l’avoir en tête afin de ne pas commettre d’impair, mais il est tout aussi crucial de bien mixer les couleurs que vous allez choisir ensemble. 

Où et comment choisir vos couleurs ?

Pour vous aider dans cette tâche, limitez d’abord à 3 ou 4 le nombre de couleurs que vous allez utiliser :

Cela vous semble peut-être peu et frustrant, mais mieux vaut ne pas trop vous enflammer à ce niveau-là, sous peine de vous retrouver avec un site à l’effet sapin de Noël, comme vous l’explique chef Alex dans cette vidéo :

Pour mixer correctement ces couleurs entre elles, j’ai ce qu’il vous faut dans ma hotte. Allez donc jeter un oeil aux ressources suivantes : 

Avec cette poignée d’outils gratuits, l’association des teintes n’aura plus aucun secret pour vous.

Petite astuce supplémentaire, si vous êtes en manque d’inspiration : consultez ce que proposent vos concurrents, sans oublier de faire un tour sur Pinterest.

On y trouve souvent pas mal de pépites. En plus, Pinterest peut vous aider à attirer plus de trafic, comme on vous l’explique dans cet article.

Que doit contenir la charte graphique de votre site web au niveau des couleurs ?

Une fois votre palette prête à l’emploi, sortez vos pinceaux et dégainez votre charte graphique. Faites-y figurer les références suivantes : 

Les couleurs sur la charte de la ville de Lille

Par ailleurs, rien ne vous empêche de lister les bonnes et mauvaises pratiques d’utilisation de vos couleurs, illustrations visuelles à l’appui. 

Où et comment les ajouter sur WordPress ?

Vous connaissez la musique, désormais. Reste maintenant à ajouter vos sublimes couleurs sur WordPress. 

Là encore, il existe plusieurs façons de faire en fonction des extensions et du thème que vous utilisez : 

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Étape 5 : Soigner vos visuels

Si vous ne retrouverez pas cette partie dans toutes les chartes graphiques, présenter vos directives en matière de visuels (photos, illustrations, icônes) reste quand même intéressant pour illustrer les idées et concepts que vous souhaitez transmettre.

La charte de l’université de Lorraine précise par exemple que ses reportages photographiques doivent “montrer de l’HUMAIN en situation de dialogue, d’échanges, de complicité, de travail, d’entraide, d’apprentissage, d’explication, de soutien, d’équipe…donc jamais seul ou isolé.”

Vous pouvez aussi préciser les règles en matière de cadrage, d’arrière-plan, de luminosité, ainsi que les écueils à éviter (ex : éviter d’utiliser des filtres).

Présenter des exemples d’images qui collent à vos attentes sera évidemment bienvenu. La gymnastique est la même pour les icônes, qui devront se fondre dans l’univers de couleurs que vous aurez arrêté.

Vous pouvez soit les créer vous-même, soit vous en procurer sur des sites dédiés comme Iconfinder, Flaticon ou The Noun Project. Attention cependant aux règles d’utilisation et aux droits d’auteurs. Toutes ces icônes ne sont pas forcément libres de droits.

Pour les photos, privilégiez vos propres clichés pour plus d’originalité. Si vous êtes à cours de provision, vous pouvez vous fournir sur des banques d’images libres de droit. On vous en a recensé une dizaine dans cet article.

Comment on fait sur WordPress ?

Et pour finir cette partie, un petit crochet par WordPress ne fait pas de mal. Pour ajouter vos photos sur votre site, direction la Médiathèque. Rien de bien savant, vous en conviendrez.

Pensez quand même à donner un nom explicite à votre fichier et à renseigner la balise alt. Et bien sûr, optimisez le poids de vos images, par exemple grâce à l’extension Imagify

Enfin, voici deux plugins sympathiques pour vous aider à classer vos fichiers dans des dossiers : HappyFiles et FileBird. Très pratique lorsque vous vous retrouvez avec des centaines de photos en stock. 

Logo, typographie, couleurs et visuels : vous disposez de tout l’attirail pour réaliser une charte graphique qui cartonne. Si vous utilisez d’autres supports de communication que votre site web, il s’avère aussi utile de les présenter dans votre document de travail.

Je vous en touche trois mots juste en-dessous, pour être encore plus exhaustif.

Étape 6 : La mise en situation (et applications)

Pour un aperçu encore plus global, vous pouvez également présenter des déclinaisons des éléments visuels de votre charte sur différents supports : 

Un exemple d’application sur une carte de visite dans la charte graphique de l’Université de Bordeaux

Quel outil/logiciel utiliser pour créer une charte graphique ?

Côté contenu de votre charte, vous êtes normalement béton, maintenant. Sur votre route se dresse un dernier obstacle : mettre en forme toute cette quantité d’informations. 

Et laissez-moi deviner : vous vous demandez peut-être quel outil/logiciel utiliser ? Vous avez bien raison et rassurez-vous, il y a de quoi faire. Pêle-mêle, vous pouvez vous servir : 

Pour la conception et la mise en forme de votre charte, n’hésitez pas à flâner sur des sites spécialisés comme Behance et Dribble, qui regorgent d’exemples très réussis. 

Il n’existe pas de longueur préétablie pour une charte graphique. Elle se présente généralement au format PDF et peut comporter d’une dizaine à une centaine de pages. Tout dépend de vos besoins et de ce que vous souhaitez y mettre à l’intérieur, en fait. En règle générale, préférez la concision et la simplicité au moment de vous coller à cet exercice.

Création d’une charte graphique : le débrief

Tout au long de cet article, vous avez découvert qu’elle se compose de plusieurs éléments majeurs comme le logo, les couleurs, ou encore la typographie.

Même si vous débutez et que vos connaissances en webdesign et en graphisme sont limitées, vous avez vu qu’il est à votre portée de créer une charte qui se respecte. Par contre, il est indéniable que cela vous coûtera un investissement conséquent en temps.

Si le temps est une denrée rare pour vous et que vous recherchez un résultat encore plus professionnel, vous pouvez aussi vous attacher les services d’un graphiste ou d’un webdesigner (en agence ou en freelance).

Le tarif va essentiellement dépendre de la taille du projet et du temps passé à concevoir votre charte. Les prix sur le marché sont très disparates et il est très délicat de vous donner une fourchette précise. 

Cela dépend de l’historique de l’entreprise, de la concurrence etc. Il est aussi difficile de fournir uniquement une charte “graphique” sans avoir besoin d’enquêter sur l’entreprise, le produit, l’UX du produit, du site, etc.

Si l’on devait se mouiller un peu (à prendre avec des pincettes), on dirait qu’il faudrait compter en moyenne entre 700€ et 4 000€ pour une charte “classique” conçue par un freelance.

Désormais, la parole est à vous. Disposez-vous d’une charte graphique ? Ou peut-être comptez-vous vous y mettre après la lecture de cet article ?

Faites-nous vos retours et partagez aux autres lecteurs de WPMarmite d’éventuelles suggestions d’amélioration.

Quitter la version mobile