La charte graphique d’un site web doit délivrer un message clair.
Au moment de la conception de votre site internet, le webmaster doit tout faire pour satisfaire l’image de marque de votre entreprise et construire votre notoriété.
Mais comment créer une charte graphique lorsque l’on part de rien ou que l’on a aucune idée de par où commencer?
La création d’une charte graphique répond à des codes. C’est pourquoi, nous allons passer en revue avec méthode quels sont les piliers d’une bonne charte graphique.
Après avoir vu quels sont les éléments cruciaux de la création de charte graphique, nous verrons des exemples de chartes graphiques, les outils, et les constructeurs de pages et si vous n’avez pas WordPress comment disposez des bons éléments de langage lorsque vous faites appel à un web designer.
Voici tout d’abord quelques pistes de réflexion sur le web design
Exemple de charte graphique de site web épurée et moderne
Sur quoi se base une charte graphique de site internet ?
La charte graphique de votre site internet, c’est l’ensemble des symboles et des règles qui balise l’aspect visuel de votre site internet.
Cohérence
La charte graphique de votre site internet est un élément important puisqu’il véhicule votre image de marque sur la toile.
Elle se doit donc d’être cohérente avec vos autres supports de communication.
Les déclinaisons de votre charte graphique peut être présent sur différents supports :
- Cartes de visite
- Papier à en-tête
- Documents bureautiques
- Affiches
- Flyers
- Dossiers et communiqués de presse.
- Vêtements : tee-shirts, casquettes
- Accessoires : stylos, mugs, clés USB, cadeaux d’entreprises
D’après wikipedia, l’identité visuelle est “l’ensemble des éléments visuels cohérents qui permettent d’identifier une même entité au travers des différents médias de communication qu’elle émet”
Adoptez un webdesign cohérent entre vos différents supports, mais aussi entre les différentes pages de votre site web.
L’expérience utilisateur
Lors de la création des sites internet, il est important de savoir conjuguer graphisme et simplicité d’utilisation.
Le web design doit renforcer le confort de l’expérience utilisateur. L’UX s’appuie aussi bien sur l’ergonomie d’une interface que sur l’impact émotionnel ressenti.
L’expérience utilisateur profite aussi à votre référencement, car Google a mis à jour son algorithme sur l’UX le 28 mai 2020. À voir… donc. L UX Design est donc un élément à intégrer à votre stratégie marketing en fonction de votre ou vos cibles.
L’ergonomie rend plus facile la compréhension et incite à l’action en permettant à l’internaute de visiter d’autres pages de votre site internet.
La notion d’ergonomie est centrale pour améliorer l’expérience utilisateur.
L’ergonomie doit faciliter l’interaction entre l’internaute et l’interface du site web. Le webdesign proposera une information visible et lisible, où l’utilisateur trouvera le contenu adéquat pour donner satisfaction à l’utilisateur.
La charte graphique doit refléter votre potentiel de séduction
Le webdesign doit apporter une sensation de plaisir à l’internaute. Faites en sorte qu’on se souvienne de vous ! Donnez envie à vos clients !
La durée de vie des chartes graphiques
L’obsolescence est aussi visible sur Internet. Vous pouvez modifier votre webdesign tous les deux ans.
Combien de fois ai-je fermé la page d’un site internet à cause d’un design daté ? Ne laissez pas un prospect vous tourner le dos en laissant une mauvaise image de votre entreprise.
La création de charte graphique de site internet ne doit pas être négligée pour des raisons obscures.
Changez votre charte graphique web tous les 4 ou 5 ans. Pas trop souvent, il en va de votre image de marque. En effet, comme tout produit qui s’use, vous devez en changer au bout de quelques années, car il faut vivre avec son temps et suivre les dernières tendances pour rester compétitif.
charte graphique
Les différents éléments d’une charte graphique web
Le logo = Un message
Tout d’abord, le webdesign correspond à votre identité visuelle. Le logo y occupe une place centrale. Il doit apparaître en tête de page et servira également à vous reconnaître. Comme il est unique, votre identité doit délivrer un message qui vous différencie. La typographie et les couleurs de votre site internet vont sans doute en découler. Le choix de la couleur de fond, claire ou foncée, doit refléter votre secteur d’activité et ne pas nuire à votre message. Le logo, la typo et les couleurs de fond doivent vous différencier de vos concurrents.
La conception graphique d’un site web commence par un logo
Il existe des plateformes de création automatique de logos comme :
Mais je vous recommande de faire appel à un graphiste free-lance sur Behance.
Les couleurs
Les couleurs utilisées sont des choix important qui permettront aux utilisateurs de vous identifier sur la toile.
2 couleurs dominantes sont conseillées en cohérence avec vos autres supports. Deux à cinq couleurs complémentaires. Le langage des couleurs permettra de faire passer une impression : élégance, dynamisme, sobriété, accroche visuelle. Ce sont ces couleurs qui vous différencieront de la concurrence.
Exemple de variation du code couleur sur un logo
La police d’écriture
2 polices aussi maximum une pour les titres, une pour les textes. Cela permet de dynamiser l’ensemble. La typographie peut induire sur la perception de la qualité de votre travail (cheap, milieu de gamme, luxe).
Nous conseillons Roboto, Open Sans, Helvetica Neue, Proxima Nova, Avenir et Latto.
Il existe plusieurs plateformes de téléchargement de police d’écriture :
Les titres
Les titres et les sous-titres vont vous permettre de structurer votre contenu.
Votre contenu doit être lisible dès le premier coup d’œil. Préférez, pour les titres Hn, une police assez grosse et lisible et n’oubliez pas d’ajouter des marges importantes à vos titres dans votre feuille de style.
Les textes
Préférez des textes courts pour votre page d’accueil et des paragraphes pas trop long pour les autres pages.
Les éléments iconographiques
Il existe de multiples façons d’habiller un site. Cela permet de prolonger le temps de visite de l’internaute puisqu’il s’y sent bien.
Utilisez le HTML :
Illustrez vos propos avec des éléments HTML : des ombres portées, des puces, des traits de séparation, des couleurs de fonds…
Utilisez de belles photos :
Quelle place souhaitez-vous donner à vos photos parmi vos pages ? Les illustrations délivrent aussi des messages. Elles doivent instaurer un langage de proximité par rapport à votre cible. Cele permet de renforcer votre image de marque.
N’hésitez pas à privilégier les photographies si votre site est de type commercial, cela met en confiance.
N’hésitez pas à acheter sur les banques d’images (Pixabay, Pixels, Adobe stock) de belles photos pour votre site internet. Pour créer de superbes illustrations à partir d’une banque d’image variée et qualitative, je vous recommande CANVA
Utilisez les infographies :
Pour apparaître comme un expert de votre secteur d’activité dans votre domaine, apportez de la plus value à vos infographies en fourbissant des informations pertinentes.
Utilisez des vidéos :
Pour personnaliser votre image de marque et instaurer une relation confiance.
Utilisez les sliders ou un diaporama :
Pour laisser la part belle aux visuels si vous disposez de belles photos, cela renforce le plaisir de l’internaute. N’oubliez pas qu’une illustration peut servir à communiquer un message ou une idée abstraite plus rapidement qu’un long texte.
Utilisez des icônes :
Vous connaissez les icônes des réseaux sociaux. C’est désormais incontournable. Mais il y a aussi l’icône du panier, l’icône rechercher, les liens, les smartphones, les questions pour la FAQ, l’icône de validation, l’icônes des réglages, etc…
Si vous souhaitez en savoir plus, n’hésitez pas à consulter nos articles connexes sur les contenus iconographiques.
Les constructeurs de pages pour personnaliser la mise en page
Les constructeurs de pages permettent de varier à l’infini vos chartes graphiques. Ils permettent de personnaliser vos thèmes wordpress en composant à l’envie l’ordre et la disposition de vos modules au moins pour votre page d’accueil, pour vos pages stratégiques.
Parmi ces constructeurs de thème WordPress, on peut citer :
- Elementor près de 230 modèles dont une quarantaine gratuits.
- Visual Composer
- Gutenberg
- Divi de Elegant Themes avec plus de 800 mises en page de sites Web prédéfinie.
Les blocs des constructeurs de pages
Un éditeur basé sur des blocs facilite la construction de vos pages WordPress
Les différents blocs de Visual Composer pour construire vos pages web
Blocs Visual composer
Les blocs d’Elementor Pro
Blocs Elementor Pro
Les blocs des constructeurs de pages constituent la solution idéale pour réaliser une charte graphique rapidement sous WordPress
Les modules
En plus des blocs, les constructeurs de charte graphiques WordPress disposent de modules tout fait pour accélérer votre mise en page.
Un exemple de bibliothèque de modèles prêt à l’emploi pour votre charte graphique WordPress :
Exemple de template Elementor
Une charte graphique web sur mesure
Pour savoir comment réaliser une maquette de charte graphique, il est préférable de consulter mon article sur le zoning, le wire framing et le mock-up
Faites appel à un Web Designer
Une identité bien conçue vous apportera une bonne valeur marchande et la confiance de vos clients et prospects. N’oubliez pas qu’un simple coup d’œil peut transformer un visiteur en client potentiel.
Choisissez de préférence un Web Designer créatif et novateur. Il faut compter entre 100€ sur 5 euros.com et 4 000€ selon les freelances et votre objectif. Pour trouver un designer et voir ses réalisations
Un brief et la fourniture d’un logo est un préalable indispensable.
Exemple de charte graphique pour un site vitrine :
Exemple de charte graphique de site vitrine réalisée par un web designer
Exemple de charte graphique pour un site E-commerce :
Exemple de charte graphique pour un site E-commerce réalisée par un web designer
Les coûts sont plus importants mais peuvent être maîtrisés si votre priorité est de refléter les valeurs de votre marque.
Pour le brief destiné au web designer :
Il est préférable de préparer votre rendez-vous avec le web designer.
Dressez une liste de 4 ou 5 de vos concurrents pour permettre au graphiste d’identifier les caractéristiques de votre secteur d’activité. Dressez une liste de site internet que vous aimez.
- Ce genre de design général me plairait bien, mais avec cette partie en moins
- j’aime le menu de ce site
- je veux un footer comme ce site
Essayez de décrire avec des qualificatifs la teneur de votre projet web: jeune, dynamique, punchy, fun ou bien sobre, épuré, simpliste, peu coloré, etc…
Même si vous disposez d’un logo, il est primordial de faire un brainstorming afin de synthétiser quels sont les besoins de votre marque en terme d’image.
Le brief pour le graphiste devra décrier quelles sensations vous souhaitez provoquer lorsque vos clients arrivent sur votre site ?
Après avoir défini votre cible, vous pouvez imaginer quelles sont les valeurs qui correspondent aux mieux aux attentes de vos clients.
Par exemple, on trouve souvent comme valeur les concepts suivants :
- Innovation
- Expertise
- Savoir faire
- Performance
- Luxe
Après ce brief, le graphiste est capable de voir les contours de votre identité visuelle et d’imaginer une image de marque qui doit pouvoir offrir un caractère unique.
Des exemples de charte graphique web :
Faites un tour d’horizon sur Google pour connaître les codes de votre secteur d’activité. Souvent un code couleur se dégage, ce n’est souvent pas l’effet du hasard.
Les templates graphiques de WordPress :
Avec WordPress, il est assez facile de changer de template ou de thème graphique sans pour autant devoir toucher au contenu de votre site. Le webdesign est basé sur un template graphique ou thème qui est indépendante de la partie fonctionnelle du site et vous pouvez en changer sans affecter ni le contenu, ni le système de gestion.
Les thèmes wordpress offre de bons exemples de chartes graphiques de site web.
Pour vous donner une idée de ce qui se fait, voici quelques plateformes de vente en ligne de thème wordpress. Les templates sont tous récents et suivent l’air du temps en faisant la part belle aux dernières innovations en matière de design.
- ThemeForest
- Elegant Themes
- WooThemes
C’est une solution assez économique, car il existe des milliers de thèmes pour les entreprises, les associations, les magazines, les portails web qui coûtent environ 50 € et qui vont vous permettre d’habiller votre contenu même s’il faudra la personnaliser avec l’aide d’un webmaster. Cette solution « low-cost », n’évite pas le travail du webmaster pour remplir et ajuster votre contenu.
Exemples de chartes graphiques créées avec Ocean WP – site vitrine
Différents thèmes graphiques pour tout type de site :
Les thèmes wordpress constituent de bons exemple de chartes graphiques : simple à personnaliser, les combinaisons de blocs et l’ordre des sections sont paramétrables par le webmaster et il peut aussi ajouter un constructeur de mise en page de type Elementor ou autre.
Pour les sites vitrine, on donnera comme exemple de charte graphique le thème Hestia, même s’il existe de nombreux thèmes wordpress.
Exemple de charte graphique construite avec le thème wordpress Hestia et Elementor
Les exemples de charte graphique diffèrent en fonction des différents types de site :
- magazine/portail
- blog
- portfolio
- site e-commerce
Exemples de chartes graphiques wordpress pour un site e-commerce
Alors, prêt pour élaborer une charte graphique ?
Les codes de votre charte graphique sont toujours les même, c’est pourquoi WordPress dispose de module tout fait mais ils doivent correspondre à votre secteur d’activité.
Les exemples de chartes graphiques de site web sont toujours un bon point de départ pour choisir votre mise en page. C’est un moment important pour élaborer avec l’aide de votre web designer ou votre webmaster une charte qui soigne la notoriété et l’image de marque de votre société.
À travers ces exemples de chartes graphiques de site web, vous comprenez le vocabulaire essentiel afin d’élaborer une charte graphique.
