Mood board
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.
Introduction
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.
Qu’est ce qu’un 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
Utilité du panneau d’humeur
Le panneau d’humeur peut avoir plusieurs avantages :
Séparer le fond de la forme
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.
Impliquer davantage de personnes dans le processus
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.
Gagner du temps
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.
Structurer votre processus créatif
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.
Différents types de panneau d’humeur
Le panneau d’humeur d’inspiration
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é
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.
Conclusion
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
24 commentaires
S'abonner aux commentaires via RSS
(URL de trackback)
le 02.08.08 (14:57)
« Panneau d’humeur » ??? J’avais jamais entendu ça pour designer un mood board, tu viens d’inventer la traduction ?
le 02.08.08 (19:39)
Ced,
J’ai fait une traduction littérale mais en tapant « panneau d’humeur » sur Google pour vérifier, je me rends compte que je ne tombe que sur mon billet …
Je sais pas pourquoi, je pensais qu’une traduction française existait.
Je vais renommer l’article avec « Mood board »
le 02.08.08 (20:09)
Personnellement j’utilise « planche tendance » en français
le 03.08.08 (12:47)
A l’école on dit plutôt « planche d’ambiance », et à l’école on à plutôt tendance a trouver ça absurde se disant que dans le monde professionnel on ne s’en servira jamais et pourtant c’est vraiment une excellente solution… c’est l’esprit rebel de l’étudiant.
Je profite également de cet article pour dire que je trouve ce blog excellent et que tout les articles sont vraiment pertinent et bourrés de petites phrases qui font que je me dit que je suis pas tout seul à penser ça : « 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. » ou encore « éviter ainsi que chacun s’épanche sur ses propres goûts. » pour ne citer que cet article mais y’en a plein d’autres.
Beau boulot, et longue vie à ce blog.
le 03.08.08 (13:52)
Certains décorateurs utilisent aussi le terme de « Planche tendance », je mets un lien vers une : http://www.lesjolieschoses.net/Images/pageDecoration2_12.jpg
Sinon, j’aime beaucoup les planches de blog 404 Créative !
le 03.08.08 (16:48)
Merci pour vos témoignages et encouragements.
Il ne semble donc pas y avoir de véritable traduction officielle en Français de l’expression « Mood board »
Ce qui compte c’est que chacun utilise le terme qui lui parle le mieux.
@Adrien : Attention, je ne cherche pas à stigmatiser le client mais seulement à mettre en lumière que celui ci ne maitrise pas toujours les techniques et processus de travail de la création d’un site web, et c’est bien normal, car ce n’est pas forcément son corps de métier. A nous de lui expliquer de manière diplomatique. Nous avons aussi quelque part un rôle de conseil.
Le plus gênant est le client qui ne vous écoute pas et n’a pas confiance en votre expertise. Dans ce cas la, mieux vaut interrompre la collaboration.
@Sylvain : Merci pour le lien. Je suis d’accord avec toi, les planches de blog 404 Créative sont vraiment propre et bien conçues. Je pense qu’elle sont idéales pour une présentation en clientèle. Par contre, elle manque peut être un peu de spontanéité pour un travail préliminaire.
le 04.08.08 (11:55)
Je viens de découvrir ce site en cherchant comment obtenir une couleur kaki par mélanges, et j’ai trouvé bien plus que ce que je venais chercher. C’est excellent et tout à fait abordable pour la néophite que je suis. Personnellement j’aime beaucoup la traduction « panneau d’humeur »… Bravo pour ce travail de qualité et merci.
le 04.08.08 (12:06)
Bonjour Patricia et merci pour votre commentaire.
Vous dites « C’est excellent et tout à fait abordable pour la néophite que je suis. »
Je pense que le web design et la conception de site web n’est pas compliqué à comprendre. Tout est une question de bon sens. Il faut juste prendre conscience d’un certain nombre de choses.
La véritable difficulté n’est pas dans la compréhension mais dans la mise en pratique des principes.
Donc la seule solution c’est de pratiquer, pratiquer, pratiquer …
@ all : pour parler du « mood board », j’ai également trouvé « concept board »
le 10.09.08 (13:57)
Pour mon premier commentaire sur votre blog je tenais d’abord à vous féliciter pour la qualité de vos billets, et concernant le moodboard, je n’avais jamais entendu parlé de ce terme, mais par contre c’est bien le terme « Concept Board » que vous citez ci dessus que nous utilisons, et que j’ai déjà entendu dans la bouche de mes confrères DA. Terme par ailleurs utiliser dans l’ouvrage « conduite de projet web » de Stéphane Bordage.
le 22.09.08 (21:37)
Bonjour,
Concernant la traduction de Mood Board, je suis tombé dessus dans le très bon livre de Andy Clarke, Transcender CSS, et dans la version française, c’est « collage d’humeur » qui est utilisé.
le 07.10.08 (22:52)
Bravo pour ton blog et super design. Dommage que tu ne postes pas plus souvent, tes articles sont très intéressants.
Merci !
le 08.10.08 (08:12)
@Grégory & Vincent
Oui, je me rends compte que le Moodboard a plusieurs appellations. Peu importe le terme finalement, le principal étant de comprendre son intérêt.
@Denis
Merci, Denis pour ton compliment. J’aimerais poster plus mais mes articles me prennent un temps fou à rédiger.
Je viens de découvrir ton blog, je le trouve très sympa autant sur le fond que sur la forme. Je viens juste de m’abonner
le 22.10.08 (14:39)
Agréablement surpris par la densité et la diversité de tes infos . Bien sûr le « concept board » est utilisable en création picturale abstraite ou figurative ? Un peu comme un croquis préparatoire d’un tableau ,mais en plus fourni…
le 16.03.09 (00:15)
Ca va? Je suis nouvelle ici, car je vois que vous etes des amoureux de plein air et de tourisme, Je viens d’ acheter le magazine de Decouvertes Touristiques avec Marcel Bouchard mais je me demandais si vous ne auriez pas l’adresse de son site web car il semble y avoir un concours seulement sur le web??
Merci à l’avance !
le 18.03.09 (10:56)
Ca va bien !
BellaGenna, j’ai du mal à voir le rapport entre ta question et le sujet de l’article.
Ou vois tu sur mon site que je parle du tourisme et du plein air ?
le 01.04.09 (14:37)
En IUP arts appliqués, nous faisons des « planches d’ambiance » qui sont apparemment la même chose que les « mood board ».
le 21.04.09 (07:16)
Yo ! Ca fait un bou que j’vous li… mais là je deecide de me connecter pour vous demander c’est quoi l’adresse au juste du magazine decouvertes avec forum . J’ai entendu par la bande qu’il y a un tas de choses à se partager sur ce site..! A+!!
le 21.04.09 (21:44)
Hey ! Je lit pas mal le forum souvent… mais là je choisit de m’inscrire pour vous demander c’est quoi le site web au juste du magasine de decouvertes avec forum . J’ai entendu par la bande qu’il y avait une couple de concours à faire sur ce site..! thank you!!
le 17.06.09 (11:43)
Merci pour ces tuyeaux qui m’aident personnellemnt à professionnaliser mon travail.
mais à ce niveau(mood board) ce serai plus interressant de présenter le mood board de pixenjoy dans les exemples, ainsi on comprendra mieux le principe.c peu claire dans mon esprit etant donné que la Photographie de Maria Grzesiak ne presente pas ensuite la réalisation finale.
merci pour tou
le 05.09.09 (14:49)
Just an introduction. Glad to be here, I’m new. Saying hi to all you all.
SLK
le 28.11.09 (10:16)
[...] Mood board 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 ou encore… le web design. [...]
le 04.12.09 (11:33)
Bonjour,
Pour prolonger votre super article, un petit lien vers une vidéo
http://www.from-the-couch.com/post.cfm/title/creating-an-effective-mood-board
qui présente un template de moodboard que j’avais trouvé vraiment pas mal, découpé en sections cohérentes. Mais je ne suis pas webdesigner donc vous allez peut-être me dire que c’est nul
le 04.12.09 (11:58)
Merci rasbaille pour cette vidéo très intéressante.
le 07.06.10 (18:13)
votre blog est très clean, j’aime bien le design.