Layout
Layout is the invisible architecture of design. It establishes hierarchy, creates rhythm, and transforms disparate elements into coherent experiences.
Principles
Section titled “Principles”| Principle | Effect | Application |
|---|---|---|
| Hierarchy | Directs attention | Size, weight, position |
| Proximity | Implies relationship | Whitespace, grouping |
| Alignment | Creates order | Grid, baseline |
| Contrast | Signals importance | Scale, color, weight |
Resources
Section titled “Resources”Deconstructing Designs
Section titled “Deconstructing Designs”Deconstructing Designs by Kevin Hale teaches reverse-engineering as a design skill.
The approach: take any interface, trace its invisible grid lines, measure its spacing ratios, and document its hierarchy. Through analysis, internalize the patterns that make layouts work.
Take a screenshot. Draw the grid. What system emerges?
Layout Primitives
Section titled “Layout Primitives”| Model | Dimension | Use Case |
|---|---|---|
| Flexbox | Single axis | Component internals, alignment |
| Grid | Two axes | Page structure, galleries |
| Flow | Document | Long-form content |
Patterns
Section titled “Patterns”- Holy Grail — Header, footer, content with sidebars
- Sidebar — Navigation + fluid content area
- Card Grid — Responsive equal-height containers
- Split — 50/50 hero layouts
- F-Pattern — Optimized for scanning behavior
Related
Section titled “Related”- CSS — Layout engines and calculation tools
- Typography — Type scale integration with spacing