On entend souvent ce terme lorsque l’on parle de webdesign, mais qu’est ce qu’un brand board exactement?

Le brand board ( parfois écrit « brandboard » en un seul mot) ou littéralement en français « tableau de marque » est un document qui regroupe sur une page tous les éléments graphiques de votre marque.

C’est une sorte de charte graphique, mise en page sur de manière à résumer d’un coup d’oeil toute votre identité visuelle.

C’est la feuille de route de votre identité de marque. Lors de la création de votre site internet, le développeur ou l’agence de communication reprend chacun des éléments, et sait d’avance quels éléments il doit intégrer. Votre brandboard sera utile pour absolument tous vos différents supports de communication. L’ensemble des canaux doit être cohérent pour que votre client ne soit pas perdu dans votre communication d’entreprise. 

Parfois, aucun des supports ne ressemble à un autre… Et en regardant les cartes de visite, la page Facebook, puis le site, on se demande s’il s’agit d’entreprises différentes !

**Dans cet article, nous allons parler de logiciels.
Il contient des liens affiliés vers un produit que j’utilise dans le cadre de mon travail, et que j’apprécie : Divi **

🎨 Le template Canva se refait une beauté, il revient dans quelques jours 😉

Qu’est-ce qu’on trouve sur un brand board ?

Votre brandboard comportera les éléments graphiques de référenceque vous utilisez partout et tout le temps pour communiquer. Ce sont aussi les éléments qui figurent sur vos packagings, plaquettes ou site web.

• Le logo et les logotypes alternatifs
• Les polices : différentes typographies pour les titres et le corps du texte
• La palette de couleurs : les déclinaisons de teintes que vous retrouverez sur l’ensemble du site, sur vos visuels Instagram, vos flyers, etc. 
• Des patterns
• Des icônes, notamment si l’agence de création graphique a conçu des pictogrammes personnalisés pour vous
• Des images d’inspiration, qui reflètent l’ambiance de votre marque. Ce sont souvent des images auxquelles ont peut instinctivement accoler un adjectif, par exemple : vintage, tropical, chaleureux, ou urbain. Et qui POUR VOUS sont très cohérentes avec l’image de votre entreprise, et l’émotion que doit ressentir votre client face à vos produits.

Et rien de plus! Sauf si vous avez d’autres éléments qui symbolisent votre marque.

C’est un document très bref, il tient sur une seule page, et ne contient aucune indication textuelle. Il parle seulement à la partie de votre créative de votre cerveau, celle qui se passe d’explications.

Comment créer un brand board ?

L’agence de communication va créer un brand board grâce à des logiciels de création graphique ou de traitement d’image, comme Photoshop ou Illustrator.

Le ou la graphiste aura généralement travaillé avec vous sur votre identité visuelle dès le début de votre projet.
Pour ça, l’agence de graphisme aura fait un véritable travail d’enquête sur vous, votre stratégie de communication, votre client cible, etc.

Peut-on créer soi-même son propre brand board ?

C’est donc la personne qui a crée l’identité visuelle qui va vous fournir ce document, et non l’inverse. Et vous pourrez l’utiliser lors de vos collaborations avec d’autres professionnels : web designer, imprimerie, etc.

Cependant, rien ne vous interdit de vous essayer à cet exercice. Surtout si vous avez l’intention de créer votre site internet vous-même. Un brandboard va vous permettre de rester bien concentré.e et cohérent.e sur toutes les pages.
Si vous ne disposez pas de logiciel vectoriel (et/ou que vous n’avez pas 6 mois devant vous pour apprendre à les utiliser), vous pouvez vous lancer simplement avec Canva. Créez un long document vertical (par exemple 800 X 2000 px) et faites des essais!

Cet article pourrait vous intéresser : 
Comment créer des visuels pour son site internet avec Canva?« 

Attention, vous aurez besoin d’un compte Canva Pro pour ajouter vos polices personnalisées.
Généralement, il suffit de regrouper les éléments que l’on possède déjà, et de les présenter sur une seule page.
Il n’y a aucune obligation : vous pouvez disposer les éléments comme bon vous semble, tant que ça reste lisible.

Vous pouvez retrouvez des centaines de modèles de brandboards dans ce tableau Pinterest.

Comment intégrer votre brandboard dans votre site WordPress ?

Une fois votre brandboard créé, il est temps de l’intégrer concrètement dans votre site. Voici comment faire sur un site WordPress et classique et avec un constructeur de pages comme Divi.

Méthode 1 : Les réglages WordPress natifs (niveau débutant)

WordPress permet de personnaliser certains éléments de votre identité visuelle directement dans l’interface, sans toucher au code.

Où trouver ces réglages :

• Dans votre tableau de bord WordPress
• Allez dans Apparence → Personnaliser
• Puis Typographie et Couleurs

Ce que vous pouvez paramétrer :

• La police de vos titres et de vos paragraphes
• Votre palette de couleurs principale
• Votre logo (version claire et foncée)

Cette méthode convient si vous utilisez un thème WordPress basique et n’avez pas besoin de beaucoup de flexibilité.

