Module 07: Layout Principles — Design & Code Foundations

01

Visual Flow

Understanding how eyes move through layouts.

F-Pattern: text-heavy pages, articles, search results

F-Pattern Reading

On text-heavy pages, eyes scan in an F-pattern: across the top, down the left side, with occasional horizontal scans. Put key content top-left.

Key point: F-pattern: most important content at top and left edge

Z-Pattern: landing pages, sparse layouts, marketing

Z-Pattern Reading

For image-heavy or sparse layouts, eyes follow a Z-pattern: top-left to top-right, diagonal down, bottom-left to bottom-right. Place CTAs at end points.

Key point: Z-pattern: logo top-left, CTA bottom-right

Contrast creates focal point - eyes go to the different element

Creating Focus

Create focal points through contrast: size, color, isolation, or position. One primary focal point prevents confusion about where to look.

Key point: One clear focal point per section

Primary Optical

Strong attention

Strong Fallow

Less attention

Weak Fallow

Less attention

Terminal Area

Final focus

Gutenberg Diagram

The Gutenberg Diagram shows attention hot zones. Top-left and bottom-right get most attention. Top-right and bottom-left are 'fallow' areas.

Key point: Place key content in primary optical and terminal areas

02

Content Hierarchy

Making importance visually obvious.

Primary

Secondary

Tertiary content

Size Creates Hierarchy

Larger elements are seen as more important. Create clear size hierarchy: headlines significantly larger than body, subheads in between.

Key point: Size differences should be obvious, not subtle

HERO - First, most prominent

Main content

Sidebar

Position Shows Priority

Position implies priority. Content at the top is seen first. Content in the main column is more important than sidebars. Hierarchy through placement.

Key point: Top and center positions signal higher importance

Section Title

White Space

Using empty space as a design element.

LUXURY

Macro White Space

Macro white space is large empty areas between sections. It creates breathing room, signals quality, and lets content stand out. Luxury brands use lots of it.

Key point: Generous margins = premium feel

Tightspacing makesthings hardtoread

Proper spacing makes things easy to read

Micro White Space

Micro white space is small spacing: line-height, letter-spacing, padding within elements. It affects readability and comfort at the content level.

Key point: Line-height 1.5-1.6 for body text

Card 1

Card 2

Card 3

Active White Space

Active white space is intentional - it separates elements, creates grouping, and guides the eye. The space between cards is active.

Key point: Active white space is a design decision

This container doesn't fill the space. The leftover area is passive white space - it exists because something else doesn't fill it.

Passive White Space

Passive white space is leftover - it exists because content doesn't fill the container. It's fine, but shouldn't be confused with intentional design.

Key point: Passive white space happens; active white space is designed

04

Rhythm & Consistency

Creating predictable patterns that aid navigation.

Headline

Body text aligned to the same baseline grid. Every element snaps to vertical rhythm.

Vertical Spacing

Vertical rhythm means consistent spacing based on a base unit. If your line-height is 24px, use multiples of 24px for margins. Creates visual harmony.

Key point: Use a consistent spacing scale

Title

Description

Title

Description

Title

Description

Repeated Patterns

Repeating patterns (same card style, same section layout) create predictability. Users learn the pattern once, then navigate efficiently.

Key point: Consistency enables scanning

Regular

Featured

Regular

Breaking the Pattern

Strategic pattern breaks draw attention. A featured item that breaks the visual pattern stands out. Use sparingly - too many breaks = no pattern.

Key point: Break patterns intentionally to highlight

--space-1: 4px
--space-2: 8px
--space-3: 12px
--space-4: 16px
--space-6: 24px
--space-8: 32px
--space-12: 48px
--space-16: 64px

Spacing Systems

A spacing scale (like 4px increments) ensures all spacing is intentional and consistent. No arbitrary values - everything snaps to the scale.

Key point: Define a spacing scale and stick to it

05

Container Patterns

Common layout containers and their uses.

Full-width hero or section

Full Width Containers

Full-width containers span the entire viewport. Use for heroes, banners, section backgrounds. Content inside may still be constrained.

Key point: Full-width background, constrained content

Content in a max-width container. Lines stay readable, layout stays balanced.

Max-Width Containers

Max-width containers (1200px, 1400px) prevent content from stretching too wide on large screens. Centers content with auto margins.

Key point: max-width: 1200px; margin: 0 auto;

Narrow containers (600-700px) are ideal for long-form text. Optimal line length for readability.

Narrow Containers

Narrow containers (600-700px) create optimal line lengths for reading. Use for articles, documentation, text-heavy content.

Key point: 65ch or ~600px for readable text

Content side with text, CTAs, and information.

Visual side with image or illustration.

Split Layouts

Split layouts (50/50 or 60/40) pair content with visuals. Common for feature sections, alternating text and images.

Key point: Split layouts balance text and visuals

14

CSS Layout Implementation

Code patterns for layout.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container--narrow {
  max-width: 700px;
}

.container--wide {
  max-width: 1400px;
}

.container--full {
  max-width: none;
}

Container System via CSS

max-width - Constrains content width
margin: 0 auto - Centers container
padding: 0 1rem - Gutter on small screens

Tip: Container widths should be consistent across your site.

:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
}

.section { padding: var(--space-16) 0; }
.card { padding: var(--space-4); }
.stack > * + * { margin-top: var(--space-4); }

Spacing Scale via CSS

CSS variables - Named spacing values
Multiplier system - Based on 4px increments
Stack pattern - Consistent vertical spacing

Tip: The stack pattern (> * + *) adds margin between siblings, not before the first.

.section {
  padding: var(--space-16) 0;
}

.section + .section {
  border-top: 1px solid var(--color-border);
}

.section__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.section__title {
  font-size: var(--font-2xl);
  margin-bottom: var(--space-2);
}

Section Pattern via CSS

Consistent padding - Same vertical rhythm
Border separation - Visual section dividers
Nested elements - BEM-style naming

Tip: Reusable section patterns create layout consistency.

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.split--reverse {
  direction: rtl;
}

.split--reverse > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
  }
}

Split Layout via CSS

grid-template-columns - Equal columns
align-items: center - Vertical centering
direction: rtl - Reverses order without reordering DOM

Tip: Use direction trick to alternate left/right without changing HTML order.

15

Self-Assessment

Test your layout knowledge.

Q1

What is the F-pattern and when does it apply?

Click to reveal

Q2

What's the difference between macro and micro white space?

Click to reveal

Q3

Why is a spacing scale important?

Click to reveal

Q4

How does position affect content hierarchy?

Click to reveal

Q5

What's the optimal max-width for long-form text content?

Click to reveal

Layout Principles

Core Concepts

Visual Flow

Content Hierarchy

White Space

Rhythm & Consistency

Container Patterns

CSS Implementation

CSS Layout Implementation

Self-Assessment

Self-Assessment

Key Takeaways