Les meilleurs exemples de charte graphique web réussis
La charte graphique est un élément essentiel à la cohérence de votre marque.
En effet, elle regroupe tous les éléments visuels qui déterminent vos valeurs et votre personnalité.
Elle est aussi utile en communication externe qu’interne. Lorsque vous travaillez avec des agences ou de nouveaux collaborateurs, une charte graphique complète, exhaustive et bien pensée vous fait gagner un temps précieux pour diffuser votre image de marque.
Elle est présente sur chacun de vos éléments de communication ;
- Site web,
- Visuels de publicités,
- Documents,
- Goodies…
Avec une bonne charte graphique, plus besoin de se demander de quelle marque il s’agit ; il est clair que c’est la vôtre !
Une charte graphique est composée :
- Du logo,
- De la typographie,
- De la palette colorée,
- D’images,
- D’éléments iconographiques (formes, animations…).
Mais, comment se démarquer ?
Si vous manquez d’inspiration pour définir votre charte graphique, jetez un œil à ces exemples de charte graphique web réussis :
La charte graphique moderne
Welcome to the Jungle
Le premier média de l’emploi a, en juin 2020, modifié sa charte graphique pour passer du vert au jaune.
En effet, les couleurs vives et les polices de grandes tailles sont très utilisées en ce moment.
Leur charte graphique s’est adaptée à leur évolution et à leur ambition principale : changer l’expérience au travail.
Leur nouveau slogan exprime cette idée : “Work for more”. Simple, efficace et court, ce slogan peut être apposé sur tous leurs éléments de communication et ancrer leur esprit d’entreprise dans celui des utilisateurs.
Si la couleur jaune est prédominante, ils définissent plusieurs couleurs secondaires pour donner du relief et du dynamisme à leur site.
Côté polices, Welcome to the Jungle frappe fort : ils créent leur propre police, appelée “Welcome”.
Cette police de titre unique affirme leur identité et les différencie des autres sites.
Lorsque vous voyez cette police, c’est forcément Welcome to the Jungle.
Cette police est couplée à une autre, plus traditionnelle, pour faciliter la lisibilité des articles sur le site.
Cette nouvelle charte graphique s’applique à chacun de leurs contenus, articles ou vidéos. Elle permet d’unifier la pluralité des contenus de Welcome to the Jungle en une seule identité unique.
Leur charte exprime leur identité d’entreprise : toutes leurs productions et communications sont donc tournées vers le même objectif.
Consultez leur charte graphique.
Back Market
Back Market, spécialiste de la vente d’appareils reconditionnés, adopte une nouvelle charte graphique en 2019 qui s’accorde parfaitement à la tendance.
Leur but, à travers cette charte graphique, c’est de ne pas rester sur ses acquis.
Leur logo est interactif pour insister sur le “Back”, soit le concept de leur marque. Il est simple, et assumé. Le choix du logo reflète leur esprit et leurs objectifs.
Leurs polices sont aussi soigneusement choisies. Le GT Super, large et imposante, permet d’affirmer d’autant plus leur message et leurs ambitions. Pour le corps des articles, ils utilisent une police plus simple et lisible.
Si leurs choix de polices est très affirmé et imposant, ils contrebalancent avec des couleurs vives, et des stickers.
Ces stickers sont des cadeaux faits aux clients, ce qui permet à Back Market d’être diffusé chez leurs clients. La communauté Back Market devient ambassadrice de la marque.
Consultez leur charte graphique.
La charte graphique universelle et moderne
France TV
Le groupe de télévision propose une charte graphique à la fois universelle et moderne. Fondée en 1992, sa charte graphique a évolué avant de parvenir à celle-ci.
Datant de 2018, elle redéfinit toutes les directives visuelles de F
rance TV pour chacune de leurs chaînes.
Le logo dispose de plusieurs variantes, pour s’adapter à tous les supports.
Dans chacune de leurs communications, internes et externes, le logo est présent sous une forme différente mais toujours reconnaissable.
Leur typographie est sobre, simple, mais différenciante. Ils se démarquent de leurs concurrents avec une police en minuscules.
Leur forme principale, c’est le point. Il est présent dans chacun des logos pour chacune des chaînes, et change sa couleur selon la chaîne ; du rouge pour France 2, du jaune pour France Ô…
Le point est aussi partie intégrante de leur slogan pour leur chaîne d’information France TV Info : “Deux points : ouvrez l’info”.
Leur charte graphique est à la fois reconnaissable et adaptable à chaque chaîne sans perdre son identité.
Scrimshaw Coffee
Dans le même esprit que Starbucks, Scrimshaw Coffee propose une charte graphique simple et épurée, tout en restant conviviale.
Leur charte graphique minimaliste tout en étant chaleureuse représente l’esprit de la marque, et le sentiment des clients ; un moment convivial autour d’une boisson chaude.
Le bleu est relaxant, et le taupe rappelle la couleur du café.
Leur logo rond fonctionne comme un tampon apposé sur leurs cafés : il est donc très reconnaissable. Ils utilisent l’image de la baleine et personnalisent leur marque à travers l’animal.
Ils définissent aussi des sous-logos, avec la même identité visuelle et colorée. Ils exposent leur slogan qui inclut leur clientèle ; “Waste time together”.
Prendre du temps pour soi et passer un moment convivial avec les autres sont deux états d’esprits revendiqués par la marque.
Consultez leur charte graphique.
La charte graphique précise et détaillée
La French Tech
La particularité de (La) French Tech est qu’elle est une marque collective. En effet, chaque start-up adhérant aux principes de (La) French Tech peut intégrer son logo à ses communications.
Mais, qui dit marque collective, dit charte graphique très claire et détaillée. Longue de 21 pages, la charte graphique de (La) French Tech est complète ; de la proportion des éléments du logo aux dispositions non-conformes, tout est indiqué.
Cette précision est en adéquation avec leur objectif : soutenir toutes les start-ups françaises pour accélérer leur évolution et donner du poids à cette identité française.
Cette identité se retrouve dans toutes leurs communications, les sites comme les flyers et affiches.
Ils font donc le choix d’un symbole traditionnel, le coq, mais transformé en logo moderne ; il est composé de triangles pour correspondre à un esprit flat design.
Les typographies autorisées par la charte graphique sont également définies dans chaque caractère, des lettres aux points d’expression.
Pour les couleurs, ils font le choix de trois couleurs principales, qui prennent 70 % de la page, et six couleurs secondaires.
Mais ils vont encore plus loin !
Leur charte graphique pose aussi le choix des photos que peut utiliser une marque ou un site sous l’appellation (La) French Tech.
Ils proscrivent les banques d’images gratuites et demandent des photos de situations réelles et des équipes.
Nous retrouvons aussi plusieurs exemples de slogans, qui peuvent être repris tels quels ou inventés à partir de cette dynamique.
En clair, (La) French Tech propose une charte détaillée point par points.
Impossible de se tromper !
Consultez leur charte graphique.
La charte graphique simple et efficace
Apple
Le logo suffit à reconnaître la marque.
La simplicité au service de l’efficacité, c’est Apple. Leur charte graphique est sobre, simple, et percutante. La modernité de leurs appareils et de leurs technologies est retranscrite dans leur charte graphique.
Tout est pensé, de l’utilisation du logo pour les revendeurs à la décoration intérieure des magasins Apple.
Pas de couleurs chez Apple, tout est clair et net pour le client : la marque propose de la modernité, de la technologie, et du style.
Et ça marche !
L’identité d’Apple dépasse son logo : elle devient tout un environnement et un mode de vie pour ses clients.
Consultez leur charte graphique.
Medium
De même chez Medium, la charte graphique est simple et claire.
Le “M” encadré suffit à reconnaître le site, et unifie tous leurs contenus. Entre le blanc et le gris foncé, le site donne une image qualitative et professionnelle.
Cependant, une couleur vive vient dynamiser la charte graphique ; le vert. Symbole de croissance et de sérénité, elle représente le site dans le message qu’ils communiquent à leurs visiteurs.
En effet, Medium est une véritable source de connaissances.
Les polices de la charte graphique sont également en accord avec leur cible.
Ils font le choix d’une police large et moderne, le Tisa Pro, pour mettre en avant leurs titres, leur slogan et les citations importantes des articles.
Couplée à cette police, on trouve du Freight Sans qui permet une grande visibilité pour les utilisateurs qui cherchent à en apprendre plus sur des sujets importants pour eux.
Ils exposent également une version blanche et une version noire, toujours pour améliorer la visibilité et s’adapter à tous les lecteurs.
Enfin, ils déterminent les éléments iconographiques présents sur leur site : ils sont efficaces, facilement compréhensibles et s’adaptent à la structure des articles sur mobile comme sur ordinateur.
Consultez leur charte graphique.
La charte graphique colorée et ludique
Michel et Augustin
Les “trublions du goût” ont une charte graphique très colorée.
Ils ne se limitent pas dans les couleurs pour représenter l’esprit de la marque : dynamique et joyeux.
Leur logo, représentant les deux fondateurs de la marque, personnalise leur charte graphique et permet d’identifier facilement leurs packagings au milieu des autres.
Ils misent sur l’aspect gourmand et enfantin de leurs produits.
La police utilisée est également très différente des autres marques : elle est irrégulière et enfantine.
Sur leur site, ils font également le choix de placer des stickers, des images colorées, et des éléments graphiques dynamiques qui habillent leurs contenus.
En effet, des cookies apparaissent en scrollant leur page d’accueil, et les éléments cliquables s’animent au passage de la souris.
Ils créent un univers chaleureux qui prône la gourmandise et le fait-maison ; chez Michel et Augustin, on se sent comme chez soi.
Les possibilités pour définir votre charte graphique sont infinies.
Plutôt dans les tendances du moment, ou totalement à contre-pied ?
Tout est possible, tant que votre charte graphique représente vos valeurs et l’esprit de votre marque.
Ainsi, elle sera identifiable en un clin d’œil.
Vous êtes maintenant prêts et inspirés pour définir la charte graphique de votre marque ?
Alors, à vous de jouer !
