Table des matières
Que vous soyez un spécialiste du marketing cherchant à créer un contenu captivant, un concepteur en quête d’inspiration ou simplement un curieux intéressé par le pouvoir des visuels, vous avez certainement remarqué qui la charte graphique est un élément clé d’une communication visuelle réussie. Elle représente l’identité visuelle d’un site web et joue un rôle crucial dans la création d’une expérience utilisateur cohérente et positive.
La durée d’attention d’une personne moyenne étant de plus en plus courte, il est crucial de captiver et d’engager votre public en quelques secondes avec une communication visuelle attrayante. 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?
Qu’il s’agisse d’infographies accrocheuses, d’illustrations étonnantes ou de photographies à couper le souffle, les visuels ont la capacité de transmettre des idées et des émotions d’une manière inspirante.
Dans cet article, nous allons donc explorer les éléments de langage du Webdesign, des exemples de charte graphique qui illustrent le véritable potentiel de la communication visuelle et passer en revue avec méthode quels sont les piliers d’une bonne charte graphique.
Exemple de charte graphique de site web épurée et moderne
L’importance de la cohérence :
La charte graphique de votre site internet doit ê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 »
Il convient donc d’adopter un Webdesign cohérent avec vos différents supports, mais aussi entre les différentes pages de votre site web.
L’importance de la communication visuelle:
Les deux piliers d’un communication visuelle réussie sont émotion et simplicité d’utilisation. Elle doit conjuguer la simplicité et l’impact émotionnel ressenti.
Pour faire simple, la communication visuelle doit délivrer un message clair. La simplicité sert donc à renforcer le confort de l’expérience utilisateur, on appelle cela l’ergonomie. L’ergonomie rend plus facile la lecture et la compréhension.
L’impact émotionnel sert à fidéliser les internautes et susciter l’engagement avec votre marque en incitant à l’action.
L’UX Design doit rendre votre site web efficace en permettant notamment à l’internaute de visiter d’autres pages de votre site internet, d’acheter sur votre boutique en ligne ou de vous contacter.
L’expérience utilisateur
Depuis que Google a mis à jour son algorithme sur l’UX le 28 mai 2020, l’expérience utilisateur profite à votre référencement. L’UX Design est donc un élément à intégrer à votre stratégie marketing en fonction de votre ou vos cibles.
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 !
L’impact de la communication visuelle:
Au moment de la conception de votre site internet, le webmaster doit tout faire pour :
- renforcer la reconnaissance de marque
- transmettre les valeurs de votre entreprise
- construire votre notoriété
Le Webdesign est donc un élément important puisqu’il véhicule votre image de marque sur la toile.
Les différents types de communication visuelle :
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. Pour réaliser une charte graphique inspirante, il faut composé avec un ensemble de standards qui définissent l’apparence d’un site web :
- les couleurs,
- les typographies,
- les icônes,
- les images,
- les logos
- les photos,
- les infographies,
- les vidéos,
- les images de fond,
- et tous les éléments visuels d’un site web
charte graphique
Les éléments principaux 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. 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.
2 couleurs dominantes sont conseillées en cohérence avec vos autres supports. Vous pouvez opter pour une palette de 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
Les polices d’écriture:
Nous recommandons 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 :
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.
Des exemples de charte graphique web :
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
Les modules
Certains thèmes comme Divi ou constructeur de pages disposent de modules tout fait pour accélérer votre mise en page.
- Elementor près de 230 modèles dont une quarantaine gratuits.
- Divi avec plus de 800 mises en page de sites Web prédéfinie.
Un exemple de bibliothèque de modèles prêt à l’emploi pour votre charte graphique WordPress :
Exemple de template Elementor
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
Les outils pour la mise en page :
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
- Visual Composer
- Gutenberg
- Divi de Elegant Themes
- Wp Bakery Page Builder
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
Une charte graphique web sur mesure:
Que vous soyez un webmaster, un webdesigner ou un propriétaire de site web, investir du temps et des ressources dans la création d’une charte graphique solide peut contribuer à améliorer l’impact visuel de votre site web et à atteindre vos objectifs en ligne.
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 savoir comment réaliser une maquette de charte graphique avec méthode, 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
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.
Alors, prêt pour élaborer une charte graphique ?
En conclusion, la charte graphique est un élément essentiel du webdesign qui permet de créer une identité visuelle cohérente pour un site web. Elle joue un rôle clé dans la création d’une expérience utilisateur agréable, professionnelle et positive.
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 votre notoriété et l’image de marque de votre société.
À travers ces exemples de chartes graphiques de site web, j’espère que vous avez compris les enjeux d’une communication visuelle efficace pour votre entreprise.
