MODULE02

Design
Principles

Tools change. Software updates. Trends fade. But principles endure. This module establishes the core principles that apply across all design work.

01

The Core Principles

Seven fundamental principles form the foundation of all visual design. Understanding these allows you to analyze any design and create with intention.

01 Hierarchy

TITLE

SUBTITLE

BODY

TITLE

SUBTITLE

BODY

Guide the eye to what matters most.
02 Contrast
LOW
HIGH
Difference creates meaning.
03 Alignment
Create invisible lines that connect.
04 Proximity
Space creates relationships.
05 Repetition
Consistency builds recognition.
06 Balance
Visual weight distribution.
07 White Space
Empty space is active space.
02

Hierarchy in Action

Visual Hierarchy Scale
PRIMARY / Headlines
SECONDARY / Subheads
TERTIARY / Body Text
QUATERNARY / Captions

ERROR: SYSTEM FAILURE

Please restart your computer

Contact support if problem persists

Press any key to continue

Problem:

When everything is the same size and weight, nothing stands out. Is this critical? What should you do first?

ERROR

SYSTEM FAILURE DETECTED

Restart your computer to resolve this issue.

Contact support if problem persists: 1-800-HELP

[RESTART NOW]

Solution:

Clear hierarchy: ERROR grabs attention, instruction is prominent, details are secondary, action is obvious.

ERROR

System failure

Restart now

BAD

ERROR

System failure

RESTART

GOOD

Why It Works:

Pattern recognition. Hierarchy = roadmap. Reduces cognitive load by 50%. Users know what to do instantly.

03

Print vs Web Application

HIERARCHY

[PRINT]

HEADLINE

Subhead

Body text

SIZE + POSITION + COLOR

[WEB]

HEADLINE

Subhead (hover)

Body animated

+ MOTION + INTERACTIVITY

CONTRAST

[PRINT]

CREAM

INK

INK + PAPER TEXTURE

[WEB]

LIGHT

DARK

RGB + THEME TOGGLE

ALIGNMENT

[PRINT]

FIXED GRID SYSTEM

[WEB]

CSS GRID / FLEXBOX

WHITE SPACE

[PRINT]

$$$

PAPER COSTS MONEY

[WEB]

VIRTUAL = FREE

REPETITION

[PRINT]

BRAND GUIDELINES

[WEB]

DESIGN SYSTEMS

Key Takeaways
  • Principles > Tools Tools change constantly; principles endure for decades
  • Hierarchy Directs Not everything can be equally important - decide what matters
  • Contrast Creates Similar things look similar; different things look different
  • Space is Active Empty space separates, groups, and emphasizes