Méthode 2 : Avec Divi (niveau intermédiaire – recommandé)

Divi est un constructeur visuel WordPress qui vous permet d’intégrer tous les éléments de votre brandboard à votre site de manière beaucoup plus complète et flexible.

Pourquoi utiliser Divi pour votre site ?

• Liberté totale : Personnalisez chaque élément visuellement : vous voyez en direct ce que vous changez ;
• Cohérence garantie : Avec Divi 5, vous appliquez votre palette et vos polices sur tout le site d’un coup ;
• -> Gain de temps : Plus besoin de modifier chaque page une par une
• Indépendance : Vos réglages restent même si vous changez de thème et vous pouvez même les exporter.

Intégrer vos polices dans Divi

Étape 1 : Dans le tableau de bord WordPress, allez dans Divi → Personnaliseur de thème.
Vous arrivez dans les réglages de WordPress.

Étape 2 : Cliquez sur Typographie

Étape 3 : Vous pouvez définir :

• Police pour les titres H1, H2, H3, etc.
• Police pour le corps du texte et les liens
• Tailles, espacements, graisses

Étape 4 : Uploadez vos polices personnalisées si besoin.

Définissez ces polices au niveau du thème, pas page par page.

Intégrer votre palette de couleurs dans Divi

La méthode classique :

1. Allez dans Divi → Options du thème
2. Vous allez voir 8 cercles, dans lesquelles vous pouvez ajouter des couleurs.
3. Cliquez sur chacun d’entre eux et entrez les codes de vos couleurs.
4. Cliquez sur le bouton « Sauvagarder », tout en bas de la page.

Une fois enregistrées, ces couleurs apparaissent dans l’éditeur Divi, à chaque fois que vous aurez la possibilité de choisir les couleurs d’un éléments : textes, boutons, liens, fonds, etc.

Plus besoin de chercher vos codes couleurs à chaque fois !

Nouveauté Divi 5 : les variables de couleurs

Nouveau avec Divi 5 : le système de variables révolutionne la gestion de votre brandboard.

Ce qui change :

• Variables globales : définissez une couleur une seule fois, utilisez-la partout ;
• Modification en temps réel : modifiez une variable et TOUT le site se met à jour instantanément ;
• Organisation avancée : créez des groupes de couleurs (primaires, secondaires, accents) ;
• Mode sombre automatique : définissez des variations de teintes pour chaque mode.

Comment utiliser les variables Divi 5 :

1. Dans l’éditeur Divi, ouvrez le panneau latéral de gauche ;
2. Allez dans l’onglet « Variables » (nouveau dans Divi 5) ;
3. Ajoutez vos variables de couleurs ici :
   • --couleur-principale : #votre-code-hex
   • --couleur-secondaire : #votre-code-hex
   • --couleur-accent : #votre-code-hex
4. Vous pouvez ensuite utiliser ces variables dans n’importe quel module Divi

Exemple concret : 
Au lieu de remettre #E8B4A5 (votre rose poudré) 50 fois sur votre site, vous créez une variable --rose-poudre et l’utilisez partout.
Et si un jour vous voulez changer de rose ? Pas de problème : vous modifiez cette variable une seule fois, et TOUT votre site se met à jour. Pas besoin de retourner dans chaque module (chaque bouton, chaque titre, chaque fond) où vous aviez choisi le rose poudré manuellement.

Un gain de temps de plusieurs heures !

Note : La mise à jour vers Divi 5 est actuellement en version Beta.
La version stable sortira prochainement. 
Essayez Divi dès maintenant avec 30 jours gratuits →

Enregistrer votre brandboard comme « preset » dans Divi

Une astuce méconnue mais ultra-puissante :

Divi vous permet de sauvegarder vos combinaisons de couleurs/polices comme « presets » (présélections).

Comment faire :

1. Créez un module (par exemple un bouton) avec l’une des couleurs et l’un des polices de votre brandboard ;
2. Cliquez sur l’icône des trois points ;
3. Sélectionnez « Enregistrer comme preset » ;
4. Nommez-le de manière reconnaissable : par exemple « Bouton Brandboard [Votre marque] ».

Résultat : En un clic, vous appliquez ces réglages à n’importe quel élément de votre site pour rester cohérente avec votre brandboard.

Fini le copier-coller de codes couleurs !

Utiliser votre brandboard pour les modules Divi

Une fois vos couleurs et vos polices intégrées dans les réglages de Divi, voici comment les utiliser concrètement :

1 . Boutons :

• Couleur de fond = votre couleur principale ;
• Une couleur qui contraste bien pour que ce soit lisible ;
• Avec Divi, vous pouvez choisir l’exact inverse au survol : quand on passe la souris, le fond du bouton devient foncé et le texte clair.

2. Titres :

• H1, H2 = la police de titres de votre brandboard ;
• Couleur = votre couleur d’accent ou principale (si elle est assez foncée pour être lisible sur un fond clair).

3. Sections :

