Moodboard
Artifact
A board of reference images and colors collected to settle what impression a product should give before anyone draws a screen.
Why it exists
Requests about impression almost always go wrong in words. When a founder says "make it feel more trustworthy," they already have a specific screen in their head. It might be deep navy with generous white space and quiet type. It might be white with thin lines and almost no shadow. The designer hearing the sentence has no way to tell which one.
For a long time the fix was to build a candidate screen and find out. The trouble is that one polished screen costs a few days. You spend three days, hear "that's not it," spend three more on another direction, and two weeks disappear with nothing settled. Nothing was wrong with the layout or the features — only the impression — yet the whole screen gets rebuilt each round.
A moodboard pulls that check forward and makes it cheap. Instead of drawing anything, you collect images that already exist. It takes two or three hours to assemble and costs almost nothing to throw away. A question that used to be asked with a three-day mockup gets asked with a half-day board, so being wrong three times costs less than a day. At this stage not a single screen of your own product has been drawn; you are deciding what to draw, not drawing it.
What goes in it
A board usually holds five kinds of material, and each answers a different question. None of them is a specification — everything here is a direction that a later artifact will turn into a number.
- Reference screens and photos — images pulled from other products or brands. This is what carries the overall feel, so a board typically shows eight to fifteen of them.
- Color — swatches lifted from those images, written down as hex values. They become the raw material for a color palette later, but at this stage you're only fixing the general tone.
- Type — the direction for typography, meaning every decision about how letterforms are handled. You don't need to name a typeface yet, but you do settle whether the strokes run heavy or light, angular or rounded.
- Shape and texture — whether corners get rounded, whether shadows appear, whether sections are divided by rules or by space.
- Three or four adjectives — the impression the images are meant to carry, pinned down in words. Something like "tidy, calm, slightly formal."
Leave out that last item and the board stops working. Shown the same photo, one person reads the color and another reads the spacing. With adjectives written down, someone can say "what we're taking from this shot is the white space, not the blue."
What stays off the board is equally clear. Your own screens, button positions, and menu structure don't belong here. Those are questions for a wireframe. Put structure on the board and the meeting slides straight into where the button goes, and the impression never gets decided.
Who writes it and who reads it
The designer builds it. At Pagedeck, Noa spends half a day gathering images into one board. She builds it alone but not for herself, so the selection rule is not "screens I like" but "screens that split the choice." Ten images with the same feel settle nothing. In practice this means building two boards rather than one, each committed to a different reading of the same request, so the meeting has something to choose between instead of something to approve.
The readers are the people who can decide. Grace, the founder, and Mia, the product manager, look at it and pick a direction on the spot. Neither of them needs design vocabulary. Being able to put two boards side by side and say "the left one" is enough, and that is exactly why the artifact is made of images.
That also fixes how it gets shown. Share the file and ask people to look on their own time, and opinions scatter in ten directions while nobody says the word final. Putting everyone in one room and forcing a choice within thirty minutes works better. The decision then gets written on the board itself rather than into meeting notes — something like "approved 2026-03-04, photo tone from board B" — so that when the argument comes back two months later, the record is sitting where people will look.
Engineers are not the audience here. There is nothing Theo can do with a moodboard. The values he needs arrive much later, in the mockup and the redline.
How it sounds at work
"I brought two boards. A is the calm direction, B has more weight."
The field has been narrowed to two, and someone needs to pick.
"That's the direction we ruled out on the moodboard."
Cutting off a discussion that is circling back to a settled decision.
"We have a design system, so I'm skipping the moodboard this time."
Color and type rules already exist, so there is no impression left to decide.
This ran exactly that way when Pagedeck started on screens for enterprise customers. Grace said she wanted them to feel heavier than the free plan. Rather than drawing from that sentence, Noa posted two boards in Figma two days later — one dark with wide margins, one white with thin lines.
Grace picked the dark one, with a note attached: use the photography from the left board. The decision took fifteen minutes. Without those fifteen minutes, Noa would have spent three days on the white version before hearing the same thing.
The board stayed pinned in the file after that. When a new marketing page came up two months later and someone asked whether it should match the free plan or the enterprise screens, the answer was already sitting there with a date on it.
What people get wrong
The most common misreading is that a moodboard is a designer's taste collection. It is full of attractive images with no feature descriptions, so it looks like one. But the board exists to narrow options, which means the contents have to disagree with each other to earn their place. Treat it as a mood folder, nod along, and decide nothing, and the direction argument restarts from scratch at the mockup stage with the board's time written off.
The other misreading is that the images will be copied. People assume the product will end up looking like whatever is pinned to the board. What actually carries over are the properties that produce the impression: keep the margins wide, cut down to two colors, use a single weight of type. When teams read it as copying, they stop posting references out of legal worry, and the team is back to negotiating impressions in words.
Where to go next
- Design deliverable
see where a moodboard sits in the full sequence of design artifacts
- Wireframe
the structure-stage artifact that follows once the impression is fixed
Last updated 2026-09-16