Start low fidelity
Solve structure cheaply before high-fidelity styling makes changes emotionally expensive.
PROCESS / 02 / DESIGN
Design the
system.
Once the problem is clear, the job is to turn it into a coherent interaction system: information architecture, flow, visual hierarchy, reusable components and responsive behavior that all support the same task.
ONE SYSTEM / THREE STATES
DESKTOPHierarchy expands
TABLETPriority tightens
MOBILEInteraction changes
THE STANDARD
Design behavior before decoration.
A high-quality mockup explains what happens at every important state and viewport—not just what the ideal desktop screen looks like.
FLOWPath + alternate routes
SYSTEMTokens + components
STATESLoading to success
MOBILEIntent-adapted interaction
WHAT GREAT LOOKS LIKE
Design the state machine
Map what the interface can be doing, not only what it looks like in the ready state.
Create hierarchy with restraint
Use fewer stronger decisions instead of many competing visual treatments.
Treat mobile as a context
Change interaction patterns when touch, width and attention require it.
PRACTICAL METHOD
Sketch flow
Represent screens and decisions without visual polish.
Build foundations
Set grid, type, spacing, colors and interaction rules.
Compose key screens
Design the highest-value and highest-risk journeys first.
Prototype behavior
Validate navigation, feedback, overlays and transitions.
Stress responsive states
Test touch, long content, small widths and component reflow.