Design Principles & Laws

Design principles describe how visual arrangement directs attention. Contrast, hierarchy, proximity, alignment, repetition, balance, white space. In a gallery they're aesthetic vocabulary. In an interface they're predictions: this is where the eye lands first, these two things will be read as related, this button will be found before that one.

Layered on top of them is a second set, usually called the laws of UX — Fitts, Hick, Jakob, Miller — which are empirical claims about behavior rather than rules about composition. This page covers both, where they conflict, and how to use them in a review without turning it into a trivia contest.

The principles, stated as predictions

Restating each principle as a prediction makes it testable, which is the only form in which it's worth anything.

• Contrast — the element with the most contrast against its surroundings is seen first. Every additional high-contrast element divides that attention.
• Proximity — things placed close together will be understood as related, whatever the labels say.
• Alignment — a shared edge implies a shared category. Breaking alignment signals a change of kind, so breaking it accidentally signals one that isn't there.
• Repetition — a pattern used twice sets an expectation. The third instance is read as the same kind of thing before it's read at all.
• Hierarchy — users don't read a screen, they scan it in the order the design ranks it. If nothing is ranked, they impose their own order and it won't be yours.
• White space — separation is a signal, not leftover room. Compressing it compresses the distinctions it was carrying.

Visual hierarchy covers the ranking mechanics in depth, including the contrast and color tooling that makes them checkable.

Where the principles fight each other

A principle applied everywhere stops being a signal. That's not a caveat, it's the central working constraint.

Maximum contrast on every element leaves nothing emphasized. Perfect consistency across every control removes the deviation that a destructive action needs in order to feel different from a safe one. Generous white space everywhere pushes content below the fold and costs you the scan you were designing for.

So the real question in a review is never "is this principle satisfied?" It's "which principle should yield here, and does the design know it's yielding?" Deliberate violation reads as emphasis. Accidental violation reads as noise, and the user can't tell you which one they're looking at.

The laws built on top

The named laws make sharper predictions and carry more baggage.

• Fitts's law — time to hit a target falls with size and rises with distance. This is why the primary action is large and near where the eye already is, and why a 20-pixel close button next to a destructive one is a defect rather than a style.
• Hick's law — decision time grows with the number of options. Relevant to menus and plan tables, frequently over-applied as a blanket argument for fewer features.
• Jakob's law — people spend most of their time on other products, so they expect yours to work like those. The strongest argument against novel navigation.
• Miller's law — often quoted as "seven plus or minus two" and usually misapplied. It concerns short-term recall of unrelated items, not how many nav links a page may have.

User interface design principles and patterns covers how these translate into the concrete component decisions.

Using them without producing noise

An expert review that lists every deviation from every principle generates a backlog nobody works through. The discipline is subtraction:

1. Name the task. What is this screen asking the user to accomplish?
2. Find what's between them and it. Which violations actually cost them time, attention, or a mistake?
3. Rank by cost, not by count. Two violations that block the task outrank fifteen that offend the eye.
4. Check the deliberate ones. Some violations are the design working. Separate those before writing anything up.

This is the same discipline a scored UX audit applies, and the reason a rubric beats a checklist: a number per axis forces the ranking that a list of findings lets you avoid.

A principles checklist for a screen

• Is there exactly one element with clear first-look priority?
• Do proximity and grouping match the actual relationships, not the layout grid?
• Does anything break alignment without meaning to?
• Are destructive and primary actions distinguishable by more than color?
• For every violation you found, can you say what it costs the user?

Related reading: color theory for UI designers on building contrast that survives a theme switch, choosing fonts on type as a hierarchy lever, and the UX Clarity framework for scoring what you find.

Get a scored, prioritized review of your interface →