The Principles of Design, Explained: What Each One Claims About Your Reader's Eye

Gitte Lindgaard's group showed people web pages for 50 milliseconds, a twentieth of a second, less time than it takes to read one word, and asked them to rate visual appeal. The ratings held up against ratings the same people gave after a far longer look (Lindgaard et al., 2006). Whatever gets decided in that window is largely the decision.

Nobody read the headline in 50 milliseconds. Nobody weighed the pricing. What they responded to was arrangement: where the weight sat, what stood apart from what, where the page told the eye to land. That arrangement has a vocabulary, and it is about a century old.

Which is why the standard framing wastes it. The principles of design describe what a viewer's visual system settles before conscious thought arrives. That makes them claims, and a claim can be checked. It is the difference between a design critique that changes the file and one that gets filed under taste.

Elements and principles of design: the distinction that makes the list usable

Every art foundations course teaches the elements and principles of design together, and most people leave with them blurred into one long list of words. They do different jobs.

The elements are what you place. Line, shape, form, space, colour, value, texture, and in product work, type. They are nouns. You can point at one.

The principles are what you do with the relationships between them. Balance, contrast, emphasis, movement, repetition, rhythm, unity. Each is only visible as a relationship: two things, and the way one answers the other.

That is also why the list never comes out the same length twice. Some sources teach seven principles of design, some eight, some twelve, folding in proportion, scale, variety, hierarchy, white space. The variance is the tell. The list is a teaching device for a smaller set of perceptual facts, and treating any particular count as canonical will cost you an hour of the wrong argument.

What is stable underneath: your visual system groups, weighs, and ranks a scene automatically, in parallel, before you decide to look at anything. The principles are names for aiming that process instead of leaving it to chance.

The principles of design, and what each one is actually claiming

Each has a classroom definition, an underlying perceptual claim, and a specific failure it produces in shipped software. The failure is the useful part. It is what makes the principle diagnosable.

Balance

Classroom: visual weight is distributed so the composition does not tip. Symmetrical, asymmetrical, or radial.

The claim: the eye assigns weight to regions of a layout, drawing on size, darkness, saturation, density, and isolation. An unresolved imbalance registers as low-grade tension the viewer will attribute to something else, usually to your product.

How it fails in software: a dashboard where one card carries a dense table and its neighbour carries a single number, so the page leans left and every scan starts in the wrong place. Or the asymmetric hero that balances beautifully against a photo, loses the photo on mobile, and tips over with nothing holding the other side.

Contrast

Classroom: difference in value, colour, size, weight, or direction, used to separate things.

The claim: difference is what makes an element pre-attentive. A control that differs from its surroundings on one strong dimension is found without search. A control that differs on four weak dimensions is not found faster, it is found slower, because nothing wins.

How it fails in software: the secondary button restyled until it reads as primary, so the page has two primary actions and therefore none. Contrast is also the one principle with a legal floor. Colour contrast ratios are the enforceable end of an otherwise aesthetic idea, and the only one you can fail an audit on.

Emphasis

Emphasis is subtraction. You do not add it to an element, you take it from everything else on the page, because attention is zero-sum and the page has a fixed budget of it.

This is the most violated principle in product design, and the cause is organisational. Emphasis gets requested per-feature by people who each own one feature, and every individual request is reasonable. The settings page where eleven things are bold was not designed that way. It accumulated, one reasonable request at a time, until the screen reverted to reading order and the hierarchy went back to being whatever the DOM happened to be. Emphasis granted to everyone is emphasis granted to no one.

Movement

Classroom: the composition directs the eye along a path.

The claim: gaze follows a predictable sequence shaped by weight, alignment, implied lines, faces, and the reading direction of the script. You do not control the path, but you bias it strongly. When nothing in the layout is steering, the eye falls back to the F-shaped scanning pattern.

How it fails in software: an onboarding screen whose intended path is illustration, headline, button, but whose actual path is headline, illustration, dead end, because the illustration is the heaviest object on the page and it points off-canvas.

Repetition and pattern

Classroom: elements recur, establishing a visual system.

The claim: the eye learns a rule from two or three instances and then applies it everywhere, including where you did not intend it. Repetition is how a design becomes legible without instruction, and how a single inconsistency becomes loud.

