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

1. Inspect the product brief and existing code, brand assets, screenshots, content, component library, and constraints. Preserve intentional brand equity.
2. State the audience, their immediate task, and the feeling the interface should create in one sentence each.
3. Choose one visual thesis with a useful tension, such as "editorial authority with operational speed." Explain why it fits.
4. Select two or three relevant references. Extract principles - rhythm, contrast, framing, density - not surface decoration or copyrighted layouts.
5. 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.
6. Define implementation-ready rules for typography, color, surfaces, borders, imagery, icons, and motion.
7. Express the direction as a small token set and component implications. Reuse the project's existing styling system.
8. Implement one representative viewport or component when implementation is in scope.
9. Verify the direction at mobile and desktop widths. Remove choices that weaken comprehension, hierarchy, performance, or accessibility.