Layout Basics
Layout is how you arrange elements on a page. Good layout guides the viewer's eye, creates visual hierarchy, and makes content easy to scan.
Visual Hierarchy
Not everything on a page is equally important. Visual hierarchy uses size, weight, color, and position to signal what matters most:
- Large, bold headings draw the eye first
- Subheadings provide secondary structure
- Body text delivers the detail
- Captions and labels provide supporting context
If everything is the same size and weight, nothing stands out — and the viewer doesn't know where to start reading.
Whitespace
Whitespace (also called negative space) is the empty area between and around elements. It's not wasted space — it's an active design tool:
- Increases readability — text with generous line spacing is easier to read
- Creates grouping — elements closer together are perceived as related
- Signals importance — more whitespace around an element makes it feel more prominent
- Reduces cognitive load — a page with breathing room feels calmer and more organized
Grid Systems
Most professional layouts are built on grids — invisible columns that align content into a consistent structure. A 12-column grid is the most common on the web because 12 divides evenly by 2, 3, 4, and 6, giving flexible layout options.