Moodboard : comment passer de l’inspiration à une véritable direction artistique ?

Figma définit également le moodboard comme un collage physique ou numérique permettant de définir une direction de design à partir d’images, de couleurs, de typographies et d’autres références.

Cette définition est importante.

Le moodboard n’est pas encore le design final.

Il permet de définir une ambiance avant de commencer à prendre des décisions beaucoup plus précises.

On pourrait presque le voir comme un vocabulaire visuel provisoire.

Il commence à dire :

• ce que la marque pourrait dégager ;
• quelle énergie elle pourrait transmettre ;
• dans quel univers elle pourrait évoluer ;
• et quelles références semblent pertinentes pour construire son identité.

Un moodboard n’est pas simplement un tableau Pinterest

Pinterest, Behance ou d’autres plateformes sont extrêmement utiles pour chercher des références.

Je les utilise moi-même.

Mais il existe une différence importante entre une collection d’images et un moodboard réellement construit.

Une collection dit :

« J’aime ces images. »

Un moodboard doit progressivement pouvoir dire :

« Ces références ont quelque chose en commun et cette logique pourrait être pertinente pour cette marque. »

Cette différence change complètement la démarche.

Si j’enregistre une belle affiche parce que j’aime sa typographie, une photo parce que j’aime sa couleur et une interface parce que j’aime ses animations, je possède trois inspirations.

Mais elles ne constituent pas forcément un univers cohérent.

Le moodboard commence lorsqu’on essaie de comprendre :

• pourquoi certaines références fonctionnent ensemble ;
• quelles caractéristiques se répètent ;
• quels éléments sont réellement intéressants pour le projet ;
• et lesquels ne sont finalement présents que parce qu’ils correspondent à mes goûts personnels.

Accumuler des références est facile. Construire une direction demande de choisir.

Avant de chercher des images : comprendre le projet

La recherche graphique ne devrait pas commencer complètement au hasard.

Avant de créer un moodboard, j’essaie de comprendre plusieurs éléments.

La marque

• Quelle est son activité ?
• Quelle est son histoire ?
• Quelles sont ses valeurs ?
• Quelle image possède-t-elle aujourd’hui ?
• Quelle image souhaite-t-elle avoir demain ?

Le public

• À qui s’adresse-t-elle ?
• Existe-t-il plusieurs cibles ?
• Quels codes connaissent-elles ?
• Qu’est-ce qui peut les rassurer ou au contraire les surprendre ?

Le positionnement

• Premium ou accessible ?
• Institutionnel ou décontracté ?
• Sobre ou expressif ?
• Traditionnel ou expérimental ?
• Technique ou émotionnel ?

Les contraintes

L’identité doit-elle fonctionner uniquement sur un site web ?

Ou aussi sur :

• des réseaux sociaux ;
• des documents commerciaux ;
• des emballages ;
• des enseignes ;
• des vêtements ;
• des stands ;
• des supports imprimés ?

Plus ces éléments sont clairs, plus les recherches peuvent devenir pertinentes.

C’est d’ailleurs la logique que nous utilisons dans notre prestation de création d’identité visuelle et de charte graphique chez TooNetCreation : comprendre le positionnement précède la recherche créative et le moodboard.

Que mettre dans un moodboard ?

Il n’existe pas de liste obligatoire.

Le contenu dépend surtout du projet.

Mais plusieurs catégories peuvent être intéressantes.

Des images d’ambiance

Elles permettent de transmettre une sensation générale.

Par exemple :

• une lumière très chaude ;
• une ambiance nocturne ;
• une esthétique futuriste ;
• des matières naturelles ;
• une atmosphère très urbaine ;
• un univers très doux et pastel.

Des couleurs

Pas nécessairement une palette définitive.

Quelques associations suffisent parfois pour exprimer une direction.

Des typographies

Une typographie peut transmettre énormément de personnalité.

Des compositions

Je peux intégrer des exemples de :

• superpositions ;
• collages ;
• grilles ;
• asymétries ;
• grands aplats ;
• mises en page très aérées ;
• ou au contraire de compositions beaucoup plus denses.

Des matières et textures

Papier, métal, chrome, tissu, plastique, verre, grain photographique ou matière naturelle peuvent contribuer à définir une sensation.

