Votre charte graphique est l'un des piliers de votre image de marque. C'est un guide qui rassemble les règles d'utilisation et les caractéristiques de tous les éléments constitutifs de votre identité visuelle. C’est elle qui va vous permettre de créer des contenus uniques, repérables en un coup d’œil, mais surtout de conserver une cohérence entre tous vos supports de communication.
Que vous souhaitiez créer votre site e-commerce ou que vous ayez un projet de refonte, vous devez vous baser sur une charte graphique claire, pensée en fonction de vos objectifs, de vos personae, mais aussi des contraintes propres au web.
Nous vous proposons aujourd’hui de décrypter les composantes d’une charte graphique efficace, exemples de nos marchands à l’appui !
1. Votre logo
C’est l’un des éléments graphiques les plus importants, celui qui va permettre aux utilisateurs d’identifier immédiatement votre marque et de s’en rappeler. Nous vous conseillons d’éviter les générateurs de logos gratuits, car ces derniers sont généralement non personnalisés, et ne vous permettent donc pas de vous différencier.
Votre logo doit incarner vos valeurs, l’image que vous souhaitez renvoyer à vos clients. Votre charte graphique va vous permettre de spécifier ses différentes déclinaisons : sur fond clair, sur fond foncé, en monochrome…
S’il comporte plusieurs éléments, par exemple une image et le nom de votre marque, vous pouvez également indiquer les configurations possibles (image au-dessus du texte, à gauche…).
On peut voir par exemple que la marque Atypik Home a opté pour un logo original, rappelant la forme des meubles ethniques qu'elle propose sur son e-shop. Elle a également prévu des variantes de forme et de couleur, pour l'adapter à toutes les situations :
Enfin, nous vous recommandons de penser au mobile : un logo trop compliqué, avec beaucoup de détails, risque d’être moins lisible sur un support de petite taille.
2. Vos couleurs
Le choix des couleurs de votre charte graphique va littéralement “donner le ton” de votre site. Tout comme votre logo, il faut qu'elles retranscrivent votre univers et la personnalité de votre marque.
Chaque couleur a sa propre signification :
- Le noir est associé à l’élégance, au sérieux et à la sophistication : il est généralement utilisé par les marques de luxe ;
- Le vert est la couleur de la nature et de l'apaisement : si vous proposez des produits respectueux de l'environnement, vous pouvez la reprendre à votre compte ;
- Le rouge symbolise le dynamisme, la passion, mais aussi l’action : une couleur que vous pouvez utiliser par touches, par exemple pour vos CTA ;
- Le bleu représente l’honnêteté, la confiance et la stabilité : idéal pour rassurer vos acheteurs !
Le site GUSTAVE & cie a fait le choix de cette dernière couleur, non seulement pour montrer à ses visiteurs que ses montres sont fiables, mais aussi pour valoriser son savoir-faire Made in France !
Astuce : nous vous conseillons d’intégrer 5 teintes maximum à votre charte graphique pour éviter l'effet "cacophonie de couleurs". Elles doivent être complémentaires, pour refléter l’identité de votre marque et ne pas perturber votre visiteur.
3. Votre typographie
Un site Internet est composé à 95% de texte : le choix des polices de caractères peut donc avoir un impact considérable sur la perception des internautes.
Tout comme les couleurs utilisées sur votre boutique, votre police d’écriture renvoie une certaine image de votre marque. Elle doit être adaptée à votre secteur d’activité et à votre cible.
C’est ce que démontre cette étude publiée sur Medium, qui compare quatre polices classiques avec et sans serif (Baskerville, Fira Sans, Helvetica et Roboto Slab). Elle a recueilli le ressenti des internautes lorsqu'ils les voyaient employées sur quatre sites différents (un site bancaire, d’actualités, d’application de fitness et une boutique en ligne spécialisée dans les vêtements).
Conclusion : la typographie qui inspire confiance sur le site de news est beaucoup moins rassurante sur celui de l’application de fitness. Ou encore, la police perçue comme la plus attrayante ne sera pas la même d'un site à l'autre. D’où l’importance de faire un choix éclairé, en fonction des objectifs que vous vous êtes fixés !
Pour votre information, voici les résultats du sondage pour le site de prêt-à-porter :
On constate que la police Helvetica est considérée comme plus rassurante, facile à utiliser et plus attirante que les trois autres.
Sachez que les chartes graphiques web renseignent généralement la police principale correspondant aux titres (H1), la police secondaire pour les sous-titres (H2, H3…), etc. Pour chacune d'entre elles, il vous faut définir son style, sa taille ou encore sa couleur.
4. Vos images et icônes
Les images et icônes présentes sur votre boutique en ligne vont vous permettre de faire entrer vos visiteurs dans votre univers, et de susciter des émotions.
Que vous choisissiez d’utiliser des illustrations, des photos prises par vos soins ou encore des visuels issus de banques d’images gratuites, il faut qu’ils soient harmonieux pour assurer la cohérence de votre site.
Votre charte graphique a, ici encore, un rôle important à jouer : c’est elle qui va poser les règles de base pour l’utilisation de vos images, que ce soit dans le header, le footer, la page de présentation de votre entreprise...
Si vous vendez des biens physiques, vous serez amené à les prendre en photo pour illustrer vos fiches produits. Ici encore : laissez votre personnalité s’exprimer ! Vous pouvez mettre en scène vos articles d’une certaine manière, appliquer le même filtre photo sur toutes vos images, utiliser un rappel de couleur…
L’e-shop du chanteur Roméo Elvis, par exemple, comporte uniquement des photos de produits détourés sur fond jaune : un parti pris fort, qui a pour avantage de marquer les esprits !
On peut noter au passage le fait que les icônes des réseaux sociaux sont elles aussi stylisées pour être en accord avec la typographie du site, et son univers graphique en général.
5. Vos boutons call-to-action
Les call-to-action (CTA) ou “boutons d’appel à l’action”, sont des éléments visuels à ne pas négliger, car ce sont eux qui vont vous aider à convertir vos visiteurs en acheteurs !
Ils ont toute leur place dans la charte graphique de votre site web, car vous pourrez ainsi définir avec précision leur emplacement, leur taille, leur forme, leur couleur, mais aussi leur comportement au passage de la souris.
L’objectif est de rendre vos boutons reconnaissables en un coup d’œil, pour faciliter la navigation entre vos pages, et de donner aux internautes l’envie de cliquer.
À titre d’exemple, les CTA de la boutique MÊME Cosmetics se déclinent sur deux couleurs (le rose et le noir) en fonction du fond sur lequel ils sont affichés. Leur design est simple, en accord avec l’univers graphique de la marque. Elle a également intégré une animation, avec un changement de couleur lorsque l’utilisateur survole le bouton.
{% video_player "embed_player" overrideable=False, type='scriptV4', hide_playlist=True, viral_sharing=False, embed_button=False, autoplay=False, hidden_controls=False, loop=False, muted=False, width='2274', height='1362', player_id='29830572305', style='' %}
Astuce : nous vous invitons à indiquer dans votre charte graphique trois variantes de CTA maximum. Autrement, vous risquez de perdre en lisibilité, et vos visiteurs ne sauront plus où cliquer.
6. Votre mise en page
Maintenant que vous avez tous les éléments de votre site, il faut savoir comment les agencer ! Il est recommandé d’inclure dans une charte graphique des règles de mise en page générales. Elles fourniront des indications précieuses à l’agence ou au développeur chargé de la création ou de la refonte de votre boutique.
Quel est le degré d’importance de chaque élément ? Quelle place voulez-vous laisser aux images ou aux textes ? En somme, quel est le message principal que vous souhaitez faire passer à votre visiteur ? Lorsque vous aurez la réponse à ces questions, vous serez en mesure de hiérarchiser vos contenus de façon à répondre à vos objectifs, tout en simplifiant le parcours d’achat.
Ainsi, Marlette a choisi de mettre au premier plan un bandeau défilant pour faire la promotion de ses dernières nouveautés. En scrollant, le visiteur arrive sur les différentes rubriques de la boutique, pour finir sur un bandeau décrivant les atouts des produits Marlette. Une page d’accueil simple qui va à l’essentiel, tout comme les préparations sucrées proposées par la marque !
Vous avez maintenant tous les ingrédients nécessaires pour créer une charte graphique qui vous ressemble ! C’est la pierre angulaire de votre stratégie de communication, car les choix que vous aurez opérés pour votre site pourront être déclinés sur tous vos autres supports.
Sachez que vous pouvez trouver de nombreux exemples de chartes graphiques d’entreprises sur Pinterest, ce qui peut être un bon point de départ pour construire la vôtre. Nous vous invitons également à vous inspirer des dernières tendances webdesign, pour un site e-commerce dans l’air du temps !
