In short
A mood board is a curated collection of images, colours, typography samples, textures and words assembled to communicate the intended look and feel of a project before design begins. Its job is alignment: it lets a client and a designer agree on a direction in an hour rather than discovering a disagreement after three weeks of work. A good board has a clear theme, a written rationale, and deliberate exclusions; a bad one is a pile of things someone liked. Build two or three contrasting boards, present them side by side, and let the choice between them become the brief.
What it is for
Every design project starts with a gap between what the client can describe and what the designer will make. "Modern but warm", "premium but approachable", "like Apple but not cold" are real attempts to communicate, and they mean different things to every person in the room. A mood board closes the gap by showing rather than describing: here is what warm looks like, here is the kind of type that says premium, here is the photography that is approachable.
The outcome is not a design. It is agreement on a direction, reached early and cheaply, so that the expensive work that follows starts from the same place. It is one of the highest-return hours in a brand or website project, and one of the most often skipped.
What belongs on it
Imagery. Photographs, illustrations and screenshots that carry the intended mood. Not competitors' work to copy, but examples of tone: the kind of light, the kind of people, the kind of composition.
Colour. A few swatches, or images whose palettes do the job. Not a finished system; a direction.
Typography. Samples of type in use: a heading in a serif, a paragraph in a sans, a piece of signage. Type carries more mood than most clients expect and deserves explicit inclusion.
Texture and material. Paper, metal, fabric, surfaces. Especially useful for brands with a physical presence, and for suggesting depth and finish in digital work.
Words. Three to six adjectives that name the direction, and, more usefully, three that the direction is not. "Confident, precise, calm. Not playful, not corporate, not loud."
Interface fragments for digital projects: a navigation pattern, a card style, a form treatment from products that feel right.
Motion references where relevant: a link to how something moves, since stills cannot show it.
How to build one
- Start from the strategy. Who is this for, what should they feel, what should they conclude. If those are not written down, write them first; a board without them is decoration.
- Collect widely, then cut hard. Gather fifty things that might belong. Keep eight to fifteen. The cutting is where the board gains meaning: every item left must earn its place by expressing the direction.
- Make two or three boards, not one. Distinct directions that could each be right. Presenting a single board invites a yes-or-no answer; presenting three invites a choice, and the reasons for the choice are the brief.
- Arrange with intent. Hero image large, supporting items smaller, colour and type in a consistent position. The board itself is a piece of design and reads as one.
- Write the rationale. A paragraph per board: what it is, who it serves, why it fits. The words prevent the board being read as "pictures we liked".
- Name what is excluded. "No stock handshakes, no gradients, no rounded-everything." Exclusions are often more useful than inclusions because they prevent the most likely wrong turns.
Figma, Milanote, Pinterest and a large table with printouts all work. The tool matters less than the editing.
Presenting it
Show the boards side by side and ask which world the brand lives in, not which pictures the client likes. Listen for the reasons, because the reasons are what transfer to the design. A client who chooses board two "because it feels like it was made by people who care about details" has just written the design principle. Record the choice, the reasons and any items pulled from the rejected boards, and that document becomes part of the brief.
Expect some mixing. "Board two, with the photography from board one" is a legitimate answer, provided the mix is coherent. "All three" is not an answer; it means the boards were not distinct enough, or the client has not decided who the brand is for.
The mistakes
One board. No choice, no reasons, no alignment; just approval or not.
Competitors' work. The board becomes a request to copy, and the client's expectations become another company's site.
Too much. Forty images say nothing. Editing is the work.
No words. Boards without rationale get read differently by everyone.
Treating the board as the design. It is direction, not layout. A board full of dark, moody photography does not mean the site will be dark; it means the site should feel the way those photographs feel.
Skipping it for small projects. The smaller the budget, the less room for a wrong direction discovered late. Two boards and an hour's conversation is cheap insurance.
From board to design
The chosen board, its rationale and the exclusion list feed directly into the identity or the interface work: the palette is developed from the board's colours, the typography from its samples, the photography direction from its imagery. When a later design decision is contested, the board is the reference: does this belong in that world? That is what it was for.
If you would like to run a mood-board session before a brand or website project so the direction is settled before the design starts, book a call; it is the first thing we do.
Common questions
What should a mood board include?
Curated imagery that carries the intended tone, a few colour swatches, typography samples in use, textures or materials where relevant, three to six adjectives naming the direction and a few naming what it is not, plus interface fragments or motion references for digital projects. Eight to fifteen items, each earning its place, with a short written rationale.
What is the difference between a mood board and a style guide?
A mood board comes before design and communicates intended feel through references; it is exploratory and disposable. A style guide comes after design and documents the actual decisions: exact colours, typefaces, spacing and rules for use. The board sets direction; the guide records the destination.
How many images should a mood board have?
Between eight and fifteen for most projects. Fewer than that cannot establish a direction; more than that dilutes it and stops communicating. The value of a board comes from what was cut, so gather widely and keep only the items that clearly express the intended feel.
Should a client make a mood board or the designer?
Ideally the designer, informed by the client's strategy and any references the client shares. Client-made boards are useful raw material but often collect things the client likes personally rather than things the audience should feel. The designer edits them into two or three distinct directions and presents the choice.
What tools can I use to make a mood board?
Figma or FigJam, Milanote, Pinterest boards, Canva, or printouts on a wall. The tool matters far less than the editing and the written rationale. Choose whatever allows side-by-side comparison of two or three boards and easy sharing with the client.
