Le Mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign.
La partie design est une étape délicate à gérer dans le processus de création d’un site web car le client est toujours impatient de voir le résultat visuel de son futur site. Or, cette partie du processus réclame de nombreuses étapes de recherche, de tâtonnement, d’essais, d’ajustement avant d’arriver à un résultat aboutit et définitif.
Le client, ne connaissant par forcément les étapes du processus de création, aura tendance à croire que ce que vous lui montrez correspond à l’image du design finalisé. Il portera alors son attention sur des détails plutôt que d’évaluer et de réfléchir sur le concept général.
C’est donc au graphiste d’expliquer au client les points sur lesquels il est important de se focaliser. Pour lui faciliter la tâche, il est judicieux d’utiliser des documents de travail qui se concentrent davantage sur le fond que sur la forme. Parmi ces documents de travail, nous avons déjà parlé des zoning et des wireframe. Un autre document de travail dans le même esprit se trouve être le panneau d’humeur.
Un panneau d’humeur est le regroupement d’un ensemble d’éléments sélectionnés (images, couleurs, textures, typographies, textes, objets …) juxtaposés les uns à côté des autres comme on le ferait pour un collage, afin d’établir une ambiance, une atmosphère, un concept, une humeur, une expression, un ton, un ressentit, un style, sans avoir besoin de réaliser une création graphique aboutit et organisée.
Pour réaliser ce panneau, vous utiliserez généralement des coupures de magazines, de journaux, d’affiches, des photographies, des textes, des objets … Cela peut également être des ébauches faites rapidement à l’ordinateur, des palettes de couleurs, des morceaux de papier peints, des emballages, bref tout ce qui pourrait évoquer l’ambiance que vous voulez créer pour votre maquette graphique.
Pour un webdesign, votre panneau d’humeur peut également présenter une ébauche de l’aspect des boutons, des formulaires, des cadres de contenus, de la typographie des différents niveaux hiérarchiques, des icônes, du traitement des images …
Le tout doit vous aider à mettre en place l’aspect général et l’atmosphère du futur design. La démarche est assez similaire à celle que l’on utilise en dessin ou l’ébauche, le tâtonnement puis la construction précèdent l’affinement des détails et la finalisation du concept.
Exemple de panneau d’humeur :

Photographie de Maria Grzesiak sous licence CC
Le panneau d’humeur peut avoir plusieurs avantages :
Le panneau d’humeur étant un regroupement d’éléments, sans cohérence logique de mise en page, le client peut difficilement imaginer l’aspect final de son site à partir de ce genre de support. Cela vous permet de capter toute son attention sur le concept et non sur des détails qui sont pour vous sans importance à cette étape du processus.
Lorsque vous avez à faire à un groupe de décisionnaires, la validation du design peut s’avérer encore plus compliqué. En effet, si chacun exprime ses préférences personnelles, vous n’arriverez jamais à satisfaire tout le monde. Le panneau d’humeur ne présentant que le concept, il est plus facile de concentrer les réflexions sur le coeur du problème et éviter ainsi que chacun s’épanche sur ses propres goûts.
Le panneau d’humeur étant facile à comprendre et à réaliser, sans besoin de compétences graphiques ou informatiques particulières, vous pouvez impliquer plus de personnes pour vous aider à construire le panneau.
Les panneaux d’humeur sont rapides à mettre en place car facile à réaliser. Le designer à souvent tendance à vouloir peaufiner les détails avant même que le concept soit validé. Avec le panneau d’humeur, vous réalisez un prototype, vous n’avez donc pas besoin de perdre du temps dans les détails. Si le client souhaite modifier le concept, vous pouvez facilement et rapidement adapter et modifier le panneau.
Avec le panneau d’humeur, vous évitez également la perte de temps dans la prise en compte de considérations superflues.
Le panneau d’humeur permet de réfléchir en amont sur le design sans se perdre dans les détails. Il permet de libérer ses idées sans toucher à l’ordinateur et de les soumettre au client rapidement.
Une fois cette étape accomplie, vous avez une fois pour toute, toutes les orientations graphiques dont vous avez besoin pour créer votre design. Vous pouvez alors vous concentrer sur la mise en page et la communication graphique.
Vous pouvez utiliser un panneau d’humeur pour regrouper un certain nombre d’éléments qui vous servira de référence d’inspiration. Il s’agit ici de réunir des idées intéressantes que vous auriez put trouver dans votre environnement (affiche publicitaire, photographie, journaux …) pour vous en inspirer par la suite dans vos créations.
Le panneau d’humeur tonalité est plus précis et plus cohérent que le panneau d’humeur d’inspiration. Il rassemble des éléments qui groupés ensemble donnent une idée de la tonalité que vous souhaitez mettre en place dans le futur design.
La présentation de ces panneaux d’humeur peuvent être plus ou moins structurée : juxtaposition de type collage ou modèle de présentation des différents types d’éléments.
Pour voir un exemple de panneau d’humeur structuré, allez faire un tour sur blog « 404 creative » et lisez l’article « Website Mood Boards: A Successful Precursor to Visual Prototyping« . En fin d’article, vous trouverez des copies d’écran de panneau d’humeur structuré destinés à présenter des idées pour des design web.
Un webdesigner va utiliser un panneau d’humeur pour évoquer un concept, un ressentit et donner le ton du futur design.
Cette étape correspond au prototypage du design c’est à dire à la phase de recherche. L’absence de création aboutit vous permet de garder l’attention du client sur l’idée général du concept plutôt que sur des détails.
L’objectif est d’obtenir du client un maximum de validation sur la piste créative à suivre avec une idée assez précise du résultat, avant de passer à la phase de production qui est la plus couteuse en temps de réalisation.
En impliquant le client dans la phase de création, vous lui procurerez une certaine satisfaction. De plus, au moment de valider la maquette finale, il sera plus difficile pour lui de renier des idées auxquels il aura lui même participé.
Note du 17.10.2008 : Je viens de découvrir un article richement illustré sur le concept board plus aboutit que celui que je viens de vous présenter. Il s’agit de l’article « Le concept board webdesign » écrit par Frédéric Kalfon – Directeur de création chez SQLI Agency dont je vous recommande vivement la lecture.
Sources :
– Article du blog Life Clever : 5 reasons to design with mood boards
– Article du blog Viget :Getting Moody: A Look at Inspiration and Style in Early Design Techniques
– Article du blog 404 Créative : Website Mood Boards: A Successful Precursor to Visual Prototyping