How to make a mood board for web design

1. 01

   Write the brief first

   One short paragraph on the board itself: what you're making, who it's for, and the feel in three words. Every reference you add gets checked against it, and anyone who opens the board reads it first.

2. 02

   Collect wide

   Save thirty or forty references before you judge any of them. Use live websites where you can: you see how a layout behaves, how type sets at real sizes, and how things move, which a screenshot or an AI image can't show.

3. 03

   Cut to about twelve

   Fewer than eight and the result tends to copy one reference. More than fifteen and the direction blurs. Prefer parts of pages, a headline, a grid, a colour, a transition, over whole sites, which invite copying the whole thing.

4. 04

   Group them into frames

   Three or four titled groups, such as Type, Colour, Layout and Motion. Grouping forces you to say what each reference is doing on the board, and it gives the reader a way in.

5. 05

   Label what to take

   Next to the key references, write a few words on what to take from each: “colour like this”, “energy as weight”, “this grid, calmer type”. Without labels the loudest picture takes over; with them the board steers.

6. 06

   Share one link

   Send the board, not a folder of screenshots. A link keeps the frames, labels and order you chose, and people can open each reference at its source.

Live websites beat screenshots for web work: you can see the type at its real size, how the layout reflows, and how it moves. The save.design library has over ten thousand sections from real sites, searchable by meaning (“dark pricing table with a toggle”), each credited to its site with the fonts and stack behind it.

Or start from a finished board in the style you're after: