Module 02: Design Principles — Design & Code Foundations

01

Hierarchy

Visual hierarchy guides the eye through content in order of importance. Without hierarchy, viewers don't know where to look first.

Main Headline

Supporting subhead

Body text provides additional details

Size Creates Importance

Larger elements appear more important. The eye naturally goes to the biggest element first. Use size to establish reading order.

Key point: Size is the most powerful hierarchy tool

Bold Text (900)

Semibold Text (600)

Regular Text (400)

Light Text (300)

Weight Adds Emphasis

Heavier weights draw attention. Combine weight with size for stronger hierarchy. Be careful not to overuse bold.

Key point: If everything is bold, nothing is bold

Primary content

Accent draws the eye

Secondary content

Tertiary content

Color Directs Attention

Bright or saturated colors stand out. Use color sparingly to highlight what matters. Too many colors = no hierarchy.

Key point: Use accent colors for calls-to-action

Top-left = seen first

We read left-to-right, top-to-bottom in Western cultures

Top-right = seen second

Bottom-left

Bottom-right = seen last

Position Implies Order

In Western cultures, we read top-to-bottom, left-to-right. Position elements accordingly. Top-left gets seen first.

Key point: Place most important content where eyes naturally go first

HEADLINE

SUBHEAD WITH ACCENT

Body text in lighter weight and muted color

Combining Methods

The most effective hierarchy combines multiple methods: size + weight + color. Each reinforces the other.

Key point: Layer methods for unmistakable hierarchy

02

Contrast

Contrast creates visual interest and helps distinguish elements. If two things are different, make them obviously different.

Hard to Read

Low contrast strains the eyes

Weak Contrast

When contrast is too low, text becomes hard to read and elements blend together. This fails accessibility standards.

Key point: WCAG requires 4.5:1 contrast ratio for body text

Readable

Better, but could be stronger

Medium Contrast

Medium contrast is readable but doesn't stand out. Use for secondary content, not primary messaging.

Key point: Acceptable for secondary content

Maximum Impact

Black on white (or vice versa) is highest contrast

Strong Contrast

Strong contrast is immediately readable and creates visual impact. Use for headlines and important content.

Key point: Black/white is 21:1 ratio - maximum contrast

SIZE

BIG

small

WEIGHT

Bold

Light

COLOR

SHAPE

Types of Contrast

Contrast isn't just about color. Size, weight, shape, texture, and space all create contrast. Mix types for stronger effect.

Key point: The more types of contrast, the stronger the distinction

03

Alignment

Every element should have a visual connection with something else on the page. Nothing should be placed arbitrarily.

Title Here

Some content

More stuff

Random

No Alignment

When elements aren't aligned, the design looks amateur and chaotic. There's no visual flow or connection.

Key point: Looks random and unprofessional

Left aligned title

Centered content

Back to left

Partial Alignment

Mixing alignments without purpose creates confusion. Each alignment should have a reason.

Key point: Inconsistent alignment weakens the design

Title

Supporting text

Proximity

Related items should be grouped together. Space between elements communicates their relationships.

Title A

Description for A

Title B

Description for B

Equal Spacing (Wrong)

With equal spacing, it's unclear which description belongs to which title. Relationships aren't visible.

Key point: Equal spacing creates ambiguity

Title A

Description for A

Title B

Description for B

Proximity Creates Groups

Less space within groups, more space between groups. Now the relationships are immediately clear.

Key point: Proximity communicates relationships instantly

Full Name

Email Address

Password

Form Design Example

Labels are close to their inputs (small gap). Form fields are separated from each other (larger gap). This is proximity in action.

Key point: Forms rely heavily on proximity for usability

05

Repetition

Repeat visual elements throughout a design to create consistency, unity, and a cohesive look.

Card 1

Card 2

Card 3

No Repetition

Different colors, sizes, shapes, fonts. Nothing connects these elements. It looks like three different designs.

Key point: Lacks visual unity - confusing

Card 1

Description

Card 2

Description

Card 3

Description

Strong Repetition

Same colors, same structure, same accent. These clearly belong together as a unified set.

