On crée une charte graphique en Néo-Brutalisme

On va voir ce qu'est une charte graphique et comment en créer une de 0

déc. 15, 2024

Si tu es nouveau ici, sache que nous construisons un SaaS de type Landing Page Builder de 0 à 1M€ en 1 an.
Et que je partage chaque semaine les coulisses du projet et des astuces marketing et stratégiques pour développer un logiciel SaaS 😉

En savoir plus sur le projet

Le code avance toujours mais c'est loin d'être terminé 😅.
J'ai hâte d'avoir quelque chose à te montrer et de pouvoir lancer la Bêta (voire même l'Alpha 😁)

Point sur l’avancement :

L’architecture du projet est faite et permettra d’avoir un outil 100% temps réel
Je suis toujours sur le cœur de l’outil : le moteur de génération des pages
- La validation de typage du moteur de template est faite
- La génération des pages est faite
  - Il ne manque plus que les tests pour cette dernière

Oui, je sais. Le logo et le nom ne sont pas les éléments les plus importants quand on démarre un projet… Bla bla bla… 🤢

Mais la communication va commencer très bientôt !
Avec le SEO d’abord, puis les réseaux sociaux, etc…

Et créer un site web sans nom de domaine, ou des comptes sur les réseaux sociaux sans nom…
Ben c’est pas fou 😅.

Oui, ce n’est pas le plus important. Mais ça reste nécessaire pour communiquer.

Alors aujourd’hui nous allons définir tout ça et créer notre charte graphique (du moins la première version 😉).

Mais qu’est-ce qu’une charte graphique ?

Voici ce que nous dit cet article de You Love Words :

Une charte graphique est un livrable rassemblant tous les éléments visuels essentiels à votre marque, tels que votre logotype, vos polices, etc. Ce document explique comment et dans quelles conditions ces éléments peuvent être utilisés, et permet de communiquer en gardant une cohérence graphique.

C’est donc un document qui va expliquer, en détail, comment afficher notre marque.

Il va contenir des informations sur :

Notre logo et comment l’utiliser
Nos couleurs principales et secondaires
Notre typographie (police et taille utilisées pour chaque style de texte différent : paragraphe, titres de 1 à 6, etc…)
Nos boutons
Nos styles en général

La charte graphique va nous permettre de garder une cohérence lorsqu’on va communiquer à travers la marque.

Elle doit être en lien avec notre branding pour toucher et fidéliser notre cible.

Et elle nous permet de nous différencier de la concurrence.

Comment créer une charte graphique

Maintenant qu’on comprend mieux ce que c’est, voyons quelles sont les étapes pour créer sa charte graphique.

1. Analyser la concurrence

L’idée n’est pas de les copier, mais plutôt de comprendre la tendance et de voir pour se différencier.

J’ai fait l’exercice pour notre SaaS avec nos concurrents principaux.
Voici ce que ça donne (dans le Notion) :

Voir la page Notion

Comme on peut le voir (dans le document 👆), c’est très “classique” et “sérieux”.

Un style graphique qui conviendrait très bien pour aller cibler de grandes entreprises.

C’est aussi très épuré et très “bleu” (on verra la signification des couleurs plus bas).

Et globalement, ils ont des formes plutôt rectangulaires, signe de puissance et stabilité (mais pas d’accessibilité).

C’est intéressant de voir que tous ces outils ont fait globalement les mêmes choix de styles et de couleurs.

Est-ce que ça veut dire qu’il n’y a que ça qui marche dans ce milieu ?

Je ne pense pas.

Ces outils sont surtout utilisés par des indépendants et des agences (les grosses structures ayant leurs propres systèmes ou faisant appel à des agences).

C’est un milieu plutôt jeune et décontracté, très loin du milieu très sérieux et corporate des grandes entreprises.

Et pour ce milieu, le style “sérieux” n’est pas forcément ce qui est le plus intéressant.

Ce qui peut nous laisser une belle marge de manœuvre pour nous différencier au niveau graphique 😉.

2. Être au point sur son branding

Après un premier branding, un StoryBrand, puis un retravail de celui-ci, je pense qu’on peut partir du principe qu’on est au point 😁.

Mais ça me fait penser qu’on n’a toujours pas de nom pour notre projet 😅.

Lors de mes entretiens avec ceux d’entre vous qui se sont portés volontaires, je vous ai présenté plusieurs idées de noms :

Perfect Page (6 votes)
Convert Page (2 votes)
Convert It (0 vote)
Convert Hero (0 vote)
Hero Page (4 votes)
Vote Blanc (5 votes)

C’est Perfect Page qui ressort gagnant de ce vote. Mais ce n’est pas lui que je vais choisir (désolé 😚).

C’est un nom que j’aimais beaucoup c’est vrai. Et j’ai bien cru que c’est celui-là que je choisirais.

Mais une réflexion récente sur ma différenciation avec mes concurrents m’a poussé à en choisir un autre.
Perfect Page me semble trop similaire, en termes de branding et de message, aux noms de mes concurrents : Instapage, Lead Pages, Swipe Pages, Unbounce, Landingi.

Alors j’ai finalement choisi Hero Page.

Ce nom me semble plus aligné avec mon branding :

Le guidage de mes utilisateurs (les Héros) vers des pages qui convertissent et s’optimisent.
Rendre fun et accessible la création de pages de vente.
Donner des superpouvoirs aux utilisateurs pour créer des pages de vente nettement meilleures que la concurrence.

Ce nom est aussi en phase avec un style graphique un peu plus “léger” et “fun”, qui viendra se différencier des concurrents.

La signification du nom est aussi plutôt sympathique je trouve.
Voici la signification selon ChatGPT :

"Hero" : Dans le design web, le terme "hero" fait référence à la partie la plus visible ou la plus importante d'une page web, généralement située au-dessus de la ligne de flottaison ("above the fold"). Elle capte l'attention de l'utilisateur dès son arrivée.
"Hero page" : Cela pourrait désigner une page entière où l'accent est mis sur une section "hero," c'est-à-dire une page très visuelle et impactante, conçue pour faire une forte première impression et orienter rapidement l'utilisateur vers une action ou un message clé.

Pour ceux qui connaissent le marketing et qui savent ce qu’est la section “Hero” d’une page, ce nom a une signification qui me plaît bien.

Et pour ceux qui prennent le nom au premier degré, voici ce qu’en dit ChatGPT :

Une page héroïque, ce qui pourrait sembler poétique ou dramatique. Peut-être une page importante, emblématique, ou "qui fait l’histoire."

Le nom sera donc Hero Page car :

Il est aligné avec la mission de mon branding et ses valeurs
Il permet de me différencier des concurrents
Il peut faire référence à une page qui est conçue pour faire une forte première impression
Il peut faire référence à une page qui “fait l’histoire”
C’est anglophone et quand même facile à dire et écrire pour des français.

3. Créer la charte graphique

Maintenant on passe à l’action ! 💪

Il est temps de créer la charte graphique maintenant qu’on est au point sur les concurrents et notre branding.

Voici les éléments à définir :

A. Les couleurs

Pour la définition des couleurs on peut s’appuyer sur leur signification. Et si on en croit cet article de Macap (qui correspond à ce qu’on peut trouver sur d’autres sources), voici ce que ça donne :

Rouge

Représente la puissance, la force, la passion, l’amour.

Jaune

Représente l’optimisme, la joie de vivre, la chaleur et la lumière.

Vert

Représente la nature, l’optimisme, l’espérance et la croissance.

Violet

Représente le mystère, la spiritualité, la magie et l’élégance.

Orange

Représente l’enthousiasme, l’ambition, l’action, l’énergie.

Rose

Représente la féminité, la romance, la douceur, l’innocence.

Bleu

Représente la fiabilité, la tranquillité, la vérité.

Marron

Représente l’authenticité, le naturel.

Noir

Représente la rigueur, la sophistication, l’élégance.

Blanc

Représente la pureté, la perfection, la propreté, l’innocente, la virginité.

B. La typographie

Le choix du type de police de caractères est aussi très important.

Une police comme celle-ci :

Sera signe d’élégance.

Mais elle est aussi difficilement lisible et sera donc à consacrer que pour certains endroits bien spécifiques.

Il faut trouver une police qui corresponde à notre branding et au message qu’on veut faire passer.
Mais il faut aussi qu’elle soit suffisamment lisible pour ne pas faire fuire les visiteurs.

On pourra aussi choisir une police différente pour les titres et les textes “normaux”.

C. Le logo

Je suis tombé sur cet article de ebaqdesign qui explique en détail comment créer son logo.

Il est très intéressant. Je te conseille de le lire si tu t’apprêtes à créer ton logo 😉.

D. Les éléments d’une page

Il s’agit ici de définir les styles qu’on voudra mettre en place sur les différents éléments d’une page afin de garder en cohérence :

Les boutons
Les cards
Les liens
etc…

Qu’est-ce que ça donne pour notre projet ?

Je me suis attelé à la tâche et vais te révéler incessamment sous peu ce que ça donne pour Hero Page 🤩.

J’ai fait le choix de partir sur un style Neo-Brutalisme.
Un style qui commence à être bien connu et qui est devenu tendance vers 2023 j’ai l’impression.

Voici quelques exemples si ça ne te parle pas :

C’est un style qui peut représenter un certain risque pour plusieurs raisons :

C’est particulier, on aime ou on n’aime pas
Ça peut nuire à la lisibilité et à l’accessibilité

Mais je suis convaincu qu’en m’y prenant correctement et sans exagérer je peux annuler ces inconvénients 😁.

Je l’ai choisi car il comporte plusieurs avantages importants pour moi :

Ce n’est pas difficile à faire : ce qui est pratique pour un non designer comme moi 😅, et il y a des tutos pour t’expliquer comment t’y prendre.
C’est un style qui est très différenciant : surtout par rapport à mes concurrents
C’est un style qui est plutôt bien apprécié dans un milieu de freelances et designers : ce qui m’arrange
C’est un style qui permet de se faire remarquer : on le reconnait et on le voit tout de suite contrairement aux styles plus neutres dont on est trop habitués
C’est un style qui permet de donner une impression d’innovation : ce qui est plutôt cool