Salut !
C’est Pascal.
Aujourd’hui, une vidéo sur la charte graphique.
Objectif
Pourquoi j’ai fait cette vidéo ?
Tout simplement parce que lors de mes audits, je vois très souvent que la charte graphique est mal maîtrisée par une grande partie des clients et c’est aussi une partie qui est légitime à mon offre d’une prestation avancée par rapport à une prestation basique.
C’est souvent un critère qui est très envié, très recherché.
Pourtant, je veux vous montrer à travers cette vidéo que c’est quand même super simple de créer une charte graphique homogène qui donne une allure professionnelle et qui véhicule une image de marque forte sur votre boutique.
En fait, sur cette vidéo, je ne peux bien évidemment pas m’en servir d’exemple d’audit parce que les audits sont à chaque fois confidentiels et restent entre la personne qui l’a demandé et moi-même.
Je vais vous montrer avec mes deux sites qui ont actuellement une charte graphique, que je considère comme parfaitement établie, pour vous montrer à quel endroit il est pertinent d’utiliser la couleur primaire de votre boutique, de votre logo et à quel autre moment ça ne l’est pas spécialement.
Ça pourra aussi vous montrer un nouveau regard, des similitudes qui existent entre par exemple un site vitrine et un site mono-produit.
Vous allez voir que finalement il y a quand même des fois les mêmes formules qui reviennent et qu’il ne faut pas se prendre la tête, il ne faut pas aller chercher midi à 14 heures, il ne faut pas chercher à réinventer la roue.
Tout simplement, il faut appliquer ce qui marche et c’est aussi simple que ça.
Allez, c’est parti.
L’Erreur N°1 des Débutants
Le premier critère, pour moi, avec la charte graphique, c’est :
La charte graphique, ce n’est pas définir une couleur primaire et la mettre de partout sur votre site, parce qu’il va y avoir une conséquence très simple :
Comme votre couleur est présente partout, vous n’allez plus avoir de contraste entre les éléments qui sont importants et les éléments qui ne sont pas importants, puisque vous lui avez imposée cette même couleur.
Et c’est d’autant plus grave si vous avez mis une couleur qui est assez flashy.
Alors, je peux parler de rose fuchsia mais également le rouge, le rouge ça saute aux yeux forcément.
Donc, si vous mettez cette couleur rouge de partout, vous allez juste épuiser l’œil de votre prospect.
Il ne va pas être inconsciemment guidé vers votre cycle d’achat et donc il ne va pas vous amener de conversions supplémentaires.
Un site web n’est pas fait pour être JOLI
Vous allez manquer votre objectif de WebDesign principal, parce que l’objectif du WebDesign n’est pas de faire un site joli mais il est d’améliorer les conversions !
C’est super important d’avoir cette idée en tête.
À partir de là, vous pouvez vous dire : “Qu’est-ce qu’il est important de définir où est-ce que je veux que le prospect aille” et c’est vraiment ça qui va définir vos conversions.
Paramétrage sur votre thème
En fait, je fais un truc très simple dans Fastlane, c’est la couleur primaire.
Dans ma couleur primaire, je mets une couleur complètement standard.
Pourquoi je fais ça ?
Parce qu’il y a notamment plein de titres, dans les pages de collection, les titres des pages produits etc. qui sont liés à cette couleur primaire et du coup par rapport à ça, je n’aime pas spécialement mettre les titres en rouge, en rose, en orange, en jaune, encore pire le jaune, parce que ce n’est pas lisible.
Souvent, en couleur primaire, je peux vous montrer, si vous voulez, dans les réglages de Fastlane, je vais aller là-dedans dans Tout Chapinou.
Moi, souvent, dans les réglages Fastlane, je prends ce fameux gris anthracite ou je prends un bleu un peu plus marqué comme SoElegance.
Je vais montrer sur l’écran juste ici.
Tout Chapinou, j’ouvre ici.
Ici, je vais me servir de mon outil ColorPix que je vous avais présenté dans mes premières vidéos sur le WebDesign.
Ça fait longtemps pour ceux qui ne me suivaient pas à ce moment-là.
ColorPix est un excellent outil, c’est un petit programme .exe qui prend quelques kilooctets.
Vous l’installez, après il vous suffit de mettre votre curseur et il vous définit la couleur, les données à Red, Green, Blue, les données hexadécimales, vous avez absolument tout ce que vous avez besoin.
Là par exemple, vous pouvez pointer sur la Header Band et vous appuyez sur la touche Espace et ça va verrouiller la couleur.
Comme ça, le pointeur ne va plus mettre à jour la couleur.
Et là, cette fameuse couleur, c’est un bleu marine que vous pouvez parfaitement réutiliser.
Je crois que c’est le même, en plus ici.
Sinon sur mon site vitrine, j’ai utilisé un gris anthracite qui est cette couleur-ci.
En fait, vous pouvez tout simplement la réutiliser et vous allez voir que dans Theme settings, Color, la couleur primaire, c’est quasiment le même bleu marine.
J’ai pris celui-ci mais c’est quasiment le même.
C’est vrai que ça paraît contre-intuitif, parce que vous dites : “Oui, j’ai une couleur primaire, je vais mettre une couleur assez forte qui va se dénoter”, mais pour moi c’est une erreur de mettre cette couleur primaire ici, parce qu’après ça va vous être compliqué de faire exactement ce que vous voulez.
Moi, au tout début, pour la petite histoire, je mettais la couleur ici.
Ensuite, je m’amusais avec le CSS, le changer de partout, mais ça faisait beaucoup de réglages à prendre en compte, il n’y en a vraiment beaucoup, vous ne vous rendez même pas compte.
Entre les types du Footer, du header, les titres de collections, les titres de produits, il y en a vraiment beaucoup.
Vraiment, vous vous facilitez la vie en mettant une couleur plutôt sobre ici.
Ça, c’est super important.
Charte Graphique Avancée
Vous voyez, sur un site mono-produit comme Tout Chapinou, alors là je suis dans un cas un peu particulier, parce que comme vous le savez, j’ai deux couleurs, j’ai ce bleu et violet-rose, sur ce site, où est-ce que j’ai disséminé ces couleurs ?
Je les ai majoritairement disséminées sur mes images Produits, sur mes templates Photoshop sur lesquels j’ai mis en avant l’image de marque.
Je l’ai également mis en avant sur un petit template Sales Sniper.
D’ailleurs, pour la petite histoire, c’est là où on rentre dans le détail, mais je n’ai pas mis le même violet entre ici et ici.
Là, c’est un violet plus foncé qui permet d’avoir une visibilité un petit peu plus nette qui permet aussi de le rendre moins flashy, parce que j’estime que c’est moins important.
Là, vous le retrouvez à nouveau dans les images, mais ensuite vous voyez, vous l’avez pas tant que ça.
Là, j’ai remis ici une couleur plutôt light.
Encore une fois, je crois que ce n’est même pas le même bleu, c’est un bleu un petit peu plus foncé.
Après, c’est une question de bien maîtriser les dégradés.
Vous pouvez des fois chercher la couleur qui est un petit peu plus foncée, un petit peu plus claire et ça permet d’avoir un ensemble très homogène.
Mais là, je l’ai remis ici, je l’ai remis aussi dans les bandes là, ce fameux bleu.
En fait, ça se fait tout en subtilité, c’est ça que vous devez comprendre.
Là, j’ai mis en bleu les éléments importants, qui sont les éléments de contact, et j’ai mis ici le bouton En avant pour qu’il soit clairement visible.
C’est aussi par rapport à ça que ce Footer Second Row, j’ai mis un fond clair pour que le bouton ressorte parfaitement.
Sinon, si j’avais pris une couleur primaire un petit peu plus claire, la couleur de mon logo, si elle avait été plus claire, j’aurais mis un Footer plus assombri pour que ça donne un très bon contraste.
Tous ces réglages-là sont définis par les couleurs que je choisis au début.
Finalement, le rose est très flashy, c’est pour ça qu’il y a beaucoup d’endroits de mon site, j’ai favorisé ce bleu parce que je n’avais pas envie d’épuiser les yeux de mon prospect.
Donc, il y a du bleu ici, il y a du bleu sur les petites bandes.
Mais le violet apparaît vraiment quand on arrive sur les images produits.
Définir la Colorimétrie du Cycle d’Achat
Ensuite, encore une fois, vous avez ce fameux cycle d’achat qui là, je vous l’ai répété dans beaucoup de vidéos, il est absolument fondamental qu’il ait une couleur différente.
Alors là, j’ai essayé d’innover avec ce orange, j’en suis satisfait.
Mais sur un site vitrine, on voit que j’ai conservé le vert par défaut de Fastlane et c’est absolument nickel.
Le vert se distingue, c’est une couleur qui, entre guillemets, rassure, c’est une couleur avec une psychologie positive, donc vous pouvez tout à fait conserver ce réglage ici.
Assurez-vous de ne pas prendre en compte comme couleur de logo un logo vert.
Là, ça serait par contre très dommage, parce que vous rognez la deuxième règle que je viens de vous dire qui est : “Le cycle d’achat doit vraiment avoir une couleur qui se dénote de tout le reste“.
Ça, c’est absolument fondamental.
Si vous voulez reprendre sur le site vitrine, vous voyez que mon logo n’a même pas de couleur prédéfinie, c’est encore une fois ce gris anthracite que vous retrouvez à pas mal d’endroit.
Et finalement, où est-ce que j’ai une couleur un peu plus sympa, ce bleu-là ici ?
Le bleu, je l’ai repris sur mon design de bouton.
Je n’ai pas cherché non plus à mettre des boutons pleins, je mets le plein qu’uniquement au survol.
Ça permet, encore une fois, de ne pas non plus fatiguer l’œil du prospect.
Etude de Cas : Charte Graphique de mon site
J’ai utilisé ce bleu également pour mes templates Photoshop pour créer mes vignettes de vidéo You Tube.
Donc, ça permet aussi de plus marquer, alors qu’avant j’utilisais seulement un template qui mettait mes vidéos en noir et blanc, donc un peu de manière analogue à cette photo-ci.
Mais je remarque, depuis que j’ai mis ce petit arc de cercle en bleu, ça marche beaucoup mieux.
Encore une fois, je n’utilise pas exactement la même couleur.
Si vous voulez voir encore à nouveau avec cet outil, c’est un 0078D7 et là ici ce n’est pas exactement le même code, et là c’est à nouveau un bleu un peu plus foncé mais qui reste dans une logique de dégradé.
Petite astuce aussi, là j’ai mis le rouge, parce que le rouge, encore une fois, c’est quelque chose qui attire la vue du prospect, donc c’est particulièrement intéressant dans une vignette de vidéo You Tube.
Mais je n’ai pas cherché à mettre du rouge de partout, parce que quand vous mettez du rouge de partout, au final vous créez l’effet inverse, c’est-à-dire que le prospect ne sait plus où donner la tête, où mettre ses yeux et ça ne le guide pas spécialement aux éléments importants.
Quand il arrive sur ce site, les photos en noir et blanc c’est parfait, parce que pareil, le prospect ne va pas spécialement être attiré plus que ça par les photos, il va voir le texte, il va voir les boutons directement.
Ensuite il descend, là il voit le rouge, ça va le mettre en avant, il y a même le bouton de lecture de You Tube qui lui indique de lire la vidéo.
Ensuite il y a directement ce bouton d’ajout au panier qui reste très visible à ce vert.
C’est tout aussi simple que ça.
Après, le reste, les photos sont en noir et blanc et la majorité de mes éléments ne sont pas colorés.
Là, il y a des options qu’Ulrich avait données pour notamment mettre des systèmes à deux couleurs.
J’estime que là ça n’a pas lieu d’être.
Donc, c’est aussi simple que ça.
Là, j’incite à un peu plus à s’inscrire, c’est pour ça que j’ai mis le bouton plein dès le début, le bleu qui est ici et au survol il devient vert.
Ça, je l’ai fait pour tous mes formulaires de newsletter, c’est quelque chose qui me permet de me différencier.
Là, comme vous le voyez, le lien de newsletter est en bleu, c’est le fameux bleu qui est utilisé pour un lien, qui donne de la confiance.
Au survol, vous ajoutez un petit effet souligné pour encore plus inciter.
Vous voyez qu’au final je n’ai pas fait non plus des choses incroyables, c’est-à-dire j’ai juste défini ce bleu-là, ensuite j’ai mis du rouge et c’est tout.
C’est vraiment aussi simple que ça.
Ensuite, la question, c’est vraiment de le disséminer aux bons endroits.
J’ai également ce gris anthracite qui permet d’avoir un rendu plutôt professionnel.
Par rapport à ça, je n’ai pas réinventé la roue non plus.
En fait, si vous voulez la petite histoire, le gris anthracite, c’est le même que celui du site d’Ulrich Vallée.
Je suis un petit peu dans la même niche, je suis sur le WebDesign etc. donc reprendre une charte graphique existante, le prospect, inconsciemment, va reconnaître une similitude entre mon activité et celle d’Ulrich.
Donc, ça tombe bien parce que de toute façon je suis modérateur du groupe d’Ulrich.
En plus, par rapport à ça, c’est intéressant, parce que j’ai juste à me réinventer.
D’ailleurs, le bleu là ici, je l’ai pris comment ?
C’est le bleu de Windows 10.
Là, encore une fois, je me suis dit : “Si Windows 10 a choisi ce bleu-là, c’est pour une raison, c’est parce qu’il fait « corporate », il y a un aspect très sérieux”, donc je l’ai tout simplement repris.
On peut même d’ailleurs faire une étude de cas par rapport au site d’Ulrich.
Ce qui est intéressant de voir, c’est que même si au début je me suis inspiré de ce site, vous voyez, c’est le même gris anthracite ici entre là et là.
Au final, Ulrich Vallée a décidé de faire son design et de partir dans une autre direction, il a maintenant utilisé ce jaune qui amène du dynamisme à son site par rapport au simple effet noir et blanc qu’il y avait.
Mais maintenant, j’ai évolué dans une autre direction et il n’y a pas de problème avec ça.
Après, c’est à vous de définir votre image de marque en fonction de votre inspiration, de vos préférences personnelles, de vos inspirations.
En tout cas, c’était le mot du jour.
Ça peut être intéressant, en tout cas, de voir comment un site web évolue.
Et là, encore une fois, moi, le template de vidéo You Tube, c’est quelque chose que j’ai changé récemment, qui a fortement contribué à l’évolution de ma chaîne You Tube.
J’ai des templates qui font beaucoup plus sérieux, les textes se lisent beaucoup mieux qu’avant, alors qu’avant ils étaient un petit peu trop petits.
Après, ce sont juste des choix que vous devez prendre en compte.
Mais au final, ces choix ne sont jamais dictés par le fait que “là je veux telle couleur”, c’est plutôt de me dire la vignette You Tube, je veux qu’elle donne un rendu plus professionnel, je veux que mes textes soient plus lisibles, donc je vais les mettre en noir, je vais même mettre un des mots en rouge pour que ça mette l’accent.
Ensuite, je vais reprendre ma charte graphique pour que ce soit conforme à ce que j’ai sur mon site web.
Comme ça, ça procure une homogénéité entre mon site web et mes réseaux sociaux et ça c’est super important.
Et jusque dans ma chaîne You Tube, jusque dans la page d’accueil ici, j’ai repris la charte graphique que j’avais configurée sur mon site web.
Derniers Ajustements
Moi, je vois souvent, cette Header Band, cette Footer Band, elle est souvent utilisée avec la couleur primaire.
Là, elle serait par exemple en bleu ou en rose.
Vraiment ne faites pas ça, prenez les couleurs un petit peu bleu marine ou un petit peu gris anthracite que je vous ai montrées.
Pour tout ce qui est là, les éléments ici, gardez du gris, mettez un petit gris plus clair au survol, c’est nickel.
Encore une fois, ça se fait tout en subtilité.
Vous n’avez pas besoin de mettre des gros effets lorsqu’on est au survol, vous n’avez pas besoin de mettre votre couleur primaire lorsqu’on est au survol.
Les clients sont intelligents, ils comprennent.
Il faut juste que vous mettiez des petites animations discrètes.
Vous voyez, là j’ai mis un bleu un tout petit peu plus foncé et c’est vraiment comme ça que ça marche.
Là, idem, il y a un petit survol qui se fait, et ça, ce n’est pas moi qui l’ai configuré, c’est pris par défaut par le thème Fastlane.
Il n’y a jamais besoin de faire des gros réglages.
En fait, dès que vous faites des réglages exagérés, vous montrez votre inexpérience.
C’est un shop qui a été fait par un amateur et par pour quelque chose de professionnel.
Je pourrais même vous dire que vous essayez de manipuler votre prospect quand vous exagérez des réglages.
Et quand vous essayez de manipuler votre suspect, vous n’êtes pas dans une bonne intention, vous êtes dans une intention de vouloir augmenter vos ventes au détriment de l’expérience utilisateur de votre prospect.
Moi, je vous dis que c’est justement l’inverse que vous devriez faire, vous devriez chercher à rendre les choses les plus agréables possibles pour votre prospect, à chercher à lui procurer le maximum de valeurs.
Et ça, c’est vrai dans toutes les facettes de l’entrepreneuriat, pas simplement le WebDesign.
Dès que vous aurez compris ça, vous verrez que tout ça, ça va être magique, vous allez améliorer vos conversions !
D’ailleurs, j’ai une petite blague par rapport à ça.
J’avais un client qui, hier, m’avait contacté en urgence parce qu’il avait payé des packs d’influenceur, il est arrivé sur le dernier, il y avait le trafic qui venait et il ne convertissait pas.
Du coup il est devenu client par rapport à ça justement en urgence.
Anecdote avec mes clients
Voilà ses données.
Vous voyez que sur pas mal de sessions, il y avait un petit 4 % d’ajout au panier, ce qui était honnête.
Il avait un 2,73% en arrivée dans le checkout et après ça s’écroulait complètement, ça se divisait par 10 pour la conversion finale : 0,38% !
Je vous parle vraiment d’un cas d’hier, je n’ai pas encore assez de données, ce sera vérifié sur les jours qui suivent.
Mais notamment, il avait une redirection vers le checkout lors de l’ajout au panier.
Et ça, c’était évidemment rédhibitoire parce que les clients se sentaient forcés, c’est-à-dire cette personne voulait que dès qu’on ajoute au panier, vas-y, mets la CB et vas payer.
Mais du coup les clients vivaient une mauvaise expérience par rapport à ça.
Du coup il y a des changements du jour au lendemain.
Il y a eu beaucoup moins de sessions en tout, parce que le pack c’était terminé, il y avait à peu près 10 fois moins de trafic entre ce jour-là et aujourd’hui.
Mais là, notamment, tous les ajouts au panier ont converti.
C’est un chiffre qui est complètement ridicule, mais ce sont des données que vous pouvez avoir sur le long terme si vous faites bien les choses.
Donc ça, c’était le petit chiffre « j’envoie du rêve », mais sachez que si vous faites les choses bien, vous serez largement récompensé.
Récapitulatif
Voilà, je vais m’arrêter là pour la charte graphique.
J’espère que vous avez compris qu’en tout cas d’un point de vue réglage, mettez une couleur plutôt sobre ici.
Ensuite
- Mettez une couleur marquante sur votre logo
- Réutilisez la vos templates d’image produit : faites des templates Photoshop qui reprennent cette couleur assez forte.
- Diffusez un petit peu par ci par là sur le Footer, sur quelques boutons, mais n’en faites pas des caisses.
Si la couleur est un petit peu trop fluo, essayez de la rendre moins fluo, de jouer sur les dégradés, comme ça vous allez avoir une charte graphique beaucoup plus professionnelle que ce que je peux voir d’habitude.
Le panier, c’est quand même important, mais le Cart Slide se déploie automatiquement lorsqu’il y a un ajout au panier, donc vous n’avez pas spécialement besoin que le prospect voit ça en gros.
De toute façon, il le sait, c’est une convention que le Cart est toujours à droite dans le Header.
Dans Amazon, vous voyez, c’est pareil.
Donc au bout d’un moment, vous n’avez pas besoin d’en faire des caisses.
Mais à partir de là, tous les éléments, mettez-les en noir.
Ça c’est en noir, ça c’est en noir ou un petit grisé, un petit gris anthracite, vous avez compris.
Vous n’y arrivez pas ? Faites appel à mes services !
J’espère que cette vidéo vous a plu.
Si elle vous a plu, n’hésitez pas à liker la vidéo, ça me fera toujours plaisir, ça me permettra de voir que vous avez aimé ce contenu et que je pourrai vous proposer quelque chose de semblable.
N’hésitez pas à laisser aussi des commentaires si vous avez des questions sur un élément en particulier.
Encore une fois, j’estime avoir donné tous les éléments possibles, mais les questions ça me permet toujours de reclarifier des éléments, d’aller un petit plus loin, donc c’est toujours intéressant par rapport à ça.
Si vous souhaitez souscrire un audit gratuit pour que je vous dise si notamment votre charte graphique a été bien optimisée, n’hésitez pas à souscrire à un audit ici.
Comme je vous l’ai dit, c’est gratuit, c’est sans engagement.
Pour la suite, c’est évidemment confidentiel, donc je ne vais pas montrer votre audit à d’autres personnes.
En bref, vous n’avez absolument rien à perdre à prendre cet audit.
À partir de là, je ne vous demanderai même pas de témoignage vidéo ou quoi que ce soit, il n’y a pas du tout de sous-garantie.
C’est vraiment un service de bonne foi que je vous rends, je joue le jeu.
À partir de là, je vous amène à vous poser les bonnes questions.
Si vous avez les compétences pour avoir un site professionnel par vous-même, c’est tant mieux pour vous.
Moi, j’aurais joué le jeu, en tout cas, je vous aurais donné le maximum de valeurs que possible.
Si après, vous pensez que ça va être beaucoup process à assimiler pour vous, vous voyez, je n’en ai balayé qu’un seul et il y en a, bien entendu, une multitude d’autres, si vous pensez que c’est hors de votre portée, vous pouvez tout simplement souscrire à mes services, comme ça le WebDesign est délégué, et à partir de là, vous vous concentrez sur votre offre.
En tout cas, j’espère que cette vidéo vous a plu.
C’était Pascal.
À la semaine prochaine.
Ciao.
