UI Moodboard : l’outil créatif essentiel pour harmoniser votre vision de conception

le 30/06/2022 par Nhat Minh Phan

Concevoir l'ambiance graphique d’un produit est une étape très importante pour tout projet de conception. Elle aide les designers et les parties prenantes à être sur la même longueur d'onde sur les aspects visuels du projet.

En matière de design UX et de conception de produits, un UI moodboard, ou ''planche d’inspiration'' est une agrégation d'images, de typographies, d'interactions, de fonctionnalités, d'icônes et d'éléments d'interface pour présenter la direction artistique d'un projet comme une sorte du brief créatif avancé.

Comme tout dans le design d'expérience utilisateur, votre moodboard doit être basé sur les besoins des utilisateurs en adéquation avec les ambitions de la marque.

Pour élaborer votre moodboard, nous allons voir les points suivants :

Objectif d’un UI moodboard
Comment trouver de l’inspiration
Comment créer un UI moodboard
Les formats du UI moodboard
Quel logiciel pour faire un UI moodboard ?
Avant de vous lancer

Objectif d'un UI moodboard - planche d’inspirations

Il a de nombreux objectifs, à commencer par une collecte de l'inspiration visuelle autour d'un projet qui vous aidera à rassembler et à concentrer vos idées et les transformer en solutions créatives.

Il peut aussi être une ressource précieuse tout au long du projet de conception, pour aider à maintenir un cap et une direction artistique cohérente et conformes aux objectifs et aux attentes du client.

L’un des principaux avantages de la création d'un moodboard avant de se plonger dans les maquettes et les prototypes est qu'il s'agit d'un outil précieux pour communiquer avec les clients et les autres membres de l'équipe en donnant un aperçu de chaque étape ; éviter le flou artistique, en rendant ainsi tangible ce qui est souvent abstrait.

La création d'une planche d’inspirations évite le syndrome redouté du "je validerai quand je verrai les maquettes finales" avec les clients.

Lorsqu'un UI designer parle de "minimalisme", de "police Bold et Sans Sérif" ou de "Material Design", beaucoup de clients ne savent pas ce que cela signifie. Mais le fait de montrer un moodboard qui intègre tous ces éléments leur permet de comprendre immédiatement et d’exprimer s'ils se projettent ou non dans ces partis-pris graphiques proposés.