Des formes

Angles très nets, formes organiques, lignes fines, cercles, vagues, blocs massifs...

Ces choix commencent déjà à créer un langage.

Des références d’interface

Pour un projet web, je peux aussi intégrer des exemples de :

• boutons ;
• menus ;
• cartes ;
• animations ;
• traitements photographiques ;
• effets au survol.

Pourquoi je cherche aussi des références hors du secteur du client

Analyser les concurrents est utile.

Il faut connaître les codes d’un marché.

Mais si je travaille sur une entreprise et que je regarde uniquement dix concurrents directs, il existe un risque :

finir par produire une onzième version du même univers.

Imaginons que toutes les entreprises d’un secteur utilisent :

• du bleu foncé ;
• une typographie sans serif ;
• des photographies très institutionnelles ;
• des pictogrammes linéaires ;
• des cartes blanches sur fond gris.

Ces choix ont peut-être une raison.

Mais cela ne signifie pas qu’il faut automatiquement les reproduire.

Une inspiration issue d’un autre domaine peut ouvrir une piste intéressante.

Une marque B2B peut par exemple s’inspirer :

• du monde éditorial pour sa typographie ;
• de l’architecture pour ses compositions ;
• du packaging pour ses couleurs ;
• de la mode pour ses associations ;
• de la signalétique pour sa hiérarchie.

L’objectif n’est pas de copier ces univers.

Il s’agit d’identifier des principes graphiques que l’on peut réinterpréter.

Le vrai travail commence au moment de sélectionner

Au début de mes recherches, j’aime pouvoir explorer assez largement.

Je peux enregistrer beaucoup de choses.

Mais le moodboard final doit être beaucoup plus sélectif.

Figma conseille d’ailleurs de privilégier un ensemble relativement limité de références fortes plutôt qu’une accumulation dans laquelle la direction finit par se perdre.

La question devient alors :

qu’est-ce que je garde et pourquoi ?

Pour chaque référence, je peux essayer d’identifier ce qui m’intéresse réellement :

• la palette ;
• la photographie ;
• le contraste ;
• la typographie ;
• la composition ;
• la matière ;
• le rythme ;
• la sensation générale.

C’est une étape importante car deux images peuvent sembler complètement différentes tout en partageant le même principe.

À l’inverse, deux images très jolies peuvent ne rien avoir à faire ensemble.

Un bon moodboard ne contient pas nécessairement mes références préférées. Il contient les références les plus utiles pour raconter la direction choisie.

Utiliser des mots pour préciser une direction visuelle

Un moodboard est principalement visuel, mais j’aime aussi travailler avec des mots.

Quelques adjectifs peuvent aider à clarifier ce que l’on cherche à exprimer.

Par exemple :

• audacieux ;
• chaleureux ;
• précis ;
• joyeux ;
• premium ;
• artisanal ;
• brut ;
• élégant ;
• énergique ;
• accessible ;
• expérimental ;
• rassurant.

L’intérêt est ensuite de confronter les images à ces mots.

Si la marque veut être « chaleureuse et accessible », mais que toutes les références choisies sont très froides, luxueuses et distantes, il existe probablement une incohérence.

Les mots permettent aussi de mieux expliquer le moodboard au client.

Au lieu de dire :

« J’ai choisi cette photo parce que je la trouve jolie. »

on peut expliquer :

« Cette lumière chaude et cette matière participent à l’idée de proximité et d’authenticité que nous voulons transmettre. »

La discussion devient beaucoup plus intéressante.

Le rôle des couleurs dans un moodboard

Le moodboard permet de commencer à explorer les couleurs sans avoir besoin de définir immédiatement une palette complète.

Je peux observer :

• les teintes dominantes ;
• les couleurs d’accent ;
• les contrastes ;
• la saturation ;
• la température générale de la palette.

Une combinaison rose fuchsia, chrome et noir ne raconte évidemment pas la même chose qu’une association beige, vert sauge et brun.

Mais il faut éviter de transformer trop tôt le moodboard en charte graphique.

À ce stade, on explore encore.

La palette définitive devra ensuite répondre à d’autres questions :

