UX Encyclopedia

Principles of Design

The classic compositional principles — how visual elements relate so a design reads as intentional. Where gestalt (Gestalt Principles & Visual Perception) describes how perception works, these principles are the working vocabulary designers use to compose with it. Honesty note: this is design pedagogy refined over a century (Bauhaus foundations courses → Arnheim → Dondis → today), not experimental science — but each principle leans on a perceptual mechanism, cross-referenced below.

Balance — distributing visual weight

Symmetrical balance: blocks mirrored around a central axis read as formal and stable. mirrored around the axis equal weight, both sides
Symmetrical — mirrored weight reads formal, stable, trustworthy: login screens, checkout moments, centered empty states.
Asymmetrical balance: a large light block near the fulcrum is balanced by a small dark block far from it, like a seesaw. small + far balances big + near
Asymmetrical — unequal elements balanced by leverage; reads dynamic and editorial (heroes, dashboards) — and is harder to get right.
Radial balance: eight elements arranged evenly around a central point, like a dial. weight arranged around a center
Radial — weight around a center; rare in UI beyond dials, watch faces, and the occasional data-viz.

Every element has visual weight (size, darkness, saturation, complexity, isolation all add weight; Arnheim's classic analysis). Balance is how weights resolve around a composition's axis:

  • Symmetrical — mirrored weight; reads formal, stable, trustworthy. UI use: login screens, legal/checkout moments, centered empty states.
  • Asymmetrical — unequal elements balanced by leverage (a large light block offset by a small dark one farther from the axis). Reads dynamic, editorial, modern; harder to get right. UI use: hero sections, dashboards, marketing pages.
  • Radial — weight arranged around a center; rare in UI beyond dials, watch faces, and data-viz (sparingly — see Data Tables, Data Visualization & Dashboards).
  • Imbalance is a legitimate tool only when tension IS the message; an accidentally unbalanced screen reads as broken, not bold.

Contrast — difference that carries meaning

Three versions of the same five-element row: all identical shows nothing; one accented element marks the action; every element styled differently buries the signal in noise. nothing to see one signal noise
Contrast is information — reserve it for real differences (interactive vs. static, primary vs. secondary) and make it decisive: near-miss differences read as sloppiness, and decorative contrast makes the real signal compete with noise.

Difference along any channel — size, weight, color/value, shape, texture, motion — creates distinction. Rules that keep contrast working:

  • Contrast is information: reserve it for real differences (interactive vs. static, primary vs. secondary, selected vs. not). Decorative contrast competes with meaningful contrast.
  • Make it decisive (see Weber's law in Laws of Interaction Design): near-miss differences read as sloppiness, not as levels.
  • Value (light–dark) contrast is the strongest and survives color-vision deficiency and grayscale — test designs in grayscale to audit it.
  • Accessibility floor: contrast of text and UI components is regulated (WCAG 1.4.3/1.4.11 — see Color in Interface Design); aesthetic contrast never overrides it.

Emphasis & focal point — one thing first

Two versions of the same page: on the left the hero is amplified with size, accent and a badge over a busy field; on the right the hero stays modest but everything else is muted — the same element wins, with far less noise. amplify the hero — loud mute the field — calm same winner, quieter screen
Emphasis by de-emphasis — muting everything else (lower value contrast, whitespace isolation) is usually cheaper and calmer than amplifying the hero. Both screens answer "look here first"; only one is shouting. Audit with the squint test: the focal point should survive blur.

Every screen should answer "look here first" without words. Emphasis is spent contrast (Von Restorff, Laws of Interaction Design): the focal element differs from a calm field on one or two channels. Budget rules:

  • One primary focal point per screen; a second competing peak splits attention roughly in half, not into two full attentions.
  • Emphasis by de-emphasis: muting everything else is usually cheaper and calmer than amplifying the hero (whitespace isolation, reduced value contrast on secondary content).
  • Audit: squint test (Gestalt Principles & Visual Perception) — the focal point should survive blur.

Hierarchy — the reading order, engineered

Left: a three-level stack — one big primary bar, a medium secondary, and small tertiary lines, numbered one-two-three. Right: the same content with every bar equal — no entry point. 1 2 3 primary → secondary → tertiary flat — no entry point
Hierarchy is emphasis extended into a sequence — size, weight, value, position, and spacing encode primary → secondary → tertiary. Three levels are enough for most screens; if a fourth is needed, the screen is probably doing too much.

The extension of emphasis from one element to a sequence: primary → secondary → tertiary, encoded by size, weight, value, position, and spacing (levers ranked in Gestalt Principles & Visual Perception). Practical floor: three levels are enough for most screens; if a fourth is needed, the screen is probably doing too much (see Cognitive Load & Memory).

Scale & proportion — sizes in relationship

Left: five bars each 1.25 times the previous read as a designed ramp. Middle: the same ramp with one off-system size — it reads as an error. Right: one huge 47 percent beside body-size text — a deliberate scale break used once as emphasis. 20 · 25 · 31 · 39 · 49 any consistent ratio works 1.2 / 1.25 / 1.333 / 1.5 all work 39 expected — 33 shipped off-system size = error near-miss = sloppy, not a level 47% scale break = emphasis spend it once
Consistency is the active ingredient, not the number — the golden ratio has no reliable perceptual advantage (Markowsky 1992); 1.2, 1.25, 1.333, 1.5, and 1.618 all read as designed because the steps relate. A size off the ramp reads as a mistake — while one deliberate giant reads as emphasis, and works exactly as often as it is rare.
  • Scale = size relative to neighbors; it signals importance (bigger reads as more important — the most literal hierarchy lever) and creates depth (large+sharp = near/primary).
  • Proportion = size relationships within a system: type scales and spacing ramps built on consistent ratios read as designed (Typography for Interfaces, Layout, Spacing & Grids — Weber's law again).
  • The golden ratio (~1.618) is a venerable aesthetic tradition, but claims that it is perceptually optimal are folklore — careful reviews find no reliable preference (Markowsky 1992). Use any consistent ratio; 1.2, 1.25, 1.333, 1.5, and 1.618 all work because consistency is the active ingredient, not the specific number.
  • Deliberate scale-breaking (one oversized number, a giant glyph) is an emphasis device — it works exactly as often as it is rare.

Repetition & consistency — the system made visible

Top row: four cards with identical radius, spacing, and button anatomy but different content read as one system. Bottom row: the same four cards with mixed radii, spacing, and button styles read as four unrelated one-offs. one system — four different contents open → four one-offs — no system to learn
Repetition of system, variation of content — same radius, same spacing, same button anatomy make four different contents read as one product, and every learned pattern transfers. A broken repetition is a signal (Von Restorff), so never break one by accident.

Repeating treatments (same radius, same spacing, same button anatomy, same icon stroke) is what makes separate screens feel like one product — and it is a learnability multiplier, not just an aesthetic (each learned pattern transfers; see Mental Models, Affordances & Learnability and Building Your Own Design System, which industrializes this principle as tokens and components).

  • Repetition with no variation reads as monotony; the useful formulation is repetition of system, variation of content.
  • A broken repetition is a signal (Von Restorff) — so never break one by accident.

Rhythm & pattern — repetition with a beat

Three strips of bars: evenly spaced bars make a steady beat; bars grouped three-three-three with bigger gaps phrase into sections; one deliberately enlarged gap with an accented bar after it marks a beginning. regular even gaps — steady scan grouped bigger gap = new section syncopated one break = a beginning
Rhythm is spacing with a beat — regular intervals give the eye something to ride; grouped intervals phrase content into sections (a larger gap = a new movement); one deliberate interruption is an emphasis device — more than one is noise.

Regular intervals (card grids, list rows, consistent section spacing) create scanning rhythm the eye can ride; interval changes create pauses and beginnings (a larger gap = a new movement — the spacing-tier logic of Layout, Spacing & Grids). Alternation (zebra rows, alternating image/text sections) is rhythm doing wayfinding work. Syncopation — one deliberate interruption of the beat — is an emphasis device; more than one is noise.

Movement & direction — steering the eye

Main page: an avatar's gaze arrow and two dashed diagonal lines all converge on the headline and call to action. Inset counterexample: the face looks off the edge of the canvas and pulls attention out with it. gaze + diagonals converge on the action gaze leads off-screen attention follows it out
Composition points — gaze direction, diagonals, arrows, and perspective lines steer the eye. Make implied lines lead toward the message and the action, never off-screen or into a corner; a face looking away takes attention with it.

Composition can point: gaze direction in imagery, diagonals, arrows, perspective lines, motion (the strongest cue — Attention, Scanning & Perception), and the culture-specific default scan paths (F/Z patterns, Layout, Spacing & Grids). Design implication: make implied lines lead toward the message and the action, never off-screen or into a corner; faces in imagery should look toward your content, not away from it (see Attention, Scanning & Perception on faces and gaze).

White space — the active ingredient

The same content twice: cramped with sections touching, then with generous micro padding inside blocks and one macro gap between sections — brackets label the micro and macro space. micro macro — between sections dense — cramped, no structure spaced — structure appears free
White space is material, not leftover — micro space (line height, padding, gaps) inside components sets reading comfort; macro space between sections is where structure lives. Same content, no extra ink — and dense reads discount while sparse reads premium.

Negative space is not leftover; it is the material that creates grouping (proximity), emphasis (isolation), luxury/positioning cues (dense = discount, sparse = premium — a strong retail convention), and reading comfort (measure and leading, Typography for Interfaces).

  • Micro white space: within components — line height, padding, gaps.
  • Macro white space: between sections — where structure lives.
  • The instinct to fill it ("can we use this space?") is the most common stakeholder pressure against comprehension; the counter is showing the squint test and task performance, not taste arguments.

Unity & variety — one thing, not one note

Three six-tile grids: identical tiles with identical content go flat; identical chrome with varied content is alive; every tile restyled is chaos. The live middle state is highlighted. flat one note — sameness dulls alive same chrome, varied content chaos restyled chrome — no product
Unity from the system, variety from the content — shared chrome (grid, shape, palette) makes six tiles read as one artifact; the imagery, data, and words inside supply the life. Restyling the chrome for variety buys chaos, not interest.

Unity: shared grid, palette, type system, shape language, and voice make many parts read as one artifact (gestalt similarity + common region at product scale). Variety: controlled differences keep the sameness from going flat. The craft is the ratio — systems thinking supplies unity by default (design tokens), so most working variety should come from the content itself (imagery, data, words), not from restyling chrome.

Using the principles together

The audit order for a screen that feels off, as a five-step flow: alignment, then spacing, then contrast budget, then balance, then rhythm — the first mechanical steps fix most cases. 1 alignment 2 spacing 3 contrast budget 4 balance 5 rhythm mechanical checks — fix most cases then judgment calls
The audit order for a screen that "feels off" — alignment → spacing consistency → contrast budget (how many things compete) → balance → rhythm; the early steps are mechanical and fix most cases. And name the trade-off you're making: more emphasis costs unity, more variety costs rhythm, perfect balance can cost energy.
  • They trade off: more emphasis costs unity; more variety costs rhythm; perfect balance can cost energy. Name the trade-off you're making.
  • Audit order for a screen that "feels off": alignment → spacing consistency → contrast budget (how many things compete) → balance → rhythm. The early items are mechanical and fix most cases (see the layout-smells checklist in Layout, Spacing & Grids).
  • These principles predate screens; their UI-era expressions are the files cross-referenced above. When a claim here has experimental backing, it lives in those files — this page is the compositional vocabulary that ties them together.

Sources

  • Arnheim, R. (1954; new version 1974). Art and Visual Perception: A Psychology of the Creative Eye. University of California Press — visual weight, balance, movement.
  • Dondis, D. A. (1973). A Primer of Visual Literacy. MIT Press — contrast, harmony, and the compositional vocabulary.
  • Lidwell, W., Holden, K. & Butler, J. (2010). Universal Principles of Design (2nd ed.). Rockport — alignment, consistency, emphasis, golden-ratio entries with their evidence status.
  • White, A. W. (2011). The Elements of Graphic Design (2nd ed.). Allworth — white space as the primary element.
  • Markowsky, G. (1992). "Misconceptions about the Golden Ratio." The College Mathematics Journal, 23(1) — the evidence review.
  • Itten, J. & the Bauhaus Vorkurs tradition (see Art & Design Movements (c. 1840) — the pedagogy these principles descend from.
↑↓ to navigate · Enter to open · Esc to close