Visual Design Fundamentals

UI/UX Design Principles

Chapter 5 · Visual Design Fundamentals

Chapter 4 covered the cognitive resources every interaction spends. This chapter is about the concrete visual choices that either spend that resource wastefully (extraneous load) or spend it well — how grouping, contrast, alignment, and hierarchy let a person understand a screen at a glance rather than having to work it out.

Gestalt Principles: How the Brain Groups What It Sees

Gestalt psychology — founded in the early 20th century by Max Wertheimer, alongside Wolfgang Köhler and Kurt Koffka, with Wertheimer's real 1912 publication on the "phi phenomenon" marking its formal start — studies how the mind organizes visual elements into a coherent whole, rather than perceiving them as separate, disconnected pieces. Five of its real principles are directly, constantly at work in UI design:

Proximity

Elements placed close together are perceived as one group — the real reason related form fields need real, deliberate spacing.

Similarity

Elements sharing shape, color, or size are perceived as related — the real reason every primary button on a site should look the same.

Closure

The mind perceives an incomplete shape as whole — the real reason a partial icon or outline still reads clearly.

Continuity

Elements aligned along a line or curve are perceived as connected — the real reason a straight edge of aligned text feels orderly.

Figure-Ground

The eye separates a foreground "figure" from its background — the real reason a modal needs real visual separation from the page behind it.

Contrast, Repetition, Alignment, Proximity

Designer Robin Williams' own influential book, The Non-Designer's Design Book (1994), distilled visual design down to four real, practical principles — often remembered by the acronym CRAP (or reordered as CARP):

Principle	What it means	What happens without it
Contrast	Make genuinely different elements look genuinely different — size, weight, color	Everything looks equally important, so nothing actually stands out
Repetition	Repeat visual choices consistently across a design — same button style, same spacing rhythm	A product feels disjointed, like several different designs stitched together
Alignment	Every element lines up with something else on the page, not placed arbitrarily	A page feels visually messy even if the content itself is fine
Proximity	Group related items close together, separate unrelated ones — the same Gestalt principle above, applied deliberately	Users can't tell which label belongs to which field

Where "Hierarchy" Fits

Visual hierarchy — the sense of what to look at first, second, third — isn't a fifth, separate principle. It's what genuinely applying contrast, repetition, alignment, and proximity together actually produces. A page with strong contrast on its heading, consistent repetition of its own patterns, clean alignment, and correct proximity grouping will already read with a clear hierarchy, without anything extra being added.

Visual Hierarchy in Practice: The Real F-Pattern

Nielsen Norman Group's real 2006 eye-tracking study, covering 232 users across thousands of web pages, found a consistent scanning shape resembling the letter F: a horizontal scan across the top of the content, a second, usually shorter horizontal scan further down, then a vertical scan down the left edge. A real follow-up study 11 years later, in 2017, confirmed the same pattern still held.

The Real, Direct Design Implication

Because users scan rather than read every word, the words genuinely most likely to be seen are the ones at the start of a heading, subheading, or bullet point, and the content in the first couple of paragraphs. Front-loading the most important word or phrase in a heading (rather than burying it at the end of a longer sentence) is a real, direct, evidence-backed design decision — not a stylistic preference.

Hands-On Exercises

Exercise 1

A form places a field's label 40 pixels above the input box, but the next field's label sits only 8 pixels below that same input box. Explain, in your own words, which Gestalt principle is being violated here, and what a user is likely to misunderstand as a result.

📄 View solution

Exercise 2

A page uses five different button styles across its various screens, each with different colors, corner radii, and sizes for what is functionally the same "primary action" button. Explain, in your own words, which of the four CRAP/CARP principles is missing here, and the real consequence for the user.

📄 View solution

Exercise 3

A team writes a page heading as "Learn About Our Company's 20-Year History and Mission" and wants it to be quickly understood by someone scanning the page rather than reading closely. Using the real F-pattern finding, explain, in your own words, what's wrong with this heading's own word order, and how you'd rewrite it.

📄 View solution

Chapter 5 Quick Reference

Gestalt principles (Wertheimer, Köhler, Koffka, from 1912): proximity, similarity, closure, continuity, figure-ground — how the mind groups visual elements
CRAP/CARP (Robin Williams, 1994): Contrast, Repetition, Alignment, Proximity — four practical principles that, applied together, produce visual hierarchy
Visual hierarchy isn't a separate, fifth principle — it's the real result of applying the other four well
Real, confirmed finding (NN/g, 2006, reconfirmed 2017): users scan pages in an F-shaped pattern — front-load important words in headings and bullets