What Is a Moodboard and How to Make One for a Design Project
Basics4 minInnovialabs editorial team
In short
A moodboard is a collection of colors, fonts, images and references that sets a project's visual direction and helps you agree on the "feel" with a client before the first mockup is drawn.
What a moodboard is
A moodboard is a collage of visual material: colors, fonts, photos, textures, fragments of other interfaces. Its job is to show how the product will feel: strict or playful, premium or accessible, dense or airy.
A moodboard is not a design. It is a conversation tool: it turns a client's vague words ("modern", "stylish", "not boring") into concrete images people can agree or disagree with.
Moodboard vs style tiles
| Moodboard | Style tiles | |
|---|---|---|
| What it shows | Mood and direction | Specific style elements |
| Material | Other people's images and references | Your own colors, fonts, buttons |
| Stage | The very beginning | After the direction is approved |
| Precision | Approximate | Close to the final UI |
Usually you make a moodboard first to pick a direction, then style tiles: one or more sheets with the real palette, typography, buttons and form fields. They bridge the gap between mood and mockups.
What to collect
- Color. Primary and accent shades, example combinations, light and dark palettes.
- Typography. Font samples for headings and body text, examples of large and small type.
- Imagery. Photo style (staged or candid, vivid or muted), illustrations, icons.
- Textures and shapes. Corner radii, shadows, gradients, grids, graphic devices.
- References. Screenshots of interfaces and sites where you like a specific detail, not the whole thing.
- Words. Three to five adjectives that describe the product, such as "calm, precise, friendly".
Every element needs a reason. If you cannot explain why an image is on the board, remove it.
How to build a moodboard step by step
- Start with the brief. Find out the audience, product goals, competitors and brand constraints.
- Write down keywords. They become the filter for selecting material.
- Collect broadly. Gather more material than you need, from different sources.
- Cut the excess. Keep what supports the keywords and does not contradict the rest.
- Compose. Large for the main mood, small for details. Add notes on what exactly you like in each reference.
- Prepare 2–3 directions if the client is unsure about style. The directions should differ noticeably.
Tools
- Figma or FigJam: convenient if the rest of the work happens there, with the board, client comments and mockups in one place.
- Milanote: built for boards and notes, easy to arrange material freely.
- Pinterest: good for searching and collecting ideas, but move your picks to a separate board for the client presentation.
The tool is secondary. What matters is that the client can open the board and leave a comment.
Using a moodboard with a client
- Show it before mockups. Changing direction on a moodboard is faster and cheaper than reworking screens.
- Guide the discussion with questions. "What here feels closest to your product?", "What definitely does not fit?"
- Record the decision. An approved moodboard becomes an anchor: if a style dispute comes up later, you can return to it.
- Do not pass off others' work as yours. References set direction; they are not copied into the final design.
Common mistakes
- A board without an idea: pretty pictures unrelated to the task.
- Too much at once: the client gets lost and cannot choose.
- Look-alike options: if directions are similar, the choice is meaningless.
- Skipping sign-off: the moodboard is done, but the client never explicitly approved it.