Set the reading order before the color palette
Choose the page’s main message and arrange the supporting material around it. A workshop page might begin with the activity, then participation details, location, and the next available action. Ask whether a visitor can understand that sequence without reading every sentence.
Use the website builder guide to establish the delivery requirements. Then write a short visual brief describing the audience, intended mood, important content, and examples of the layout problems you want to avoid.
Request a limited design vocabulary
Agree on a small collection of heading styles, text sizes, spacing patterns, colors, cards, and actions. The design should make related things look related. Reserve a strong emphasis for information that deserves it; when every section competes equally, the visitor has to invent the hierarchy.
- Test headings with realistic lengths and natural line wrapping.
- Pair body text with a comfortable width and clear spacing.
- Give images a defined role: explain, demonstrate, or establish context.
- Use action labels that describe their actual destination.
- Check repeated components with short, long, and missing optional content.
For reusable patterns across many pages, continue to the web design templates guide.
Check meaningful structure and interaction
W3C’s page structure tutorial describes the value of meaningful page regions and logically nested headings. Inspect that structure as part of the design review. Text made large for visual emphasis should still have the appropriate role in the page.
Review the design at narrow, medium, and wide widths, including sizes between the main layouts. Open the menu with a keyboard, follow an action, and inspect the visible focus. Check that a sticky header does not obscure the content you need to read after navigation.
When one card requires a special adjustment, decide whether the shared component should change or the example needs a documented exception. Repeated one-off overrides can make later review difficult. Keep the visual rule understandable enough that another editor can apply it to the next page.
Common mistake: designing around ideal sample content
A layout can appear balanced when every title is short and every image has a centered subject. Replace those samples before approving the direction. Use a long program name, an important access note, and a photograph whose subject sits near the edge. Revise the shared pattern when those examples expose a problem.
Keep visual exploration separate from changes to approved facts. The AI workflow guide explains how to review scoped revisions while preserving the content decisions already made.
Accept a direction with evidence
Record which visitor task the layout supports, the difficult cases reviewed, and the remaining changes. A design decision should be explainable in terms of reading and interaction. Use the accessible low code template review for a deeper inspection of the patterns you intend to reuse.
