Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/UX Design Foundations/13 Core Visual Design Principles
Level 4 · Principles of Design

13 Core Visual Design Principles

14 min read
6 exercises
250 XP
Start lesson

Ready to test what you learned?

Complete the lesson quiz and earn 250 XP.

Start quiz

Topics in this lesson

Gestalt Psychology: Proximity and SimilarityGestalt Continuation, Closure, and Figure-GroundScale, Proportion, and Dominance in Visual LayoutsVisual Rhythm, Cadence, and Pattern RepetitionSymmetrical vs. Asymmetrical Compositional BalanceUnity, Harmony, and Design System Cohesion

From Course

📘
UX Design FoundationsBeginner · 25 lessons
13 Core Visual Design Principles

Lesson

13 Core Visual Design Principles

Gestalt Psychology: Proximity and SimilarityGestalt Continuation, Closure, and Figure-GroundScale, Proportion, and Dominance in Visual LayoutsVisual Rhythm, Cadence, and Pattern RepetitionSymmetrical vs. Asymmetrical Compositional BalanceUnity, Harmony, and Design System Cohesion
Start lesson
Complete lesson and earn 250 PX
Exercise #1

Gestalt Psychology: Proximity and Similarity

Founded in 1912 by Max Wertheimer, Wolfgang Köhler, and Kurt Koffka, Gestalt Psychology explains how the human mind groups visual stimuli into unified wholes rather than disjointed parts:

1. Law of Proximity

Elements placed physically close together are perceived as belonging to the same functional group:

  • UI Application: Form input labels must sit significantly closer to their corresponding input field than to the preceding field. When spacing is equal, users misassociate labels with the wrong inputs.

2. Law of Similarity

Elements that share visual characteristics (shape, color, size, orientation) are perceived as sharing the same function:

  • UI Application: If all interactive links are electric indigo, styling a non-clickable header in electric indigo tricks users into clicking it in vain.
Exercise #2

Gestalt Continuation, Closure, and Figure-Ground

3. Law of Continuation

The human eye naturally follows lines, curves, and continuous sequences. In modern mobile UI, cards extending slightly off-screen (partial card clipping) signal horizontal swipeability far more effectively than static chevron arrows.

4. Law of Closure

The human brain automatically completes incomplete shapes to perceive a recognizable whole. Minimalist line icons leverage closure to communicate concepts with minimal visual ink.

5. Figure-Ground Segregation

The perceptual separation of focal objects (figure) from their background canvas (ground). When a modal dialog opens, a darkened backdrop scrim pushes the underlying page into the background, focusing cognitive attention entirely on the modal figure.

Exercise #3

Scale, Proportion, and Dominance in Visual Layouts

Layouts that treat every element with equal sizing become visually monotonous and impossible to scan:

  • Scale: The physical and optical size of elements relative to one another. A 32px headline next to 16px body copy establishes a clear 2:1 scale differential.
  • Focal Dominance: Every screen must have a single primary point of entry—a dominant visual element (such as a hero value proposition, an impactful chart, or a bold CTA) that commands the user's initial attention before subordinate details are explored.
  • Golden Ratio (1.618): Classical proportion often employed to split two-column editorial layouts (e.g., 62% primary content, 38% auxiliary sidebar).
Exercise #4

Visual Rhythm, Cadence, and Pattern Repetition

Visual rhythm is created by repeating interface patterns with consistent intervals, guiding users through long-form data feeds effortlessly:

  • Regular Rhythm: Predictable, identical spacing intervals between items (e.g., standard e-commerce product grids). Provides high cognitive predictability and eases rapid vertical scanning.
  • Progressive Rhythm: Elements gradually scale in size or color intensity across a sequence (e.g., an interactive pricing tier where the recommended tier expands slightly in scale).
  • Breaking Rhythm: Intentionally disrupting an established pattern (e.g., inserting a bold newsletter signup banner inside an editorial article feed) immediately recaptures drifting user attention.
Exercise #5

Symmetrical vs. Asymmetrical Compositional Balance

Visual balance is the distribution of optical weight across an interface:

Symmetrical Balance

Elements are arranged identically across a central vertical or horizontal axis.

  • Attributes: Conveys stability, formality, institutional dignity, and calm.
  • Usage: Common in luxury brand landing pages, login dialogs, and enterprise splash screens.

Asymmetrical Balance

Unequal visual weights balanced dynamically across the screen (e.g., a massive, bold headline on the left counterbalanced by an intricate, colorful 3D illustration and generous whitespace on the right).

  • Attributes: Dynamic, modern, energetic, and engaging. Directs reading flow deliberately along diagonal vectors.
Exercise #6

Unity, Harmony, and Design System Cohesion

Unity is the overarching visual design principle: the agreement among all individual elements that makes an interface feel like a single, cohesive organism rather than an arbitrary collection of disparate parts.

Foundations of Digital Unity

  1. Shared Geometry: Consistent corner radii (border-radius: 8px) across cards, buttons, inputs, and badges.
  2. Harmonious Palette: Using a curated semantic color scale with consistent contrast rules across all screens.
  3. Typographic Rhythm: Adhering strictly to a predetermined type scale and vertical grid system.

When unity is achieved, users intuitively navigate new screens because interaction rules remain universally consistent.