How to make a mood board (a digital one, no Photoshop needed)
A step by step for making a mood board that actually helps a project: what to collect, how to cut it down, and how to share it without a 40 MB PDF.
TLDR
- A mood board is a small set of references that shows the feel of a thing before anyone designs it.
- Start with three or four words for the feel, then collect way too much, then cut it down to about 20.
- Mix types: photos, type, colour, UI, texture, a bit of motion. A board of only screenshots is a folder of screenshots.
- Write one line on each image saying why it’s there. That’s the part people skip, and it’s the part clients read.
What a mood board is for
It’s a way of agreeing on a feel before you spend money making things. A client says “premium but not stuffy” and five people picture five different websites. Twenty images on one page and everyone’s picturing roughly the same one.
It’s not a design. Nobody should be building from it pixel by pixel. It’s the brief, in pictures.
Step 1: write the words first
Three or four words for how it should feel. “Warm, loud, a bit messy.” “Calm, technical, expensive.” Write down what it shouldn’t be too (“not corporate”, “not another dark mode SaaS site”).
Every image you add later has to earn its place against those words. It’s the only thing that stops a mood board becoming a pile of stuff you think is pretty.
Step 2: collect way too much
Give yourself a day or two and save anything that fits the words. Places to look:
- Pinterest and Are.na for photography, interiors, texture and colour. (Pinterest has a lot more AI images in it now. There’s a setting to see fewer, under Refine your recommendations.)
- Savee, Dribbble and Behance for UI and branding. More in design inspiration websites worth bookmarking.
- Real websites. Full-page screenshots, not just the hero. A site’s feel lives in its spacing and type as much as its first screen.
- Type foundries and Google Fonts for type. Save the font itself, not a screenshot of it.
- YouTube, for motion and mood. The YouTube thumbnail grabber gets you every size of a video’s thumbnail if one frame says it all.
- Your phone. Menus, shop fronts, packaging, a billboard on Gran Vía that stopped you. Real-world references are what make a board look like nobody else’s.
Aim for 60 to 100 things. It’s easier to cut from too many than to pad out too few.
Step 3: cut it to about 20
This is the actual work. Put everything in one place, look at it all at once, and delete anything that:
- doesn’t fit the words,
- says the same thing as a better image,
- you only like because it’s pretty.
If two images disagree with each other, that’s useful. Keep both and ask the client which way they lean.
Step 4: arrange and label
Group by what it’s showing: colour, type, photography, UI, texture. For the colour group, drop your favourite image into the free colour palette from an image tool and you’ve got the hex codes too. Then write one line on each. “The warmth of the light, not the room.” “This type, a size bigger.” “Spacing like this, colour nothing like this.”
Those notes do more work than the images. Without them, people react to the wrong part of the picture.
Step 5: share it
The old way is a PDF export that’s 40 MB and out of date the moment someone adds an image. Better options:
- A Figma or FigJam page, if everyone involved lives in Figma anyway.
- Milanote, if you want a freeform canvas and don’t mind the price (how Savepad compares).
- A link to the board itself, so it stays current.
In Savepad, a board is a folder. Every image gets its colours pulled out, so you can filter by that one terracotta, and fonts open as a type tester instead of a screenshot. Send a private link with a password, or make the folder public. Clients don’t need an account to look.
Keep the leftovers
Remember the 80 images you cut? Don’t delete them. Tag them and keep them. You’ll get a brief like this again, and the leftovers are where you start. That’s also how a mood board slowly turns into a swipe file.
More on the tools and the setup on the moodboards use case page.