Correction, 2026-10-01: the first version of this page stated that most traffic and most decisions happen on mobile, and that redesigns which change everything "test worse" than ones that fix what is broken. We have no cross-site source for either; the first now points you to your own analytics and the second is phrased as reasoning, not a result.
Web moodboards go wrong because a website is behaviour, not an image. A board of beautiful desktop screenshots says nothing about what happens on scroll, at 375 pixels wide, or when the real content is three times longer than the placeholder. Collect for those three conditions and the board starts predicting the redesign rather than decorating it.
Collect for the three conditions
Mobile first, literally. Screenshot references on a phone, not on a desktop. For many sites a large share of visits arrive on phones (your own analytics will say how large), and desktop-only references produce designs that get compressed into something nobody chose.
Motion and scroll. Capture short screen recordings, not stills. How a page reveals itself is half its personality and is invisible in a screenshot.
Real content length. Find references with paragraphs, long product names, and eight navigation items rather than four. Designs approved on ideal content tend to break on actual content.
The sections
Layout logic. Grid, density, whitespace, how sections separate. This is what makes a site feel like a site rather than like a template.
Type system. Headline, body, and small, shown at real sizes. Web type fails at the extremes, so board the extremes.
Colour with proportion. Which colour dominates, which appears rarely, and what the interface states (hover, active, error) look like.
Component references. Cards, navigation, forms, footers. Boring, and it is what the build actually consists of.
Motion references. Two or three clips, no more.
What to prove before design starts
Three things, cheaply, in that order.
The type system at small sizes, because it fails there first.
The hero with real content, not with a five-word headline that will never exist.
One dense page, the one everybody forgets: the pricing table, the long article, the account settings. Directions that only work on the homepage produce redesigns that stall at page four.
Generated imagery helps for the visual layer here: if the redesign depends on a photographic style you do not yet own, generating three treatments of the actual subject at 6 to 21 credits an image on 8frame (18 to 63 credits for all three) shows whether the direction is achievable before a photoshoot is budgeted.
What belongs on the board that usually does not
Empty states and errors. The pages everyone designs last and users see when they are already frustrated.
The dark mode question, decided rather than deferred.
Accessibility constraints. Contrast requirements shape the palette, and discovering that after approval means re-approving.
What stays. Redesigns that change everything cost more than redesigns that change what is broken, and they make it harder to tell which change helped.
FAQ
How is a web moodboard different from a brand moodboard? A brand board defines a look; a web board has to define behaviour and states as well. Colour, type, and imagery are only the first third of it.
Should the board include competitor sites? Two or three, tagged for what specifically to take or avoid. Category conventions exist for usability reasons and ignoring all of them is expensive.
Do I need real content before designing? You need realistic content: real lengths, real product names, real edge cases. Waiting for final copy stalls projects; designing against placeholders produces designs that break.
Sources
- 8frame image credit prices (Seedream 5 Lite 6, Nano Banana Pro 21): the 8frame app, checked 2026-10-01
Collect on a phone, capture motion, and prove the type at small sizes.
Try it without signing up: the 8frame canvas opens on a real board. The canvas is free and unlimited; generation is paid from $19/month.