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.