• la lisibilité ;
• les contrastes ;
• les usages sur le web ;
• les différents états d’interface ;
• les supports imprimés ;
• l’accessibilité.

Le moodboard donne une direction.

La charte transformera ensuite cette direction en règles.

Comment intégrer les typographies dans un moodboard ?

La typographie est l’un des éléments qui peuvent changer le plus rapidement la personnalité d’un univers.

Dans un moodboard, je peux donc intégrer :

• des caractères très expressifs ;
• des polices éditoriales ;
• des sans serif très neutres ;
• des caractères manuscrits ;
• des exemples de contrastes entre plusieurs familles.

Il n’est pas nécessaire d’avoir déjà choisi exactement les polices qui seront utilisées.

Je peux simplement vouloir exprimer :

« J’aimerais aller vers un titre très graphique associé à des textes beaucoup plus sobres. »

C’est déjà une information importante.

Pour moi, une typographie expressive fonctionne particulièrement bien lorsqu’elle est utilisée à des endroits précis :

• grands titres ;
• accroches ;
• chiffres ;
• citations ;
• éléments très courts.

Les contenus longs demandent généralement davantage de simplicité.

Le moodboard permet justement de commencer à chercher cet équilibre.

Images, matières, textures et formes : créer une sensation

Une direction artistique ne se résume pas à une couleur et deux polices.

Les matières et les textures peuvent apporter beaucoup de personnalité.

J’aime par exemple observer :

• un effet chromé ;
• un grain photographique ;
• une matière textile ;
• un papier imprimé ;
• des reflets ;
• une transparence ;
• des formes organiques ;
• des compositions en collage.

Même si ces éléments ne seront pas tous utilisés littéralement dans le site final, ils permettent de construire une sensation commune.

Un effet textile peut par exemple inspirer une texture d’arrière-plan.

Une composition éditoriale peut influencer la manière de positionner des images.

Un objet chromé peut suggérer un traitement de bouton ou d’illustration.

La référence n’a pas besoin d’être reproduite pour être utile.

Le moodboard comme outil de dialogue avec le client

C’est probablement l’une de ses fonctions les plus importantes.

Les mots utilisés pour parler de design sont très subjectifs.

Lorsque quelqu’un dit :

« Je voudrais quelque chose de moderne. »

cela peut signifier énormément de choses.

Moderne peut vouloir dire :

• minimaliste ;
• technologique ;
• très coloré ;
• premium ;
• brutaliste ;
• géométrique ;
• très éditorial.

Le moodboard permet de rendre ces mots visibles.

L’Interaction Design Foundation souligne justement que les moodboards permettent de communiquer visuellement les valeurs et émotions recherchées et de créer un consensus entre designers et parties prenantes.

Cela évite d’attendre la première maquette complète pour découvrir que chacun imaginait une direction totalement différente.

Un retour comme :

« Cette première piste me ressemble beaucoup plus, mais j’aime la typographie de la seconde »

est extrêmement utile à ce stade.

Il coûte beaucoup moins cher de modifier un moodboard que de recommencer une identité complète.

Faut-il proposer plusieurs moodboards ?

Pas systématiquement.

Mais lorsque plusieurs territoires créatifs semblent pertinents, cela peut être intéressant.

Par exemple, une même marque pourrait explorer :

Piste 1 : élégante et minimaliste

Palette sobre, grandes photographies, espaces importants et typographie éditoriale.

Piste 2 : expressive et colorée

Couleurs contrastées, compositions plus libres, superpositions et typographies plus fortes.

Piste 3 : naturelle et artisanale

Matières, photographies chaleureuses, teintes organiques et formes moins géométriques.

L’intérêt n’est pas de demander au client de choisir entre trois décorations.

Il s’agit de montrer trois manières différentes de traduire son positionnement.

Les échanges permettent ensuite de converger.

On peut aussi découvrir qu’une solution intéressante se trouve entre deux pistes.

Du moodboard à la direction artistique : le moment où il faut décider

Un moodboard donne une orientation.

Une direction artistique va beaucoup plus loin.

Elle transforme les références en choix propres au projet.

C’est une distinction importante.

Une image du moodboard ne doit pas devenir un élément à copier.

Elle doit aider à décider.

Par exemple :

