Grid systems, spatial rhythm, whitespace as information, and layout strategies that create meaning through structure.
Whitespace is an active design element. It creates hierarchy, groups related items, separates unrelated items, and gives the eye a place to rest. More whitespace usually means more perceived quality.
Items closer together are perceived as related. This is the most powerful layout tool you have. The space between a heading and its paragraph should be smaller than the space between sections.
Section gap: 48-64px (clear separation)
Heading to body: 8-16px (clearly connected)
Paragraph gap: 16-24px (related but distinct)
List item gap: 8-12px (tightly grouped)
Mixed-size cells in a grid. Creates visual hierarchy through size difference rather than position alone. Use larger cells for primary content, smaller for supporting.
50/50 or 60/40 vertical split. Image one side, content the other. Works well for product pages and comparison layouts.
Elements that break out of their containers and overlap neighboring sections. Creates depth and energy. Use sparingly.
Intentionally uneven layouts that still feel balanced through visual weight distribution. A large image balanced by a small block of text with generous whitespace.
Content that extends to viewport edges, alternating with contained content. Creates rhythm and breaks monotony.
Magazine-style layouts with mixed column widths, pull quotes, marginal notes, and varied image sizes. Best for long-form content.
Instead of designing for specific screen sizes, ask: "At what width does this content start to look bad?" That's your breakpoint.
Components should respond to their container, not the viewport. A card in a sidebar should behave differently than the same card in a main content area, regardless of viewport width.