Comment faire une charte graphique pour son site Wordpress ?

Les couleurs et les polices sont l’image même d’une entreprise. comment faire une charte graphique? Découvrez tous nos conseils.
comment faire une charte graphique
Table des matières

S’il y a une chose que les plus grandes marques ont en commun, c’est bien la puissance de leur identité visuelle. Une belle mécanique visuelle qui s’imprime automatiquement dans le cerveau aussi bien des internautes que des consommateurs. Néanmoins, il faut dire que derrière cette belle image, la plupart du temps, il y a un document indispensable, et généralement, des spécialistes du domaine lui vouent un culte. Il s’agit de la charte graphique du site web.

Dans cet article, nous allons ensemble voir comment faire une charte graphique. Ce n’est pas tout, vous attendent, de nombreuses astuces et conseils pratiques afin de vous motiver à réaliser la vôtre. Même si vous partez du néant, il est possible de donner envie aux plus grands du secteur.

Tout comprendre sur la notion de charte graphique d’un site web

La charte graphique désigne un document de travail ayant plusieurs pages. Il contient des éléments essentiels de votre identité visuelle comme le logo, la typographie, les couleurs ou encore les visuels. La charte graphique comporte également les règles d’utilisation de ces différents éléments, tant sur le web que sur papier.

Son rôle premier est d’assurer une cohérence maximale dans votre communication visuelle, sans omettre de renforcer votre image de marque. Il est aussi important de noter que souvent, on confond la charte graphique avec de nombreux éléments distincts, qui sont toutefois complémentaires.

Qu’est-ce que la charte éditoriale ?

La charte éditoriale désigne un document qui contient les principes de production des contenus d’une entreprise. On peut donc y retrouver la ligne éditoriale, les règles de style, le public cible, le rubriquage, le processus de production ou encore la stratégie SEO. La charte éditoriale est principalement consacrée aux rédacteurs web.

Comprendre ce qu’est l’identité graphique

Encore appelée identité visuelle, l’identité graphique regroupe un ensemble de paramètres visuels ordonnés. Leur rôle est de repérer une même entité parmi des nombreux médias de communication qu’elle émet.

Pour synthétiser, on peut dire que les éléments de l’identité visuelle comme les couleurs, le logo ou la typographie sont montrés et mis en œuvre dans un processus d’utilisation global de la charte graphique.

Cerner la notion d’image de marque

L’image de marque représente l’identité même d’une marque. Autrement dit, la façon dont cette dernière est appréciée par un consommateur; ceci, en particulier parmi des éléments qui la composent comme le logo, les contenus textuels ou encore les couleurs.

illustration charte graphique

Qu’est-ce-qui peut motiver la création d’une charte graphique pour un site WordPress?

Le besoin de créer une charte graphique s’explique surtout selon une question de cohérence. En effet, la charte graphique permet d’harmoniser et de spécialiser l’identité visuelle de votre site web, de même que l’ensemble de vos différents supports de communication.

En regardant de plus près, c’est un processus logique et d’une grande importance. Quand vous employez un logo bien réalisé sur votre page d’accueil, c’est le même que vous aurez à utiliser sur votre page Contact. 

En gardant à l’esprit la cohérence comme priorité, vous rendez plus aisé le discernement de votre univers pour tous les visiteurs de votre site. Mieux, vous les aidez à vous identifier facilement en observant une ligne directrice éprouvée. Par ailleurs, lorsque vous entamez le changement de couleurs et de logos très souvent sur votre site WordPress, les visiteurs peuvent perdre le fil.

Prenons un exemple musical pour caricaturer la chose. C’est comme si Gims apparaissait à un concert avec ses lunettes, puis avec un masque inhabituel la fois d’après, ou encore le visage à moitié découvert une autre fois. De quoi perdre le fil sans doute, or on le sait tous, Gims ne sort jamais sans ses lunettes de soleil qui masquent soigneusement son visage. Ce code de sortie représente en fait sa charte graphique à lui. C’est ainsi que la chose doit être pour votre site aussi. Il vous faut proposer quelque chose de soigné et de constant. Du coup, la charte graphique de votre site WordPress doit retenir l’attention.

Les diverses étapes pour concevoir une charte graphique

Voyons à présent étape par étape, le moyen de créer une charte graphique pour votre site WordPress. De quoi augmenter aussi bien votre image de marque que votre aura et votre professionnalisme. Ceci, qu’importe la taille de votre entreprise ou business.

La définition de votre identité de marque

Bien avant de vous jeter dans le grand bain, vous devez faire un travail préalable. Il s’agit de consacrer une partie de votre emploi du temps pour penser au message que vous désirez faire passer par le biais de votre charte graphique.

C’est une étape qui va beaucoup vous aider à affiner votre projet et à mieux appréhender les étapes suivantes. Ainsi, vous devez faire un point de plusieurs éléments de sorte à les définir en profondeur. Il s’agit des objectifs que vous vous êtes fixés à travers la création d’une charte graphique pour votre site web WordPress.