• plusieurs références utilisent de grandes typographies très contrastées : nous pouvons décider d’adopter ce principe ;
• plusieurs images reposent sur une association rose et orange : cette combinaison peut devenir une piste de palette ;
• les compositions utilisent souvent des superpositions : ce principe peut devenir un élément de langage graphique ;
• les images montrent toutes une lumière très naturelle : le traitement photographique peut reprendre cette logique.

À partir de là, on ne suit plus les références.

On commence à créer l’identité propre du projet.

Du moodboard à l’interface UX/UI

Une direction graphique peut être très réussie sur une planche et beaucoup moins convaincante lorsqu’elle doit devenir un véritable site internet.

Une interface doit accueillir :

• des menus ;
• des textes ;
• des formulaires ;
• des boutons ;
• des tableaux ;
• des fiches ;
• des contenus longs ;
• des interactions ;
• une version mobile.

C’est à ce moment que la direction artistique doit rencontrer l’expérience utilisateur.

Une typographie très expressive peut fonctionner sur un grand titre mais devenir illisible sur un paragraphe.

Une superposition peut donner énormément de personnalité à une introduction mais compliquer une zone fonctionnelle.

Une palette très riche peut parfaitement fonctionner si les actions importantes restent identifiables.

Kim développe plus précisément cette complémentarité dans son article sur les différences entre UX et UI et leur rôle dans un site web.

Chez TooNetCreation, c’est également l’objectif de notre approche de conception UX/UI et expérience utilisateur : donner une personnalité à l’interface sans perdre de vue les usages.

Moodboard et wireframe : deux outils très différents

Les deux peuvent intervenir assez tôt dans un projet, mais ils ne répondent pas du tout à la même question.

Ils peuvent ensuite se rejoindre dans la maquette.

Le wireframe donne une structure.

Le moodboard donne une direction visuelle.

La maquette doit réussir à faire fonctionner les deux ensemble.

Kim explique en détail cette autre étape dans son article « Qu’est-ce qu’un wireframe ? ».

Moodboard et identité visuelle : quelle différence ?

Là encore, le moodboard n’est pas l’identité finale.

Il sert à préparer sa construction.

L’identité visuelle définit ensuite :

• le logo ;
• la palette officielle ;
• les typographies ;
• les formes ;
• le traitement des images ;
• les éléments graphiques ;
• les règles de composition ;
• les principes de déclinaison.

Le premier article que j’ai consacré à ce sujet explique justement comment construire une identité visuelle forte sans sacrifier l’expérience utilisateur.

Le moodboard intervient en amont.

Il permet d’explorer avant de figer.

9 erreurs fréquentes lors de la création d’un moodboard

1. Commencer sans objectif

Si l’on ne sait pas ce que la marque doit transmettre, toutes les images peuvent sembler intéressantes.

2. Sauvegarder uniquement ce que l’on aime personnellement

Le designer ne crée pas son propre univers. Il construit celui du projet.

3. Regarder uniquement les concurrents

C’est une bonne manière de finir par leur ressembler.

4. Mettre beaucoup trop de références

Si personne ne sait ce qu’il doit regarder, la planche ne joue plus son rôle.

5. Mélanger plusieurs directions contradictoires

Une référence peut être très intéressante et malgré tout ne pas appartenir à cette piste.

6. Présenter le moodboard sans explication

Le client doit comprendre ce que chaque groupe de références cherche à exprimer.

7. Confondre inspiration et copie

Une référence sert à identifier un principe, pas à reconstruire le même design.

8. Valider uniquement une ambiance sans penser aux usages

Une identité destinée au web devra fonctionner dans de véritables interfaces.

9. Considérer le moodboard comme définitif

Il peut évoluer lorsque les recherches et les discussions font apparaître une direction plus pertinente.

Ma méthode pour construire un moodboard

Je n’applique pas exactement la même procédure à tous les projets, mais je retrouve généralement plusieurs étapes.

1. Comprendre le projet

Je commence par le contexte, la marque, son public et ses objectifs.

2. Définir quelques mots-clés

Ils me servent de point de départ pour la recherche.

3. Analyser le secteur

Je regarde les codes existants, ce qui fonctionne et ce qui est extrêmement répandu.

4. Élargir les références