How it fails in software: the fourteenth card in a grid with a slightly different corner radius. Nobody names it; everybody registers it. Repetition is also the mechanism behind consistency and standards as a usability heuristic. The pattern is the promise, so breaking it in one place makes users doubt it everywhere.

Rhythm

Repetition with variation, producing pace. Interval is a grouping signal: regular intervals read as one continuous set, interrupted intervals read as sections.

Which is why a long form with uniform 16px gaps between every field arrives as one undifferentiated wall. The fix is not fewer fields, it is rhythm. Larger gaps at the section seams turn one wall into four short ones, and the form starts to look finishable.

Unity

Classroom: the parts read as belonging to one thing.

The claim: coherence is itself information. A viewer treats a visually unified set as one system with one author and one set of rules, and a fragmented one as an assemblage to be evaluated piece by piece.

How it fails in software: the acquired feature. Three years in, a product has a settings area from 2023, a billing flow inherited in an acquisition, and an AI panel from last quarter, each internally coherent and none of them speaking to the others. Users do not read that as a rich history. They read it as a company without its act together, and they extend the judgment to the parts they cannot inspect, like your security.

Gestalt is the layer underneath the principles of design

The principles are the working vocabulary. The Gestalt grouping laws, from Berlin psychology in the 1920s, are the mechanism they run on: the rules by which a visual field gets carved into objects before you have any say in it.

• Proximity. Things placed near each other are read as one group, and proximity beats almost every other signal you can apply. A label sitting closer to the field below it than the field above it belongs to the wrong field, whatever your colour coding says (NN/g).
• Similarity. Things sharing a visual property are read as the same kind of thing, which is why styling a non-interactive badge like a chip creates a control users will click at (NN/g).
• Closure and continuity. The eye completes interrupted shapes and follows the smoothest path. That is what makes a carousel's half-visible fourth card an affordance and a hard-cropped one a dead end.
• Common region. A shared enclosure groups things more strongly than proximity does. This is the entire argument for the card as a UI unit.
• Common fate. Things that move together belong together, the one grouping law a static poster cannot use and a product can.

Read this way the relationship is clean. Gestalt describes what the visual system does. The principles of design describe what you do about it.

Hierarchy is the principle the others are serving

If you keep one idea from the whole list, keep this one. Balance, contrast, emphasis, movement, repetition, rhythm, and unity are seven levers, and in interface work almost all of them get pulled in service of one outcome: the viewer should be able to rank the things on this screen without effort, and their ranking should match yours.

That is visual hierarchy, and it is the only one of these you can test for the price of a coffee. Show a screen for five seconds, take it away, ask what the page was for and what they would do first. If the answers cluster and match your intent, the principles are working. If the answers scatter, you have a hierarchy problem that polish will not fix, because polish operates on the elements and the problem lives in the relationships.

Principles of graphic design vs principles of UI design

The list came from static composition: posters, spreads, canvases. It transfers to screens, but three properties of software quietly break its assumptions.

A poster is composed once. A screen is composed once per state. Your balance was designed against realistic content, so now render it empty, with one item, with 400 items, with a 60-character name, mid-load, and in an error state. A composition that only holds in the demo state was lucky.

A poster has one size, a screen has a range, and asymmetric balance built on a two-column relationship means nothing at 375px where both columns are stacked and the relationship is gone. Every breakpoint is a new composition that inherits your intent but not your solution.

The real divergence is the third. Static composition optimises the experience of viewing; interface composition optimises the odds of a correct action. When those conflict, and they conflict most often around emphasis, the action wins. A slightly less elegant page where people find the right control beats a beautiful one where they hesitate, every time. Worth saying out loud in the review where someone argues the reverse.

Where the principles of design will mislead you

Three failure modes, all common in teams that have just learned the vocabulary.

Beauty masks usability problems, including from you. Tractinsky's replication of Kurosu and Kashimura found perceived aesthetics correlated strongly with perceived usability, for interfaces whose measured usability was unchanged (Tractinsky, Katz & Ikar, 2000). Later work found first impressions of aesthetics are predictable from visual complexity and colourfulness alone (Reinecke et al., 2013). So the aesthetic-usability effect buys real goodwill in testing, and buys it by suppressing the reports you needed. A well-composed prototype gets forgiving participants. Plan for that when you read the transcript.

