Begin With Immediate Visual Feedback
Pick one small visual unit—like a course card—render it cleanly first, and change one variable at a time so cause and effect stay unmistakable.
Key points
- Define target visual
- Change one variable at a time
- Compare before & after
Exercise Sketch a minimal card with title, artwork, and status—zero extra chrome.
Decompose Layout by Spatial Relationships
Think in rows, stacks, overlays, and flexible spacers. Long titles and 320px viewports are first-class tests of layout clarity, not afterthoughts.
Key points
- Stacking & z-layers
- Alignment & rhythm
- Fixed vs flexible regions
Exercise Test your card with both a 3-word title and a 20-word title to ensure nothing clips.
Extract Components Only After Real Repetition
Compare two concrete instances side by side to spot shared structure versus varying props—avoiding premature abstraction.
Key points
- True structural repetition
- Data-only differences
- Shared accessibility & focus behavior
Exercise List shared markup versus dynamic props across two cards to define a minimal component interface.
Drive Motion From Explicit States
Map idle, active, completed, and error states first, then use motion to clarify hierarchy—always honoring reduced-motion preferences.
Key points
- Current state
- Triggering event
- Graceful fallback
Exercise Document saved vs unsaved button states, including toggle behavior and page reload persistence.