Je cherche volontairement des inspirations ailleurs.

5. Collecter assez librement

Au début, je préfère ne pas filtrer trop vite.

6. Trier

Je supprime ensuite énormément d’éléments.

7. Regrouper

Je cherche les références qui partagent la même énergie ou les mêmes principes.

8. Construire la composition

Le moodboard lui-même doit être lisible. Les éléments importants peuvent être plus grands et les références secondaires venir les compléter.

9. Ajouter des annotations si nécessaire

Quelques mots permettent d’expliquer ce qui m’intéresse dans certaines références.

10. Présenter et discuter

Le retour du client permet de vérifier que la direction correspond réellement à sa marque.

11. Transformer l’inspiration en décisions

Le travail d’identité visuelle et de direction artistique peut alors commencer.

Figma propose une démarche assez proche : définir l’objectif, collecter les inspirations, assembler la planche, ajouter du contexte puis recueillir des retours. Leur guide complet sur la création d’un moodboard constitue une ressource intéressante pour approfondir cette méthode.

Le but n’est pas de collecter le maximum d’inspiration. Le but est d’arriver au moment où l’on sait dans quelle direction commencer à créer.

FAQ : moodboard et direction artistique

Qu’est-ce qu’un moodboard ?

Un moodboard est une planche d’ambiance regroupant des images, couleurs, typographies, matières, formes et autres références permettant de définir une direction visuelle avant la création d’une identité ou d’un design.

À quoi sert un moodboard ?

Il permet de matérialiser une intention créative, de rechercher une cohérence entre plusieurs références et de faciliter les échanges entre le designer, le client et les autres personnes impliquées dans le projet.

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

Le moodboard correspond à une phase d’exploration. La charte graphique formalise ensuite les choix définitifs : logo, couleurs, typographies, règles d’utilisation et principes de déclinaison.

Quelle est la différence entre un moodboard et un wireframe ?

Le moodboard travaille principalement l’ambiance et la direction graphique. Le wireframe travaille la structure, la hiérarchie des contenus et le fonctionnement de l’interface.

Combien d’images faut-il mettre dans un moodboard ?

Il n’existe pas de règle universelle. L’objectif est surtout d’avoir suffisamment de références pour exprimer clairement une direction sans créer un ensemble tellement chargé que le message devient difficile à comprendre.

Peut-on utiliser Pinterest pour créer un moodboard ?

Pinterest est très pratique pour rechercher et collecter des inspirations. Il reste toutefois utile de faire ensuite un travail de sélection, d’organisation et d’explication afin de transformer cette collection en véritable direction créative.

Faut-il montrer le moodboard au client ?

Dans de nombreux projets, oui. Il permet de valider une orientation créative avant d’investir davantage de temps dans le logo, la charte graphique ou les maquettes détaillées.

Le moodboard contient-il les couleurs définitives ?

Pas nécessairement. Il peut suggérer une ambiance colorimétrique. La palette précise et ses règles d’utilisation seront généralement définies plus tard dans le processus d’identité visuelle.

Quels outils utiliser pour créer un moodboard ?

Il existe de nombreux outils. Figma et FigJam permettent notamment de regrouper des références, travailler à plusieurs et recueillir des commentaires. D’autres outils de création graphique ou même une planche physique peuvent parfaitement convenir.

Sources et ressources pour aller plus loin

• Figma / FigJam – How to make a mood board in 5 simple steps : définition, contenu et méthode de création d’un moodboard.
• Figma – Moodboard Maker : exemples et modèles pour structurer une recherche visuelle.
• Interaction Design Foundation – What are Mood Boards in UX Design? : rôle des moodboards dans la communication des intentions créatives et l’alignement des parties prenantes.
• Figma – How to create a design brief : lien entre cadrage du projet, vision créative et recherche visuelle.

À lire également sur TooNetCreation

• Création d’identité visuelle et charte graphique
• Comment créer une identité visuelle forte sans sacrifier l’expérience utilisateur ?
• Conception UX/UI et expérience utilisateur
• UX et UI : quelles différences et pourquoi les deux sont indispensables à un site web ?
• Qu’est-ce qu’un wireframe ? Définition, utilité et méthode
• Nos réalisations web et identités visuelles