Mood board examples for web design

20 mood boards built from real websites, one style each. Every reference is a live site, credited to its maker, so you can open it and see how it moves.

Start a mood board How to make one

Brutalist mood board
Raw grids, system fonts or heavy grotesks, hard borders and visible structure. Take the honesty: the layout shows how it's built, and nothing is decorated for its own sake.
12 references
Minimalist mood board
Lots of space, a short palette and one typeface doing most of the work. What carries these is restraint: every element earns its place, and the whitespace is part of the layout.
12 references
Dark mood board
Dark backgrounds with light type, where contrast and glow carry the hierarchy. Note how these keep text readable: off-white type, generous size, and colour saved for accents.
12 references
Editorial mood board
Magazine thinking on the web: serif headlines, strong type scales, columns and images that break the grid. Take the pacing; these read like a story rather than a page of features.
12 references
Playful mood board
Bright colour, bouncy motion, stickers, characters and interactions that reward poking around. The good ones stay usable: the play sits on top of a clear structure.
12 references
Luxury mood board
Slow motion, refined serifs, large photography and a lot of restraint. Luxury here is mostly pace and space: fewer elements, more time on each.
12 references
Retro mood board
Callbacks to print, early web and old interfaces: grain, halftones, pixel type, chunky borders. The best treat the reference as a flavour rather than a costume.
12 references
3D mood board
Real-time 3D scenes, rendered objects and depth driven by scroll or cursor. Look at what the 3D is for: the strong ones use it to show a product or set a mood, not as a gimmick.
12 references
Monochrome mood board
Black, white and greys only, so type, layout and imagery do all the work. A good test of a design's structure, and a strong base for one accent colour.
12 references
Organic and natural mood board
Earthy palettes, soft shapes, textures and natural photography, common in wellness, food and sustainability brands. Take the softness and the textures that make a screen feel tactile.
12 references
Bold typography mood board
Type set huge, often edge to edge, as the main visual. Look at how these handle line breaks, tracking and the moment the type moves.
12 references
Gradient mood board
Soft colour fields, mesh gradients and glows that give flat layouts depth. The good ones keep the gradient in the background and let type sit cleanly on top.
12 references
Swiss and grid mood board
International Typographic Style on the web: strict grids, grotesk type, asymmetric layouts and lots of alignment. Take the grid; it's what makes these feel inevitable.
12 references
Neon mood board
Electric colour on dark grounds, glows and high-contrast accents. Use sparingly: these work because the neon is the one loud thing on the page.
12 references
Pixel and 8-bit mood board
Pixel fonts, dithering and low-res graphics, often paired with very modern layouts. The contrast between old texture and clean structure is what makes them work.
12 references
Glass and frosted mood board
Translucent panels, blur and light that passes through layers. Look at how these keep contrast high enough to read text over busy backgrounds.
12 references
Illustrated and hand-drawn mood board
Custom illustration, doodles and hand-drawn details that give a brand a voice no stock image can. Take the consistency: one illustrator's hand across the whole site.
12 references
Collage mood board
Layered images, torn edges, stickers and mixed media. These feel made by hand; look at how they stay organized under the mess.
12 references
Warm tones mood board
Creams, terracottas, ochres and warm photography. Warm palettes read as approachable and human, which is why hospitality and lifestyle brands lean on them.
12 references
Futuristic mood board
Interfaces that look like they come from a film: HUD details, mono type, scanlines and technical grids. Take the details; a few well-placed ones carry the whole mood.
12 references

How to use these

Pick the board closest to your brief, then cut it down. Keep the references that match what you're making and write next to each one what you're taking from it: the type, the colour, the grid, a motion. That note is what turns a collection of nice pictures into a direction someone else can follow.

The full method, with a template, is in how to make a mood board.

Answers

What should a web design mood board include?+

References for type, colour, layout, imagery and motion, a short brief, and a note on what to take from each reference. Around twelve references is enough to set a direction without one of them taking over.

Where do I find references for a mood board?+

Live websites are better than screenshots or AI images, because you can see how a layout behaves and moves. The boards on this page are built from the save.design library, where every reference opens the site it came from.

How many images should a mood board have?+

Between eight and fifteen. Fewer, and the result tends to copy one reference; more, and the direction gets vague.

.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:

:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*

*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:

:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..

.:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--.

..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--

-..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.-

--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.

.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+

+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.+.--..:*:.

Make your own mood board.

Save references from any page with the extension, drop them onto an infinite canvas, and share the board with one link.

Create a canvas

Brutalist mood board

Minimalist mood board

Dark mood board

Editorial mood board

Playful mood board

Luxury mood board

Retro mood board

3D mood board

Monochrome mood board

Organic and natural mood board

Bold typography mood board

Gradient mood board

Swiss and grid mood board

Neon mood board

Pixel and 8-bit mood board

Glass and frosted mood board

Illustrated and hand-drawn mood board

Collage mood board

Warm tones mood board

Futuristic mood board

How to use these

Answers

Answers

Make your own mood board.