The list becomes a scoring rubric. Once a team can name seven principles, design reviews turn into a checklist walk, and a screen that scores well on all seven can still be the wrong screen. These principles judge composition, and composition sits downstream of whether the page is about the right thing at all. Nothing here catches a page that balances, contrasts, and emphasises its way to the wrong call to action.

Familiar composition reads as correct composition. A layout resembling the reference designs you have been looking at all week feels resolved, and that feeling is the representativeness heuristic rather than your judgement. It pairs badly with confirmation bias in a review: the layout looks like a good layout, so the critique goes hunting for reasons it is one.

A ten-minute pass on a screen you already shipped

A sequence, ordered the way these failures usually surface.

1. Squint at it. Blur the screen until type is unreadable. What survives is your actual hierarchy. More than three regions surviving with equal weight means emphasis is spread too thin.
2. Name the intended first action, then ask someone. Five seconds, screen away, "what would you do first?" A mismatch means the composition is arguing for something you did not intend.
3. Check proximity against meaning. For every label, caption, and helper text: is it nearer the thing it describes than to anything else? This finds more real bugs than any other single check on the list.
4. Count the emphatic elements. Anything bold, coloured, badged, or boxed. Above three and you are rationing nothing.
5. Break the content. Empty state and the longest realistic string you will ever be handed. Then the slowest network you claim to support.
6. Find the one inconsistency. There is always one, usually a radius. Repetition makes it louder than its size suggests.
7. Ask what the screen is for. Last, deliberately. If the answer comes out fuzzy, stop working on the composition. The problem is a layer above it.

Frequently asked questions

What are the 7 principles of design?

Balance, contrast, emphasis, movement, repetition (or pattern), rhythm, and unity. Other sources teach eight or twelve by adding proportion, scale, variety, white space, or hierarchy. There is no canonical list.

What is the difference between the elements and the principles of design?

Elements are the things you place: line, shape, form, space, colour, value, texture, type. Principles are what you do with the relationships between them.

Are the principles of design the same in art and in UI design?

Same principles, different constraints. A canvas is composed once, at one size, to be looked at. An interface is composed for every state, across a size range, to be acted on, which means it answers to a success criterion a painting never has to satisfy.

How do the Gestalt principles relate to the principles of design?

Gestalt is the mechanism, the principles are the intervention.

Which principle of design matters most?

In interface work, emphasis, because it is zero-sum and therefore the first thing organisational pressure destroys. The others degrade gracefully. Emphasis collapses.

Do the principles of design apply to UX, or only to visual design?

They apply wherever a person has to parse something, which covers most of UX. Rhythm governs how a multi-step flow is chunked. Unity governs whether an acquired feature reads as part of the product. Repetition is what turns a pattern library into a promise. What they will not tell you is what the product should do. That comes from research, and the principles arrange the answer once you have it.

What is the difference between a principle of design and a design law?

A principle is a compositional guideline derived from practice. A law, in the Fitts's or Hick's or Miller's sense, is an empirical regularity with a measurable form, usually a curve you can fit to data. Both are useful and neither is a rule. The practical difference is that a law tells you how much, and a principle only tells you which way.

Take it further

The principles of design describe how a screen is composed. Whether the composition is pointed at the right thing is a separate question, and it is the one that decides whether the work mattered. For the patterns these principles cash out into, read user interface design principles and patterns. For the two elements carrying the most compositional load, colour theory for UI designers and choosing fonts. The wider design principles hub collects the laws and biases sitting alongside this list, and the UX Clarity framework is how we score an existing interface against where users lose the thread, run end to end in a Full UX Audit.

Sources: NN/g — Principles of Visual Design · NN/g — Visual Hierarchy · NN/g — Gestalt Principle of Proximity · NN/g — Gestalt Principle of Similarity · NN/g — Aesthetic-Usability Effect · NN/g — Consistency and Standards · Lindgaard et al., 2006 — Attention web designers: You have 50 milliseconds to make a good first impression!, Behaviour & Information Technology · Tractinsky, Katz & Ikar, 2000 — What is beautiful is usable, Interacting with Computers · Reinecke et al., 2013 — Predicting users' first impressions of website aesthetics, CHI '13.

Got a screen where the composition is fine and the hierarchy still fights you? Apply for a Full UX Audit →