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. Most traffic and most decisions happen there, 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 break on actual content, every time.
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 settles 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 and test worse than redesigns that change what is broken.
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.
Collect on a phone, capture motion, and prove the type at small sizes. The 8frame canvas is free and unlimited, and generation is paid from $19/month.