Exemple d’un UI moodboard ( https://dribbble.com/shots/13924463-Combo-Stylescape )

Enfin, la création de moodboard vous permet aussi de gagner du temps lorsque vous commencez à concevoir. Il devient facile de représenter l'aspect visuel de votre projet au client avant de consacrer des efforts importants à la conception après.

Comment trouver de l’inspiration ?

L'inspiration pour un moodboard peut venir de n'importe où.

Les designers conservent souvent des planches d'inspiration, ce qui est un bon point de départ. Vous pouvez aussi consulter des banques d’images (getty images, shutterstock, pexels.com), des galeries, des musées de design, des sites de collection des tendances sur les palettes de couleurs (color.adobe.com), des galeries de typographie (monotype.com) et même dans les médias sociaux.

Lors de la collecte d'inspiration pour un moodboard, les designers doivent garder à l'esprit les objectifs du produit,les valeurs de la marque et l'utilisateur cible. Tous ces éléments ont un impact important sur les types d'inspiration recueillis.

Par exemple, la conception d'un site web pour un site grand public aura probablement un ton et un style très différent de ceux d'un site de produits de mode. Si les designers ne gardent pas ces différences à l'esprit lorsqu'ils commencent à travailler sur un moodboard, il est probable que le moodboard fini ne trouvera pas de cohésion auprès de leur client.

Comment créer un UI moodboard

Il n'y a pas qu'une seule façon de faire un moodboard. Il en existe de tous les formats, formes et styles. Certains designers les créent en numérique tandis que d'autres créent des collages physiques.

Voici quelques d'éléments clés à mettre dans un UI moodboard :

Typographie / polices : Les designers doivent inclure des polices spécifiques (ou au moins des styles de typographies générales) dans leurs moodboards pour toute conception.

Couleurs : Définir la palette de couleurs du produit est une partie importante de la plupart des moodboards.a peut être inclus sous forme de palettes de couleurs ou incorporé dans des images inspirées et d'autres éléments de visuel.

Des images/photos : Il s’agit d'images de marque, de photos de banque d’images, d'images de produits, de photos trouvées sur Behance, Dribble ou d'autres sites de partage de photos, d'illustrations et même de logos.

Métaphores visuelles : Les métaphores visuelles sont un élément important du branding et de l'image de marque.

Les mots clés / verbatims : Les mots qui se rapportent à la marque ou au messages et valeurs à transmettre peuvent constituer un élément important.

Textures / Illustrations : Toutes les illustrations ou textures - motifs qui seront incorporés dans un UI design doivent être inclus aussi.

Icônes / pictos : Toutes les icônes et pictogrammes fonctionnels doivent être inclus.

Explications / notes : Si nécessaire, des explications sur les éléments inclus dans le moodboard peuvent ajouter un contexte et faciliter la compréhension de la façon dont les différentes parties s'articulent en cohérence pour aboutir au design final.

Et en final, le choix d'un thème / concept graphique peut donner de la cohésion au moodboard ainsi qu'à la conception finale qui en découle. Le thème doit être étroitement lié aux objectifs de la conception du produit ou de la marque, mais il peut aussi être abstrait et évocateur.

Les formats du moodboard

Les UI moodboards peuvent être créées en format physique ou numérique. L'un comme l'autre présentent des avantages et des inconvénients.

Le moodboard physique va aider les concepteurs numériques à penser en dehors des limites de l'écran. Il peut être excellent pour les projets qui s'inspirent beaucoup du monde réel et pour les ateliers de co-créations en présentiel ( ex : design de mode, design d’objets, design d’intérieur, print design etc).

Exemple d’un UI moodboard physique ( https://www.studiocalico.com/galleries/130972-physical-mood-board)

Avantages :

Sentir libre dans la réalisation avec une ambiance comme à la récrée
Stimuler la créativité grâce aux manipulations des outils manuels ( ciseaux, colle, feutres, crayon couleurs etc …)
Inspirer à “ Think outside the box” et “look beyond the screen”

Inconvénients :

Besoin d’imprimer préalablement les visuels ou de disposer des magazines, catalogues etc.
Plus d’organisation pour partager et archiver (la meilleure option de partage est souvent de les prendre en photo).
Avoir des grandes espaces de co-créer pour toute l'équipe du projet ( des grandes tables avec des kit d’outils de découpage - collage)

Le moodboard numérique est une solution plus classique mais plutôt efficace et pratique qui offre plus de possibilités et de flexibilité. Idéalement pour les sujets d’identité visuel ou conception des produits numériques.

Exemple d’un UI moodboard numérique ( https://dribbble.com/shots/15220530-Brand-Concept-Watermelon )

Avantages :

Avoir un grand choix d'outils de mise en page en ligne et hors ligne
Pas besoin d’imprimer et avoir des outils physiques
Rapide et facile à partager, archiver et exporter
Pouvoir d’intégrer d’autres types de médias ( son, vidéo )

Inconvénients :

Parfois limiter l’inspiration dans la recherche des idées singulières en restant trop dans les références habituelles.

Quels logiciels pour faire un UI moodboard ?

Il existe un certain nombre de logiciels permettant de créer des UI moodboards.

Vous pouvez utiliser pratiquement tous les programmes de conception et mise en page ( Photoshop, Indesign, Sketch, Figma ... ) que vous utilisez déjà (il existe également des templates pour la plupart d'entre eux).

Parmi ces options, on peut citer les plus connus :

Photoshop

Un outil incontournable pour les designers.

Pinterest

Créer un tableau pour chaque projet est un excellent moyen d'organiser les idées. Les tableaux peuvent être partagés avec le client et l’équipe sur le projet.

Moodzer.com

Moodzer est une nouvelle application disposant de toutes les fonctionnalités nécessaires pour créer des moodboards inspirants et faciles à partager.

Adobe Express

Il permet de créer facilement des moodboards dans des formats qui s'intègrent parfaitement aux autres produits Adobe Creative Suite.

Canva.com

Canva propose des modèles de moodboard et une variété de polices, d'éléments de conception et de photos intégrés.

Enfin, le logiciel utilisé pour créer des moodboards n'est pas l’élément le plus important. Ce qui importe, c'est qu'ils soient réalisés dans un format qui stimule la créativité et qui soit facile à partager avec les clients ou d'autres décideurs du projet.

Avant de vous lancer

Que les designers réalisent des moodboards numériques ou physiques, ils constituent déjà une étape importante dans la création d'un style de conception graphique cohérent pour tout le produit. Si vous consacrez suffisamment de temps à cette phase de création du moodboard, le projet se déroulera plus facilement.

L'un des plus grands avantages de la création de moodboards est qu'il n'y a pas vraiment de “règles” qui dictent ce qu'un moodboard doit inclure ou à quoi il doit ressembler. Cela donne aux designers une grande liberté de création pendant cette phase, qui peut s'estomper dans les phases ultérieures de la conception.

Compte tenu des avantages des planches d'ambiance et de l'absence d'inconvénients (hormis le temps investi), il est logique que les designers intègrent des moodboards dans tout projet de conception sur lequel ils travaillent, qu'il s'agisse d'un simple refonte de site Web ou d'un concept de création d’un produit complet.

Pour en savoir plus sur la construction de décisions produit basées sur des recherches atomiques, consultez le compte-rendu du Café du Produit #33 “Construire vos décisions produit grâce à l'atomic research repository”.