How to Make a Website Moodboard: A Step-by-Step Guide

A website moodboard is a single page that fixes the look and feel of a site before anyone designs it: a palette with roles, a type pairing, an imagery direction, layout references for the key sections and a few lines of voice. You make it by writing down what the site should feel like, collecting references from real websites, cutting them down to the ones that agree, and extracting concrete values from what is left. Done well, it takes an afternoon and saves weeks of revisions.

Key takeaways

• A web moodboard is a decision document. Every item on it should answer a question the designer or developer will otherwise have to guess.
• Start from two or three mood words, not from pictures. The words are the filter for everything you collect.
• Collect from live websites rather than posters or interiors, because a website reference already solves layout, hierarchy and responsiveness.
• Cut ruthlessly. A board of 12 references that agree beats a board of 60 that argue.
• Finish by extracting values: hex codes, font names, a type scale and a spacing unit. That is the bridge from moodboard to build.

What goes on a website moodboard

A moodboard for print or interiors can be all atmosphere. A moodboard for a website has to answer more practical questions, because a website has states, sections and a reading order. These are the five things worth putting on it.

1. A palette with roles

Not just five swatches, but five swatches with jobs: a background, a raised surface, a text color, a muted text color for secondary information, and one accent for links and calls to action. A palette without roles is how you end up with a beautiful set of colors and no idea which one the button should be. Our guide to choosing a website color palette goes deeper on roles and contrast.

2. Type

One heading face and one body face, shown at real sizes. Put a headline at 56 to 72px next to a paragraph at 16 to 18px, because a typeface that looks wonderful at poster size can be tiring at reading size. If you are unsure where to start, the Google Font pairings list has fifteen combinations with weights and sizes.

3. Imagery direction

Decide what kind of pictures the site uses: photography or illustration, people or objects, studio or outdoors, warm or cool light, tight crops or wide scenes. Three or four images that share those qualities are clearer than ten that do not. Write the rule in a sentence beside them, for example "natural light, one object, plenty of empty ground".

4. Layout references

Three to five screenshots of real sections that show structure: a hero, a feature grid, a pricing table, a footer. These tell the developer how dense the page is, how wide the content column runs and how pictures sit against text. Browsing hero sections, pricing tables or footers by type is the fastest way to find references that solve the same problem yours does.

5. Voice

Two or three lines of sample copy in the intended tone: a headline, a button label, a line of microcopy. Voice changes how type and color read. The same serif feels luxurious under a terse headline and cozy under a chatty one.

How to make a website moodboard, step by step

1. Write the brief in three words. Pick two or three mood words that describe how a visitor should feel, such as "calm, precise, warm". Then write one sentence on who the site is for and what it must do. Our list of 20 website design moods is a useful vocabulary if you get stuck.
2. Write what it is not. Add two or three words the site must avoid, for example "not playful, not corporate". Counter-words do more filtering than positive ones, because almost any reference can be argued to be "modern".
3. Collect widely, for 30 to 45 minutes. Gather 30 to 60 references from live websites. Look at whole pages and at individual sections. Save anything that matches at least one of your mood words, without judging too hard yet.
4. Cut to 8 to 20. Lay everything out and remove whatever contradicts a counter-word. Then remove anything that only matches because of its content (a lovely photo of a product you do not sell) rather than its design.
5. Group by job. Arrange what is left into the five areas above: palette, type, imagery, layout and voice. Gaps become obvious: often you have plenty of heroes and nothing for the body of the page.
6. Extract the values. For each reference you keep, note what you are actually taking from it: a hex code, a font name, a headline size, the gap between cards. Write them on the board. This is the step most people skip, and it is the one that makes the board buildable.
7. Make one test composition. Set your real headline in your chosen type on your chosen ground with one of your images. If it does not feel like the three words, adjust now, while changes are cheap.
8. Present two or three directions, then commit. If others are involved, show distinct variants side by side and choose one. Do not merge them into a compromise.

A quick example

Say you are designing a site for a small ceramics studio, and the brief is "grounded, quiet, handmade; not rustic, not luxury".

That table is the moodboard's summary. Everything a designer needs to start, and everything a developer needs to set up the first tokens, is in it.

Common moodboard mistakes

• Collecting atmosphere instead of decisions. A board full of beautiful landscapes tells nobody what the navigation looks like. Keep at least half of your references as actual web pages or sections.
• Too many references. Past 20 or so, every direction has a counterexample on the board, and the board stops constraining anything.
• No counter-words. Without "not this", stakeholders read their own taste into the board, and the disagreement arrives later, during design, when it costs more.
• Swatches without roles. Five colors of equal weight lead to five colors used equally, which almost never looks good. Decide which one is the ground and which one is spent sparingly.
• Ignoring contrast early. A pale gray text color can look elegant on a board and fail WCAG AA in the build. Check text against its ground (4.5:1 for body text) before you fall in love with it.
• Choosing type from a specimen sheet. Always test fonts with your real headline and a real paragraph, at real sizes.
• Copying a single site. If one reference supplies the palette, the type and the layout, you are not making a moodboard, you are making a copy. Take one idea from each source.

Turning the moodboard into a build

A moodboard is only finished when it can be handed over. These steps turn it into the start of a real site.

1. Write the tokens. Convert the palette into named color tokens by role (--bg, --surface, --text, --text-muted, --accent), not by hue. Do the same for fonts. See design tokens explained for a practical setup.
2. Fix a type scale. Pick a body size (16 to 18px) and a ratio, such as 1.25 for product sites or 1.333 for editorial ones, and generate five to seven steps.
3. Fix a spacing unit. An 8px base with steps of 4, 8, 16, 24, 32, 48, 64 and 96 covers almost every gap a marketing site needs.
4. Design the hero first. It carries the most decisions in the least space. Once the hero holds the mood, the rest of the page follows its rules.
5. List the sections. Map your layout references to the sections the page needs, in order. A typical order is hero, logos, features, proof, pricing, FAQ, final call to action and footer.
6. Keep the board beside the build. When a new decision comes up during development, check it against the three words and the counter-words before inventing something new.

If you would rather start from something already structured, the moodboards on MUUDS are built this way: each one carries a palette, fonts, a type scale, spacing, a hero design and sections, drawn from real analysed websites, so you can study how the pieces fit before making your own.

In short

A good website moodboard is small, specific and buildable. Start with three mood words and a few counter-words, collect references from real websites, cut hard, group what is left by job, and write down the actual values. Then turn those values into tokens, a type scale and a spacing unit, design the hero, and let the rest of the site follow.