Module 3 / Design basics
Visual perception and design foundations
Builds the perceptual foundation from Gestalt principles, visual hierarchy, balance, spacing, density, and grouping.
Learning outcomes
- Use proximity, similarity, continuity, closure, and figure-ground to organize interfaces.
- Create hierarchy with size, weight, color, spacing, position, and contrast.
- Diagnose when a screen feels cluttered because grouping and spacing are weak.
Lessons
Gestalt for interface decisions
Perception principles explain why users group things before they read details.
Practice: Take a cluttered section and redraw it three ways using proximity, similarity, and continuity.
Hierarchy and focal points
A screen needs a deliberate reading order: what users see first, second, third, and what they can ignore.
Practice: Annotate a landing page hero with the intended reading order and fix any competing focal points.
Balance, rhythm, and white space
Spacing is structure. It separates groups, creates rhythm, and gives important elements room to work.
Practice: Rebuild a section using only grayscale, spacing, and type size before adding color.
Studio assignment
Annotated perception audit with a redesigned low-fidelity section.
Create a before-and-after critique of one section from a real website, focused only on perception and hierarchy.