• Fond = Une couleur neutre et claire de votre palette ;
• Ou une image d’ambiance de votre brandboard, que vous pouvez rendre plus transparente.

Astuce : Créez 2-3 « sections types » que vous réutilisez souvent (hero, témoignages, appel à l’action) et enregistrez-les dans votre bibliothèque Divi.

Pourquoi Divi est parfait pour appliquer votre brandboard ?

1. Cohérence automatique : vous définissez vos couleurs et vos polices une fois, et elles s’appliquent partout. Plus de risque d’oublier un bouton avec la mauvaise couleur.

2. Flexibilité totale : vous n’êtes pas limitée, vous pouvez reproduire EXACTEMENT votre brandboard.

3. Mise à jour facile : votre marque évolue ? Changez vos couleurs dans Divi, et tout le site se met à jour en quelques minutes.

4. La bibliothèque de modèles : Divi propose 1000+ templates pro. Vous choisissez celui qui vous plaît, vous y appliquez votre brandboard, et vous avez un site personnalisé en quelques minutes. Il ne vous reste plus qu’à ajouter vos textes.

Une fois votre brandboard intégré dans Divi, vous pouvez choisir parmi 1000+ templates professionnels et les personnaliser en quelques heures au lieu de plusieurs jours. »

5. Pas de code requis Tout se fait visuellement. C’est utilisable facilement, quelles que soient vos compétences en informatique.

→ Essayez Divi gratuitement pendant 30 jours

Comment utiliser son brandboard ?

Vous l’utiliserez à chaque fois que votre marque sera représentée quelque part en dehors de votre bureau !

En premier, vous allez le scotcher quelque part bien en évidence.

Et vous allez vous y référer dès que :

• Sortez un nouveau produit : le packaging devra évidemment être cohérent avec tout le reste de votre identité visuelle et de la campagne de communication pour ce produit.
• Créez un support imprimé : des plaquettes ou des flyers, des carte de visite, des brochures, des affiches, ou toute commande de communication print
• Postez sur les réseaux. Une image dans votre feed Instagram, une publication Facebook sous forme de visuel, etc. En général, tout devrait être cohérent afin de ne pas se diluer dans la masse d’informations que voient vos abonnés chaque jour. (et aussi si vous aimez que votre flux Instagram prenne la forme d’une jolie grille aux couleurs assorties…)
• Créez un site internet. Dans ce cas, vous le fournirez au développeur en charge de cette partie, afin qu’il utilise les bonnes typographies (de titres, de paragraphes, entre autres), la bonne palette de couleur et qu’il ait une vision d’ensemble des éléments graphiques à intégrer (icônes personnalisées, variantes du logo, boutons).

L’importance d’avoir une marque claire

D’ailleurs, vous êtes déjà instinctivement convaincue de l’importance de la cohérence pour votre notorieté. Même si vous n’avez pas vraiment l’impression que vos produits ou services sont les fruits de votre « marque ».

Par exemple, si vous êtes photographe : tout votre travail a certainement un thème, une caractéristique qui le rend reconnaissable parmi celui d’autres collègues.
Il est peut être plus « vintage », « alternatif », « lumineux », « chaud » que celui des autres.
Et instinctivement, vous seriez tenté d’y associer des polices manuscrites élégantes. Ou des éléments ésotériques. Ou des motifs végétaux.
Bref, vous avez déjà une marque. Elle est là, dans votre tête.

Le brandboard est juste l’équivalent papier de cet ensemble de concepts abstraits.
Il montre, en un coup d’oeil, les aspects officiels de votre identité visuelle.

Votre brandboard va exprimer en une seconde toute l’identité visuelle de votre entreprise, sans que vous n’ayez à partir dans des explications incroyables.
Il est le garant de la cohérence de votre gamme de produits et de vos support de com, auprès de tous les professionnels avec qui vous allez collaborer (à commencer par vous !).

Questions fréquentes sur les brandboards

Quelle est la différence entre un brandboard et une charte graphique ? 

Le brandboard est une version condensée et visuelle de la charte graphique. Il tient sur une page et montre l’essentiel (couleurs, polices, logo). La charte graphique est un document plus long et plus complet et elle inclut des règles d’utilisation assez détaillées.

Puis-je créer mon brandboard gratuitement ? 

Oui ! Vous pouvez utiliser Canva gratuit pour créer une version simple. Pour une version professionnelle avec polices personnalisées, la version Canva Pro est nécessaire. Ou vous pouvez aussi appel à un·e graphiste.

Comment utiliser mon brandboard avec Divi ? 

Divi vous permet d’intégrer facilement tous les éléments de votre brandboard : couleurs, polices, logos. Avec Divi 5, vous pouvez même créer des variables de couleurs qui permettent de changer les polices et les couleurs de tout le site en un clic. (cf. guide complet plus haut).

Dois-je refaire mon brandboard si ma marque évolue ? 

Pas nécessairement. Vous pouvez faire évoluer votre brandboard progressivement (ajuster une couleur, une police). Si votre positionnement change radicalement, alors oui, un nouveau brandboard peut être nécessaire.