Sequenced path
The durable ideas underneath every other design skill: perception, structure, and hierarchy. This is the sequence to run first if your work looks busy or arbitrary and you cannot yet say why.
required · Book
Why here. Start by building vocabulary. You cannot improve what you cannot name, and this gives you a name for every effect you are about to study.
What to extract. The Gestalt principles, the aesthetic-usability effect, and signal-to-noise. Do not read it cover to cover; read those spreads and skim the rest.
How to study it. Treat it as a lookup. For five principles that grab you, find one example in an app you use every day.
required · Article
Why here. Perception comes before structure. Once you see how the eye groups elements automatically, grids and hierarchy stop feeling like rules and start feeling like tools.
What to extract. Proximity, similarity, closure, and continuity, and the fact that you can control grouping with spacing alone.
How to study it. Read it once, then open any cluttered interface and narrate out loud which Gestalt principle it is breaking.
Milestone: You can look at a layout and explain how the eye is grouping it.
required · Book
Why here. Now give perception a structure. The grid is how you turn intuition about grouping into repeatable, confident placement.
What to extract. How to build a modular grid and why alignment and consistent spacing read as quality.
How to study it. Rebuild one screen you admire on an explicit grid. Do it in Figma so the columns are real, not imagined.
practice · Book
Why here. Apply everything to a real interface. This is where perception, grid, and hierarchy become concrete tactics on a screen.
What to extract. Hierarchy through weight and color before size, generous then reduced spacing, and designing the empty and error states.
How to study it. Redesign one screen of your own using its tactics, then write down which three changes made the biggest difference.
Milestone: You have redesigned a real screen and can defend each decision.
Take a screen from a product you use and redesign it twice: once to maximize clarity, once to maximize density. Note what you traded away each time.
Next collection: Typography for Interfaces