Quand vous lancez un projet de site web, la première question qu’on vous pose n’est pas ‘combien avez-vous de pages ?’ ni ‘quel est votre budget ?’. C’est : ‘à quoi vous imaginez que votre site devrait ressembler ?’
Et là, en général, ça coince. Vous avez une idée vague. Vous aimez certains sites que vous avez vus. Vous savez ce que vous ne voulez pas. Mais traduire ça en instructions claires pour un prestataire web, sans passer par des années de formation en design : ce n’est pas évident.
C’est exactement à ça que sert le moodboard. Ce n’est pas un exercice réservé aux graphistes ou aux créatifs. C’est un outil de communication entre vous et votre prestataire, qui garantit que le site livré ressemble à ce que vous aviez en tête, et pas à ce que quelqu’un d’autre a imaginé à votre place.
SOMMAIRE
Ce qu'est vraiment un moodboard (et ce qu'il n'est pas)
La définition simple
Un moodboard est une collection d’images, de couleurs, de typographies et de références visuelles rassemblées pour définir l’ambiance et le style d’un projet. Pour un projet web, c’est la base sur laquelle le designer ou le prestataire s’appuie pour créer les premières maquettes.
Ce n’est pas un cahier des charges technique. Ce n’est pas un prototype de votre futur site. Ce n’est pas une liste de fonctionnalités. C’est une direction visuelle : voilà comment votre site devrait se sentir quand on l’ouvre.
Ce qu’il n’est pas
Un moodboard n’est pas un dessin de votre futur site. Vous n’avez pas besoin de savoir dessiner ni de connaître Photoshop. Vous n’avez pas besoin d’avoir des compétences graphiques. Vous avez juste besoin de savoir ce qui vous parle visuellement et ce qui représente votre activité.
Ce n’est pas non plus une contrainte pour votre prestataire. C’est une base de discussion. Un bon moodboard déclenche une conversation productive : ‘j’aime cette ambiance chaleureuse, mais pas le fait que c’est trop chargé’ ou ‘je veux ce côté professionnel sans que ce soit froid’. Ces informations sont précieuses et impossibles à deviner.
Pourquoi ça s’appelle un moodboard
Le mot ‘mood’ signifie ambiance ou état d’esprit. Un moodboard capture une ambiance avant de capturer un design. Il répond à la question ‘comment votre client doit-il se sentir en arrivant sur votre site ?’ avant de répondre à ‘de quelle couleur doivent être vos boutons ?’
Exemple : une fleuriste spécialisée dans les mariages veut que ses visiteurs se sentent dans un univers de douceur, d’élégance naturelle et d’émotion. Son moodboard contiendra des photos de compositions florales en tons pastel, des textures de papier kraft, des typographies fines et élégantes, des espaces aérés. Avant même de parler de la structure du site, ce moodboard dit tout ce qu’il faut savoir sur le style à adopter.
Pourquoi le moodboard évite les mauvaises surprises
Le problème que le moodboard résout
Sans moodboard, voici ce qui se passe très fréquemment : vous briefez votre prestataire avec des mots. ‘Je veux quelque chose de professionnel, moderne, mais chaleureux.’ Votre prestataire part travailler. Trois semaines plus tard, il vous présente une première maquette. Et vous regardez ça en vous disant que ce n’est pas du tout ça, sans pouvoir expliquer exactement pourquoi.
Le problème, c’est que les mots sont insuffisants pour décrire le visuel. ‘Moderne’ pour vous peut signifier épuré et minimaliste. Pour votre prestataire, ça peut signifier couleurs vives et animations dynamiques. ‘Chaleureux’ peut être des tons ocre et beige pour l’un, et une typographie ronde et accessible pour l’autre. Sans références visuelles communes, chacun travaille sur sa propre interprétation.
Résultat concret : des allers-retours coûteux en temps (et parfois en argent), de la frustration des deux côtés, et un résultat final qui est souvent un compromis entre deux visions différentes plutôt que la concrétisation de la vôtre.
Ce que le moodboard change dans le processus
Quand le moodboard est fait en amont, la première maquette est rarement une surprise désagréable. Votre prestataire a travaillé avec vos références, votre palette de couleurs validée, vos typographies choisies ensemble. Le champ des interprétations possibles est beaucoup plus étroit.
Les révisions portent sur des détails, pas sur la direction globale. Vous gagnez du temps, vous gagnez en clarté, et le résultat final est plus cohérent avec votre identité réelle parce qu’il vient de vous, pas d’une interprétation de vous.
Exemple concret : un cabinet d’ostéopathie qui prépare un moodboard avant de lancer son site. Il rassemble des photos de cabinets clairs et minimalistes, des palettes de couleurs autour du vert sauge et du blanc cassé, des typographies lisibles et apaisantes, des sites de praticiens de santé dont l’ambiance lui plaît. Son prestataire web travaille directement à partir de ces références. La première maquette correspond à 80% à ce qu’il avait en tête. Les retours portent sur des ajustements précis, pas sur la refonte complète du concept.
Le moodboard, outil de protection pour les deux parties
Un moodboard validé est aussi une protection contractuelle informelle. Si en cours de projet vous changez d’avis sur la direction visuelle, votre prestataire peut s’appuyer sur le moodboard approuvé en amont pour cadrer la discussion. De votre côté, si le résultat livré s’éloigne du moodboard, vous avez un référentiel pour argumenter les révisions. C’est gagnant des deux côtés.
Vous lancez un projet de site ou de refonte et vous ne savez pas par où commencer pour définir votre direction visuelle ? La construction du moodboard est la première étape que je travaille avec chacun de mes clients, avant de toucher à la moindre maquette. |
Ce que doit contenir votre moodboard de projet web
Les références de sites web qui vous plaisent
Commencez par noter 3 à 5 sites web que vous trouvez beaux ou inspirants, pas forcément dans votre secteur. Ce qui compte, c’est l’ambiance générale : la façon dont les couleurs sont utilisées, la typographie, la densité du contenu, le style des photos. Notez aussi ce que vous aimez spécifiquement sur chaque site.
L’erreur courante est de ne mettre que des sites de concurrents directs. C’est une source d’inspiration limitée et qui risque de produire un résultat trop générique. Un menuisier artisan peut s’inspirer du site d’une marque de cosmétiques naturels pour son ambiance ‘matières authentiques’, ou d’un hôtel boutique pour son côté ‘artisanat haut de gamme’. Les meilleures directions visuelles viennent souvent de secteurs différents.
Une palette de couleurs de référence
Vous n’avez pas besoin de choisir vos codes HEX exactement. Vous pouvez simplement assembler des couleurs qui vous parlent : captures d’écran de sites, photos trouvées sur Pinterest, images de nature ou d’architecture qui correspondent à l’ambiance cherchée. Votre prestataire traduira ces références en palette précise.
Quelques principes à garder en tête : la palette de votre site doit être cohérente avec votre secteur d’activité (voir notre guide sur les couleurs de votre site web), elle ne doit pas contenir plus de 3 à 4 couleurs distinctes, et elle doit fonctionner sur fond clair comme sur fond foncé.
Des références typographiques
Les typographies définissent énormément le caractère d’un site. Une typographie à empattements (serif) comme Times New Roman ou Garamond donne un côté classique et rassurant. Une typographie sans empattement (sans-serif) comme Arial ou Helvetica donne un côté moderne et épuré. Une typographie manuscrite donne un côté chaleureux et artisanal.
Pour votre moodboard, il suffit de rassembler des exemples de typographies que vous aimez : dans des magazines, sur des sites, dans des enseignes qui vous plaisent. Pas besoin de connaître leurs noms. Une photo suffit.
Des images et des photos de référence
Ce sont les images qui définissent le mieux l’ambiance globale. Elles montrent le style de photographie que vous aimez (lumineux et épuré, warm et naturel, contrasté et dynamique), le type de mise en scène (personnes en action, produits en gros plan, environnements), et les émotions que vous voulez transmettre.
Exemples par activité : un traiteur mettra des photos de tables dressées avec des éclairages chauds, des détails de textures de tissus et de vaisselle, des moments de convivialité en extérieur. Un naturopathe mettra des photos de plantes, de lumière naturelle, d’espaces calmes et épurés. Un couvreur mettra des photos de maisons bien restaurées, de toitures soignées en lumière naturelle, de détails de matériaux. Chaque activité a son registre visuel naturel.
Les mots-clés d’ambiance
En complément des images, 5 à 8 adjectifs qui décrivent l’ambiance souhaitée aident à cadrer le projet. Ces mots guident les choix quand une décision est ambiguë.
✍️ Exemples de mots-clés d’ambiance par secteur
|
Pour aller plus loin
Comment construire votre moodboard en pratique
Les outils accessibles sans compétences techniques
Vous n’avez pas besoin d’un logiciel professionnel pour créer un moodboard utile. Voici les options accessibles à n’importe quel dirigeant.
- Pinterest : le plus simple : créez un tableau secret sur Pinterest, épinglez tout ce qui vous inspire (sites, photos, typographies, couleurs), et partagez le lien avec votre prestataire. L’avantage : Pinterest propose automatiquement des suggestions liées à ce que vous avez épinglé, ce qui enrichit votre recherche.
- Canva ou Google Slides : créez une présentation avec une diapositive par élément (couleurs, typographies, sites de référence, photos d’ambiance). Canva propose des templates de moodboard gratuits qui donnent un cadre clair.
- Dossier partagé : la méthode la plus simple : un dossier partagé (Google Drive, Dropbox) avec des captures d’écran, des photos téléchargées, et un document texte qui note vos observations sur chaque image.
- Milanote : Milanote est un outil spécialement conçu pour les moodboards et les briefs créatifs. Version gratuite suffisante pour un projet de site. Très visuel, facile à partager.
La durée réaliste
Un moodboard utile ne prend pas beaucoup de temps si vous l’abordez avec la bonne méthode. Prévoyez une à deux heures réparties sur deux à trois jours : une session de recherche d’images et de références, une session de sélection et d’organisation, et une relecture à tête reposée avant de le partager.
La tentation est de vouloir un moodboard parfait et exhaustif. L’objectif est d’avoir un moodboard utile : 10 à 20 images bien choisies et quelques mots-clés sont largement suffisants pour cadrer un projet web.
Ce qu’il faut éviter
- Un moodboard trop large qui mélange des ambiances incompatibles : choisissez une direction, pas cinq
- Des images uniquement tirées de sites concurrents : votre site finira par ressembler à tout le monde dans votre secteur
- L’absence de commentaires sur les images : ‘j’aime cette photo parce que…’ est bien plus utile qu’une image sans contexte
- Remettre le moodboard à plus tard et démarrer directement sur les maquettes : c’est le chemin le plus rapide vers les allers-retours coûteux
Le moodboard dans le cadre d'une collaboration avec un prestataire
Comment l’utiliser comme outil de brief
Quand vous partagez votre moodboard avec votre prestataire web, accompagnez-le d’une discussion, pas seulement d’un envoi de fichier. Expliquez ce qui vous attire dans chaque référence, et surtout ce que vous ne voulez pas. ‘J’aime l’ambiance de ce site mais pas le fait que c’est trop minimaliste’ ou ‘cette palette me plait mais je ne veux pas que mon site soit aussi sombre’ sont des informations précieuses.
Un bon prestataire vous posera des questions sur votre moodboard pour s’assurer de bien comprendre votre intention. Il peut aussi vous suggérer des ajustements si certaines de vos références sont en contradiction ou difficiles à concilier techniquement.
Le moodboard évolue : c’est normal
Il arrive qu’en construisant votre moodboard vous réalisiez que votre idée initiale de votre site n’est pas tout à fait juste. Vous pensiez vouloir quelque chose de sobre et épuré, mais en cherchant des références vous vous retrouvez à épingler des sites plus chaleureux et visuellement riches. C’est une information précieuse sur votre identité réelle.
Le moodboard n’est pas un engagement définitif. Il est un point de départ. Il peut évoluer au cours des premières discussions avec votre prestataire, notamment si certaines directions sont techniquement complexes ou visuellement incohérentes avec votre secteur.
Le moodboard et la charte graphique
Le moodboard est l’étape qui précède la charte graphique. Une fois validé, il sert de base pour définir précisément votre palette de couleurs (avec les codes HEX exacts), vos typographies finales, votre style de photos, et vos règles d’utilisation du logo. Le moodboard dit ‘voilà l’ambiance’, la charte graphique dit ‘voilà les règles précises pour créer cette ambiance de façon cohérente sur tous vos supports’.
Vous avez une idée de l’ambiance de votre futur site mais vous ne savez pas comment la traduire en brief utile pour votre prestataire ? La construction du moodboard ensemble est souvent la étape la plus éclairante d’un projet : elle révèle ce que vous voulez vraiment, pas juste ce que vous croyez vouloir. |
Votre moodboard, premier acte de votre projet web
Un site web qui ressemble vraiment à votre activité, qui reflète votre personnalité et qui donne à vos visiteurs la bonne impression dès les premières secondes : ça ne vient pas du hasard. Ça vient d’un travail de réflexion en amont sur ce que vous voulez transmettre visuellement.
Le moodboard est cet outil de réflexion. Il ne demande ni talent artistique ni compétences techniques. Il demande juste que vous sachiez ce qui vous parle et ce qui représente votre activité. Vous l’avez déjà en vous. Le moodboard vous aide à l’exprimer d’une façon que votre prestataire peut utiliser.
Commencez par Pinterest et une heure de navigation avec un œil ouvert sur tout ce qui vous attire visuellement. C’est souvent suffisant pour débloquer une direction.
