Web Visual Direction
Turn an ambiguous brief into one coherent visual system. Make choices that fit the product and can survive implementation; do not produce a mood-board-shaped list of adjectives.
Workflow
- Inspect the product brief and existing code, brand assets, screenshots, content, component library, and constraints. Preserve intentional brand equity.
- State the audience, their immediate task, and the feeling the interface should create in one sentence each.
- Choose one visual thesis with a useful tension, such as "editorial authority with operational speed." Explain why it fits.
- Select two or three relevant references. Extract principles - rhythm, contrast, framing, density - not surface decoration or copyrighted layouts.
- Decide the composition before styling details:
- identify the first viewport's focal point;
- define the grid, content width, density, and section rhythm;
- decide what intentionally breaks the grid, if anything.
- Define implementation-ready rules for typography, color, surfaces, borders, imagery, icons, and motion.
- Express the direction as a small token set and component implications. Reuse the project's existing styling system.
- Implement one representative viewport or component when implementation is in scope.
- Verify the direction at mobile and desktop widths. Remove choices that weaken comprehension, hierarchy, performance, or accessibility.
Decision Rules
- Lead with the real product, work, place, person, object, or outcome.
- Prefer a memorable structural idea over decorative effects.
- Match density to the job: operational interfaces are compact; narrative brand pages can breathe.
- Use typography with a reason. Do not ban or choose a font only because it is fashionable.
- Use cards for meaningful grouping, not as the default container for every sentence.
- Treat gradients, glass, grain, glow, and oversized type as tools, not proof of design quality.
- Keep motion purposeful and respect reduced-motion preferences.
- Do not fabricate brand assets, customer logos, metrics, or product screenshots.
Delivery Contract
Return or implement:
- Visual thesis - one sentence.
- Reference principles - what to borrow and what to avoid.
- Direction spec - composition, type, palette, surfaces, imagery, icons, and motion.
- Token sketch - named values or mappings compatible with the codebase.
- Responsive intent - what changes at narrow and wide widths.
- Proof - screenshot or inspected viewport when browser access exists.
Reference
Read references/site-archetypes.md when the product type should materially change the direction.