Key point: Cohesive, professional, scannable

DESIGN TOKENS

Primary

White

Gray

Black

Repetition = Design System

Design systems are formalized repetition. Define colors, fonts, spacing, and components once. Reuse everywhere.

Key point: Design systems ensure consistent repetition at scale

06

Balance

Distribute visual weight evenly across the design. Balance creates stability and prevents designs from feeling lopsided.

Poor Balance

All the visual weight is on the left. The design feels like it will tip over. Viewers feel uncomfortable.

Key point: Lopsided - creates visual tension

Symmetrical Balance

Mirror image on both sides. Creates stability and formality. Works well for traditional, corporate designs.

Key point: Stable but can feel static or formal

Asymmetrical Balance

Different elements with equal visual weight. More dynamic than symmetry. One large element balanced by multiple smaller ones.

Key point: Dynamic and interesting while still balanced

Radial Balance

Elements radiate from a central point. Creates focus on the center. Common in logos and decorative designs.

Key point: Creates strong focal point at center

07

White Space

Empty space is not wasted space. White space provides breathing room, separates content, and signals quality.

Heading

Body text that runs right up against everything else with no room to breathe making it hard to read and feeling cramped

Another Section

The Science Behind Design

Design principles aren't arbitrary rules - they're based on how human perception and cognition work.

You see two groups, not five dots

Gestalt Psychology

Gestalt principles explain how we perceive groups, patterns, and relationships. Proximity, similarity, closure, continuity - the brain groups things automatically.

Key point: Design principles are rooted in human perception

HIGH LOAD

Many fonts, colors, competing elements. Brain works hard to process.

LOW LOAD

Clear hierarchy, consistent patterns. Brain processes easily.

Cognitive Load Theory

Working memory is limited. Cluttered designs require more mental effort. Good design reduces cognitive load by being predictable and clear.

Key point: Simplicity reduces mental effort

F-Pattern

Z-Pattern

For image-heavy pages with less text

Eye Movement Patterns

Eye-tracking studies show predictable scan patterns. F-pattern for text-heavy content. Z-pattern for sparse layouts. Design with these patterns in mind.

Key point: Put important content where eyes naturally go

7+/-2

Items in short-term memory

Memory Limits

Miller's Law: humans can hold about 7 (plus or minus 2) items in working memory. Navigation with 9+ items overwhelms. Chunk information into groups of 3-5.

Key point: Keep navigation and choices under 7 items

11

Real-World Examples

How major websites apply these principles. Learn to see the invisible structure.

iPhone

Designed to be loved.

Principles Identified:

Hierarchy One clear focal point. Product name largest. Tagline secondary.

White Space Massive margins signal luxury. Products float in emptiness.

Contrast Dark backgrounds make products glow. High contrast text.

Key insight: Apple uses extreme white space to create a luxury feel and focus attention.

Google

Principles Identified:

Hierarchy Search bar is the only thing that matters. Everything else minimized.

Alignment Perfect center alignment focuses all attention.

White Space Nearly empty page. One task, one focus.

Key insight: Google's homepage is a masterclass in hierarchy - one action, impossible to miss.

Payments infrastructure

Principles Identified:

Contrast Vibrant gradient stands out from typical corporate blue.

Repetition Consistent card patterns, spacing, and color system throughout.

Balance Asymmetric layouts that still feel balanced and intentional.

Key insight: Stripe proves that technical products can have beautiful, principle-driven design.

12

Common Failures

Mistakes that happen when principles are ignored. Learn to recognize and fix them.

Failure: Frankenfonts

Serif heading

Comic Sans body

IMPACT ACCENT

Fix: Stick to 2 fonts maximum

Inter Bold heading

Inter Regular body

Inter Medium accent

Rule: Violates Repetition. Multiple fonts destroy visual unity. Use one font family with different weights.

Failure: Rainbow Syndrome

Fix: Use a limited color palette

Rule: Violates Hierarchy and Repetition. Too many colors = no focal point. Limit to 3-4 colors.

Failure: Everything Bold

ALL THE TEXT

IS BOLD

NOTHING STANDS OUT