En un second temps, il s’agira des valeurs, autrement dit, ce qui guide l’activité et la croissance de votre entreprise et donc votre site WordPress. Comme possibles orientations, il peut s’agir de la performance, du succès, de l’innovation ou encore du savoir-faire.

Vous devez aussi définir votre personnalité. A ce niveau, il s’agira de dire comment et pourquoi on vous reconnaît. Vous pouvez lister quelques adjectifs qui renvoient le plus fidèlement possible, à votre définition. Autre chose que vous devez intégrer, votre mission.

Hormis ces différents éléments, vous devez aussi, dans un second temps, penser à votre public cible. Il s’agit là de votre audience ou dans un langage marketing, de persona, qui désigne une ébauche fictive de votre client idéal.

Il faut l’avouer, ce n’est pas aisé de mûrir la réflexion aussi bien sur soi-même que sur ses créations personnelles. En effet, ce n’est pas toujours aisé de critiquer son propre travail ou d’avoir le recul exigé pour maîtriser tous les rouages de son activité. Une séance de remue-méninge n’est jamais superflue et peut avoir son impact pour vous aider à atteindre bien des objectifs.

Sélectionner la typographie de votre charte graphique

Abordant la question de la typographie de façon succincte, il s’agit de l’ensemble des caractères employés sur votre site web WordPress au niveau de vos textes. Aussi parle-t-on très fréquemment par extension, de police de caractère ou de police d’écriture.

Dans la plupart des cas, il est recommandé de ne pas utiliser plus de deux à trois polices d’écriture sur votre site Web WordPress. Vous pouvez par exemple en retenir une pour vos différents titres et une autre pour votre corps de texte afin de rester dans la cohérence. Certaines classes de police ont aussi la réputation d’être lisibles sur le web.

Vous pourrez donc les privilégier au détriment d’autres. Il est question des polices sans empattement, en opposition aux polices avec empattement. C’est donc un paramètre dont il faut tenir compte au cours de l’élaboration de la charte graphique de votre site web WordPress.

La taille de police comme élément important

Au-delà de cet élément, la taille de votre police joue aussi un rôle important. Sur écran, il est conseillé d’utiliser au moins du 14 pixels. Une police sans empattement aussi beau qu’il soit à l’œil ne servira pas vraiment si elle s’affiche en minuscule.

La police adéquate est celle qui se greffe à votre image de marque ainsi qu’à votre univers graphique. Chaque police conserve donc sa personnalité propre qui pourrait ne pas convenir à votre besoin. Afin de dégoter la police d’écriture qu’il vous faut, plusieurs sites se prêtent à l’exercice.

Vous pouvez chercher sur Google Fonts, qui met à disposition plus de 1 000 polices gratuitement. De son côté, MyFonts offre au-delà plus de 130 000 polices, qui sont soit gratuites soit payantes. Quant à DaFont, il met à disposition de ceux qui en ont besoin, des centaines de polices créatives.

Toutefois, il s’agit seulement de polices pour un usage personnel. Aussi avez-vous via Font Squirrel, des centaines de polices libres de droit, même pour un usage commercial. Dès que vous procédez à un premier nettoyage il est primordial de sélectionner des polices qui sont complémentaires. Ceci, afin de ne pas tout détruire visuellement et garder une lisibilité maximale.

Dans le but de marier comme il se doit vos polices entre elles, il existe des ressources très utiles. Il s’agit de FontPair, Fontjoy, Typewolf, Typespiration et Google Fonts.

Des touches alignées formant le mot "principles"

Les éléments présents dans la typographie dans votre charte graphique

Quand on aborde la charte graphique de votre site web WordPress, on présente souvent de nombreuses désinences de votre typographie comme Regular, Gras, Italique ainsi que leur cas d’usage. Vous devez présenter aussi la typographie du logo s’il en dispose et celle disponible sur votre site web.  Aussi devrez-vous montrer l’alignement et l’espacement de la typographie.

L’ajout d’une typographie sur WordPress

Il est aussi recommandé d’ajouter vos polices d’écriture sur votre site WordPress. C’est un exercice qui n’est pas aisé à faire. Dans la pratique, vous pouvez avoir un thème qui s’arrime parfaitement aux polices. De quoi vous simplifier au mieux la vie.

En adoptant à titre d’exemple le thème Astra, vous disposez de l’ensemble des polices provenant de la bibliothèque Google Fonts. Afin de les activer, chaque thème requiert ses propres réglages. Vous pouvez donc le faire soit à travers l’Outil de personnalisation, soit par une interface de réglages spécialement conçue.

Lorsque le choix est faible et ne vous satisfait pas, vous pouvez intégrer ces polices dans le code de votre site WordPress. A vos débuts, il est recommandé d’employer une extension. Option plus simple et moins risquée, elle pourrait parfaitement vous convenir. Lorsque vous ajouter des polices d’écriture sur votre site WordPress, il est recommandé de vous arrêter à deux au plus. Leur emploi déclenche des requêtes supplémentaires susceptibles de ralentir le temps de chargement de vos pages. Pour un débutant, il n’est pas non plus aisé de combiner au-delà de deux polices.

L’étape de la création du logo pour la charte graphique de votre site web WordPress

