This focused guide explains a practical task and the decisions that help make the result clear and useful. For related planning, continue with brand style guide color palette guide.
1. Define what the moodboard should communicate
Write down the brand qualities, audience, and project goal the board should express. A clear brief helps distinguish useful references from images that are attractive but unrelated to the site.
Decide who will use the board and what decisions it should inform, such as visual tone, photography direction, or page composition. Keep the scope small enough that the board can lead to concrete choices.
2. Collect and annotate references
Gather a limited set of licensed or publicly viewable references from websites, print, photography, color, and typography. Record the source and note the specific quality that caught your attention.
Add short annotations such as “generous spacing” or “warm product photography.” Avoid treating an entire third-party design as a template to copy; identify the principle and create an original arrangement.
3. Turn the board into design decisions
Look for recurring traits and select a small number to carry into the project. Translate those traits into choices for palette, type roles, image treatment, and section rhythm.
Document decisions so they can be used consistently. A finished brand style guide can capture the lasting rules; the moodboard is the exploratory step that helps you choose them.
4. Apply and review the direction in Wio
Use Wio to explore the visual direction with real page content. Apply the chosen cues across sections, then review the whole composition in Pages Spatial to see whether the parts feel related.
Compare the page against the project goal and audience, not just the moodboard. Revise choices that obscure information, reduce readability, or make the site feel too close to a reference.