Fix: Reserve emphasis for key content

Headline is bold

Body text is regular

So this word stands out

Rule: Violates Hierarchy and Contrast. If everything is emphasized, nothing is. Use bold sparingly.

Failure: Wall of Text

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit.

Fix: Break content into sections

Section Title

First paragraph with breathing room.

Next Section

Second paragraph, properly spaced.

Rule: Violates White Space and Proximity. Dense text blocks are unreadable. Add headings, spacing, and breaks.

13

Visual Tests

Quick checks to evaluate if your design follows the principles.

01

Squint Test

Tests: Hierarchy

Squint until the design blurs. Can you still see what's most important? If hierarchy disappears when blurred, it's too weak.

Headline

Subtext

02

5-Second Test

Tests: Clarity

Show someone your design for 5 seconds. Can they tell you what it's about and what action to take? If not, hierarchy and clarity need work.

5 seconds to understand

What is this? What do I do?

03

Grayscale Test

Tests: Contrast & Hierarchy

Remove all color. Does the design still work? If it relies on color alone for hierarchy, it fails accessibility and weak contrast.

Still readable

Even without color

04

Distance Test

Tests: Balance & Composition

Step back from your screen (or zoom out to 25%). Does the overall composition feel balanced? Unbalanced designs become obvious at distance.

14

CSS Implementation

Translating design principles into code. These CSS patterns embody the principles.

:root {
  --font-xs: 0.75rem;   /* 12px */
  --font-sm: 0.875rem;  /* 14px */
  --font-base: 1rem;    /* 16px */
  --font-lg: 1.25rem;   /* 20px */
  --font-xl: 1.5rem;    /* 24px */
  --font-2xl: 2rem;     /* 32px */
  --font-3xl: 2.5rem;   /* 40px */
}

h1 { font-size: var(--font-3xl); }
h2 { font-size: var(--font-2xl); }
h3 { font-size: var(--font-xl); }
p  { font-size: var(--font-base); }

Typography Scale via CSS

CSS Variables - Define scale once, use everywhere
Consistent ratios - Each step is ~1.25x larger
rem units - Scales with user font preferences

Tip: A consistent type scale creates automatic hierarchy.

: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 */
}

.card { padding: var(--space-4); }
.section { margin-bottom: var(--space-12); }

Spacing Scale via CSS

Consistent spacing - No arbitrary pixel values
Related items - Use smaller values (space-2, space-3)
Separate groups - Use larger values (space-8, space-12)

Tip: Spacing scale enforces proximity and white space principles automatically.

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #d4d4d4;
  --color-gray-500: #737373;
  --color-gray-700: #404040;
  --color-gray-900: #171717;
  --color-primary: #ff0000;
}

.text-primary { color: var(--color-gray-900); }
.text-secondary { color: var(--color-gray-500); }
.accent { color: var(--color-primary); }

Color System via CSS

Limited palette - Grays + one accent color
Contrast levels - Gray scale provides hierarchy
Repetition - Same colors used throughout

Tip: A constrained color system ensures contrast and repetition.

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

Grid System via CSS

12-column grid - Divisible by 2, 3, 4, 6
Consistent gutters - Equal spacing between columns
Max-width - Prevents overly wide lines

Tip: Grid systems ensure alignment without manual positioning.

15

Self-Assessment

Test your understanding of the design principles.

Q1

What are the four main ways to create visual hierarchy?

Click to reveal

Q2

What is the proximity principle and why does it matter?

Click to reveal

Q3

How much white space should you use?

Click to reveal

Q4

What does the squint test reveal?

Click to reveal

Q5

Why is contrast important for accessibility?

Click to reveal

Design Principles

Core Concepts

Hierarchy

Contrast

Alignment

Proximity

Repetition

Balance

White Space

Science & Psychology

The Science Behind Design

Real-World Examples

Real-World Examples

Common Failures

Common Failures

Visual Tests

Visual Tests

Squint Test

5-Second Test

Grayscale Test

Distance Test

CSS Implementation

CSS Implementation

Self-Assessment

Self-Assessment

Key Takeaways