Jesse Showalter on YouTube · Open on YouTube
Design foundations · Novice · Lesson 11 of 99 · 10 min video, then about 2 hours of practice
Spacing systems, grids and layout
After this you can lay out a screen on a consistent spacing scale and a column grid, and justify every gap rather than eyeballing it.
Why it matters
The difference between amateur and professional screens is usually spacing consistency, not creativity. Adopt a scale (commonly multiples of 4 or 8) and use only values from it. Learn the column grid for responsive layout and how gutters and margins behave at different breakpoints. The important insight is that spacing encodes relationship (it is Gestalt proximity made numeric), so a spacing scale is a hierarchy tool, not just tidiness. Trap: applying the grid religiously to optical problems like icon alignment, where the eye should win.
How to use this resource
Explains why a scale exists before showing one, which is the right order. Applies directly to the auto layout work later in this phase.