Module 7 / Web design process
UI direction, wireframes, and prototyping
Covers inspiration boards, mood boards, style direction, wireframes, and the move from structure to polished prototype.
Learning outcomes
- Use references to align tone without copying layouts.
- Move through low-fidelity, mid-fidelity, and high-fidelity work deliberately.
- Prototype interaction and motion only where it clarifies state, flow, or emphasis.
Lessons
Reference boards with reasons
References should explain tone, layout, spacing, imagery, motion, and component behavior, not just aesthetics.
Practice: Create a mood board with positive and negative references, each with a reason.
Wireframe fidelity levels
Low fidelity tests structure, mid fidelity tests density, high fidelity tests the full product story.
Practice: Produce three versions of the same landing page section at increasing fidelity.
UI assembly and consistency
Final UI should connect type, color, grid, imagery, states, and content into one coherent direction.
Practice: Turn one wireframe into a polished section using the style guide created earlier.
Motion and interaction purpose
Motion can show status change, emphasis, reveal, continuity, and feedback. It should not distract from the task.
Practice: Specify three interaction notes for a prototype and remove one unnecessary animation.
Studio assignment
Prototype package: mood board, wireframes, final UI, and interaction specification.
Design a responsive landing page prototype with documented reference choices, wireframes, and interaction notes.