Visual Design Principles for Product Teams: A Check for Each One

Visual design principles are the rules that decide how a screen gets read before anyone reads it: what is seen first and what belongs together. The usual list is hierarchy, contrast, proximity, alignment, repetition, scale, and whitespace. Most teams can recite some version of it.

Reciting it doesn't help much in a design review. "The hierarchy feels off" is an opinion wearing a principle's name, and the reply ("it feels fine to me") is the same opinion pointed the other way. The meeting then gets settled by whoever is most senior or most stubborn.

Below, each of the visual design principles gets a check you can run on a screenshot in under a minute, with no design tool open. For the history and the full vocabulary behind the list, see the principles of design, explained.

What are visual design principles?

They describe how the visual system groups and ranks what it sees on a surface. The elements of design are the raw material (line, shape, color, type, space). The principles are claims about how arranging those elements changes what a viewer notices and in what order.

For product work, seven of them carry nearly all the weight. NN/g's own short list covers scale, hierarchy, balance, contrast, and Gestalt grouping (NN/g — 5 Principles of Visual Design in UX). The version below splits grouping into proximity and repetition, because those two break most often in interfaces, and adds alignment and whitespace, which a layout grid and a density mode each depend on.

Seven visual design principles, each with a check

Hierarchy

Check: blur the screenshot until no text is readable (a 6–8px Gaussian blur works), or squint at it from across the room. Write down the first three things your eye lands on, in order. Then write down the three things the screen exists to get done. If the lists don't match, the hierarchy is wrong, whoever feels fine about it.

This is the principle the other six serve, which is why it has its own topic hub. A page with good contrast and tidy alignment can still rank the wrong thing first.

Contrast: can the difference be seen at all?

Check: convert the screenshot to grayscale. Anything that relied on hue alone to stand out (a red error, a green "active" pill) now has to stand out by lightness, and often doesn't. Then run the text through a contrast checker. WCAG 2.2 AA asks for 4.5:1 for body text, 3:1 for large text (W3C — Understanding Contrast (Minimum)), and a separate criterion asks for 3:1 on the boundaries of controls like inputs and buttons (W3C — Understanding Non-text Contrast).

In product teams the usual failure is placeholder text and disabled states, which get designed pale on purpose and then drift below the line. For choosing the colors in the first place, color theory for UI designers covers the palette side.

Proximity

Check: measure the gap between items inside a group and the gap between groups. The gap between groups should be clearly larger, roughly twice the inner gap or more. When a label sits 12px below one field and 12px above the next, nobody can tell which field it belongs to, and forms are where this happens most.

Proximity is the most practical of the Gestalt laws of grouping, and it's the one spacing tokens are supposed to enforce. A token scale (4, 8, 12, 16, 24, 32) doesn't enforce it by itself. Someone still has to pick the larger step for the outer gap.

Alignment

Check: draw vertical lines at every left edge on the screen and count them. A settings page usually needs two or three. If you count nine, the eye is restarting its scan on every row, and the page reads as busier than its content is.

Center alignment causes most of this in product UI. It works for a single heading over a single action. It stops working as soon as there are two or more lines of different lengths, since the ragged left edge gives the eye nowhere to return to.

Repetition: does the same thing look the same everywhere?

Check: screenshot every button, or every card, or every empty state across the product and put them on one canvas. Count the variants. Then ask of each variant whether it means something different or just got built on a different day.

Repetition is how a user learns the interface once and reuses what they learned. The consistency heuristic makes the same point from the usability side (NN/g — Consistency and Standards). A product with five slightly different primary buttons makes the user learn the same control five times.

Scale

Check: list every font size on the screen. A working type ramp in a product rarely needs more than five or six steps: display, page title, section title, body, small, and maybe a label size. If the screen has eleven sizes, some are within a pixel or two of each other, and those neighbors are too close for anyone to see a difference in rank.

Size is the bluntest ranking tool there is, so it's the first one teams reach for. The fix for a flat page is often to remove sizes, so the gaps between the remaining ones become visible. Choosing fonts goes further into building the ramp.

Whitespace: is the density right for the task?

Check: say out loud what the user is doing on this screen. Scanning a table of 200 transactions and reading a single onboarding step need different densities. Marketing-page habits leak into product screens here. A data table padded like a landing page forces scrolling to compare rows that should sit side by side. An onboarding step packed like a dashboard buries its one decision.

Where product screens stretch the principles

The textbook examples are posters and landing pages: fixed content, one state, one width. Product screens have none of those luxuries, and each gap is a place the principles need an extra check.

• Real data. A layout reviewed with "Jane Doe" and "$1,200" is untested. Run the hierarchy check again with a 40-character name, a seven-figure amount, and an empty value.
• States. Loading, empty, error, partial, and disabled are all screens. A hierarchy that works when the table is full may put the empty state's one useful button below a large illustration.
• Localization. German strings run roughly a third longer than English ones. Alignment and proximity that hold at one length can collapse at the other.
• Themes. A dark theme needs its own contrast audit. Shadows stop separating surfaces, and borders that were decorative become the only thing showing where a card ends.
• Density modes. If the product offers compact and comfortable views, the whitespace check runs twice.

Using visual design principles in a design review

The checks above work best as a short protocol a team agrees on in advance:

1. Name the principle. "Proximity" rather than "it feels cluttered."
2. Run the check. Blur, grayscale, measure the gaps, count the edges or sizes or variants. It takes a minute and can be done on a shared screenshot.
3. State the finding as a fact about the screen. "The helper text is 8px from the field below and 8px from the field above, so it groups with neither."
4. Propose the smallest fix that changes the finding. A spacing step, a removed size, or one less variant.

Two limits are worth knowing. The checks catch failures of perception; they can't tell you whether the thing ranked first is the right thing to rank first, which is a product decision. And they don't replace watching a real user try the screen.

Frequently asked questions

What are the 7 principles of visual design?

Lists vary. For product interfaces the most useful seven are hierarchy, contrast, proximity, alignment, repetition, scale, and whitespace. Other lists include balance, rhythm, movement, emphasis, and unity, which come from graphic design and matter more on posters and editorial layouts than on screens full of controls.

What is the difference between visual design and UI design?

Visual design is the layer that controls how things look and how they are perceived: color, type, spacing, imagery, hierarchy. UI design includes that layer and adds the behavior of controls, states, and interaction patterns. The user interface design principles article covers the interaction side.

Are Gestalt principles the same as visual design principles?

They overlap. Gestalt principles (proximity, similarity, closure, continuity, common region) describe how the visual system groups what it sees. Visual design principles use those grouping rules to build hierarchy and structure. Proximity and repetition in the list above are Gestalt grouping put to work.

What are the elements and principles of design?

The elements are the materials: line, shape, color, value, texture, type, and space. The principles are how those materials get arranged to guide attention. A color is an element; using it to make one button stand out is contrast.

How do you apply visual design principles to an existing product?

Start with one high-traffic screen and run the seven checks on a screenshot. Fix the findings that are cheapest to fix (spacing steps and type sizes), and then repeat the repetition check across the whole product, since that one needs every screen on one canvas.

Take it further

Hierarchy is where most of these checks end up, and the visual hierarchy hub collects our other writing on it. The seven checks here are a subset of the perception layer in the UX Clarity framework, which we use to score screens in a Full UX Audit.

Sources: NN/g — 5 Principles of Visual Design in UX · W3C — Understanding Contrast (Minimum) · W3C — Understanding Non-text Contrast · NN/g — Consistency and Standards.