Le logo représente graphiquement la marque d’une entreprise. Il est d’une importance capitale puisque c’est essentiellement à travers le logo que la marque est en premier lieu identifiée. En plus du site web, gardez à l’esprit que le logo peut être utilisé sur l’ensemble de vos éléments de communication.

Les flyers, les plaquettes commerciales ou encore les cartes de visite pour ne citer que ceux-là. Il faut donc y mettre la plus grande attention. Quelques qualités se détachent s’agissant d’un logo réussi. Votre logo réussi doit être aisément reconnaissable et mémorisable.

Ainsi, optez pour un logo simple, sobre et concis, capable de s’adapter à tout type de support, tant sur papier que sur site web. Aussi le logo doit-il être lisible. Sans expertise en web design, concevoir votre logo sera une tâche ardue.

Toutefois, des sites en ligne proposent gratuitement leurs services. C’est le cas entre autres de Logogenie,  de Canva, de Logaster ou encore de Logomaker. Lorsque vous recherchez un résultat professionnel et unique, faites recours aux services d’un professionnel.

Ce dernier peut être spécialiste en graphisme et/ou en webdesign. Vous en trouverez sans doute un par le biais d’une agence ou en contactant un freelance. Lorsque votre logo est créé, il est essentiel de l’intégrer dans votre charte graphique.

Afin d’ajouter votre logo intégré sur votre charte graphique, il faudra le télécharger sur votre site WordPress. L’outil de personnalisation peut servir en faisant « apparence > personnaliser > identité du site.

L’étape de la définition des couleurs

L’étape du logo bouclé, cap sur une autre et non des moindres, les couleurs. Le choix ne doit pas se faire sur un coup de tête ou juste parce que vous aimez particulièrement la couleur. Restez cohérent dans votre choix car qui dit couleur dit signification.

Les couleurs doivent donc être choisies afin de passer au mieux le message qui est le vôtre. Votre choix de couleur doit donc être fait avec classe et sérieux sans pour autant de fier à tel ou tel code préétabli. Pour le choix de vos couleurs, retenez-en au plus 3 ou 4.

Celle primaire à voir dans votre logo, deux secondaires et possiblement une couleur complémentaire. Afin de bien mélanger les diverses couleurs entre elles, vous pouvez utiliser Color Hunt, Paletton, Roue chromatique d’Adobe ou encore Material Palette.

L’étape de la création de vos visuels

Il est important de présenter vos orientations en matière de visuels. Cela permet d’illustrer tant les idées que les concepts que vous voulez transmettre. Vous pouvez donc retenir des exemples d’images qui vont avec vos attentes.

Le processus reste le même pour les icônes, qui doivent être parfaitement incrustées dans l’univers de couleurs qui sera le vôtre. S’agissant des photos, optez pour vos propres clichés de préférence.

Maquette d'une charte graphique affichée sur un écran d'ordinateur. Des exemples de palettes de couleurs sont disposés sur le bureau

L’étape de la mise en situation et des applications

Afin d’avoir une idée plus globale, il est possible de proposer des déclinaisons des composantes de votre charte sur de nombreux supports. Il s’agit de documents bureautiques, de cartes de visites, de feuilles volantes, d’affiches verticales comme horizontales, de présentations PowerPoint, de dépliants ou panneaux d’informations.

Des dossiers et communiqués de presse ou encore des tee-shirts, casquettes et mugs sont aussi des éléments qui peuvent vous permettre d’avoir une idée claire. Puisque vous avez toutes les informations et éléments requis côté contenu, il vous faudra alors mettre en forme toutes ces informations.

Comme logiciel ou outil, vous pouvez avoir recours aux InDesign et Illustrator, des essentiels de la suite Adobe payants. Aussi pouvez-vous adopter Frontify ou encore aller sur des alternatives gratuites. Scribus, Lucidpress et Canva peuvent dans ce registre vous aider. Concernant la conception et la mise en forme de votre charte graphique, optez pour des sites pro.

C’est le cas de Behance et Dribble, qui disposent d’exemples très aboutis. Concernant la longueur, rien n’est figé pour une charte graphique. Souvent en format PDF, elle peut abriter entre dix et cent pages, selon vos besoins et ce que vous voulez y intégrer. Gardez à l’esprit que le caractère concis et simple de votre travail donnera un meilleur rendu et agissez en conséquence.

Comment faire une charte graphique : en résumé

Au final, vous savez désormais comment créer la charte graphique pour un site WordPress. Vous connaissez les différentes composantes essentielles comme la typographie, le logo ou encore les couleurs. Vous pouvez donc créer une charte graphique digne de foi et de grande qualité, même si vous êtes novice dans le monde du graphisme et du webdesign. Cela vous prendra toutefois du temps. Lorsque vous ne disposez pas d’assez de temps et que vous aspirez à un travail brillant à tous points de vue, vous pouvez opter pour les services d’un spécialiste graphiste ou webdesigner. Disponible en agence comme en freelance, le coût qu’il va vous facturer sera sans doute fonction du travail que vous lui aurez demandé.

L’agence Wordpress qui conçoit et construit des sites de haute qualité et durables.