The 10 Principles of Visual Design (With Examples)

In the first few seconds of a screen, people decide what matters and whether to keep going. Visual design principles are the rules that make that decision intentional: what reads first, what groups together, and what feels calm instead of crowded.

This guide keeps a practical set of ten principles, but treats each as something you can apply on a real UI. For every principle you get a short definition, a concrete layout example, a common failure mode, and a fix to try next. Below that: how the set maps to NN/g and Gestalt, a bridging module on alignment, proximity, and scale, and a 10-minute critique checklist you can run on one mock today.

These ideas echo what the Nielsen Norman Group and the Interaction Design Foundation teach: visual design is strategic, not decorative. Every choice should improve both usability and aesthetic clarity. Throughout, ADPList mentor Emmanuel Olotu adds perspective from quotes already on this page.

The 10 principles of visual design

1. Color
2. Contrast
3. Hierarchy
4. Repetition
5. Typography
6. Space
7. White space
8. Balance
9. Emphasis
10. Movement

Then jump to: How these 10 map to NN/g / Gestalt · Alignment, proximity, and scale · 10-minute critique checklist · FAQ

Visual design principles are the rules for arranging visual elements so a viewer knows what matters first and the composition feels intentional. A practical teaching set is color, contrast, hierarchy, repetition, typography, space, white space, balance, emphasis, and movement. That set overlaps with NN/g's focus on scale, hierarchy, balance, contrast, and Gestalt grouping. To apply them: pick the job of the screen (what should be noticed first), check contrast and hierarchy, then audit spacing, emphasis, and eye path. Principles are not decoration rules; they are how usability and aesthetic clarity show up in the first few seconds.

1. Color

Definition

Color sets mood, carries meaning, and draws attention before a single word is read. Blue often reads as calm, red as urgency or boldness, yellow as energy, but culture and product context change those readings, so research your audience before locking a palette.

UI / layout example

A settings screen for a billing product: a primary "Save changes" button uses the brand blue token (--color-primary). A "Delete payment method" action uses a danger red token (--color-danger) with a quiet secondary ghost style until hover/focus. Status chips reuse the same tokens (success green, warning amber) so meaning stays consistent across the app, not reinvented per screen.

Common failure

Using red for both errors and decorative accents, or inventing a one-off "almost primary" blue that breaks token consistency.

Fix next

Map primary, secondary, and danger to named tokens. Run the palette past audience and culture notes, then start with our guide on selecting colors and fonts for your website if you need a practical pairing pass.

2. Contrast

Definition

Contrast is the juxtaposition of visually different elements (size, color, shape, or weight) so viewers can tell them apart instantly. It highlights what matters and keeps text legible.

UI / layout example

A pricing card: plan name at 28px/semibold on near-black (#111) over white; feature list at 16px/regular in dark gray (#333); muted "Billed annually" caption at 13px in mid gray that still clears WCAG. The CTA uses a filled primary with white label (high contrast). Beyond color, the title's weight and size contrast against the body so hierarchy holds even in grayscale.

Common failure

Light gray text on a tinted background that "looks fine" on a calibrated monitor but fails WCAG, or relying on color alone to separate states.

Fix next

Check normal text against WebAIM's contrast checker; WCAG recommends at least a 4.5:1 ratio for normal text. Also test size/weight contrast with color removed. Emmanuel's note from the live page still holds: colors and shades must be contrasted properly to enhance visibility and legibility.

3. Hierarchy

Definition

Visual hierarchy is the arrangement of elements in order of importance, so viewers know what to look at first, second, and third. Designers build it with size, weight, color, spacing, repetition, and alignment.

UI / layout example

An onboarding hero: H1 at 40px/bold ("Ship your first portfolio case study"), supporting line at 18px/regular, primary CTA at strong weight, secondary "Watch a sample review" as a text link. Below the fold, three benefit cards share a smaller type scale (20px titles / 15px body / 12px captions) so they never compete with the hero.

Common failure

Three elements fighting for "first": oversized badge, loud illustration, and a bold headline all at similar visual weight.

Fix next

Write the reading order in plain language (1 → 2 → 3), then match type scale to that order. Demote everything else.

"You can see it as the correct ranking of information in a design. This can also be achieved in a number of ways, but we will consider how to achieve it with the size and the weight of the elements." - Emmanuel Olotu

4. Repetition

Definition

Repetition is the reuse of the same colors, shapes, fonts, or patterns so a design feels unified and recognizable. It is how brands and design systems become familiar at a glance.

UI / layout example

A component library in use: every primary button shares radius, padding, and type; cards share the same shadow and 16px padding; section titles always sit 32px above content. The brand mark appears in the same corner of marketing pages. Users learn the pattern once and stop re-parsing every screen.

Common failure

A new corner radius or one-off button style on each feature page, so the product feels like five different apps.

Fix next

Pick three things to repeat on purpose (button, card, title style) and ban one-off variants unless there is a documented state reason. Emmanuel's live note still applies: repetition might be brand-icon placement, font usage, or overall design tone.

5. Typography

Definition

Typography is the style and arrangement of type (typeface, size, weight, and spacing) that gives words a visual voice before anyone finishes reading.

UI / layout example

A documentation article layout: Inter (or system UI sans) for UI chrome; a readable serif or humanist sans for long-form body at 18-20px with ~60-75 characters per line; H2s at 1.5-1.75× body size; generous line-height (~1.5) for body, tighter for headings. Pairing stays at two families max.

Common failure

Body set at 14px with 100+ characters per line, or five typefaces fighting in one mock.

Fix next

Cap pairings at two families, set body near 16-18px for UI readability, and keep line length in the 60-75 character band. If type is the craft you want to sharpen, get a one-on-one critique from a UI design mentor or UX design mentor.

6. Space

Definition

Space is the area between and around elements, used to show relationships. In practice this is Gestalt proximity: elements placed close together are perceived as related; larger gaps separate groups. Positive space is the content itself; the gaps carry meaning too.

UI / layout example

A settings list with three groups: Account, Notifications, Billing. Rows inside a group sit 8px apart; groups are separated by 24px plus a subtle divider. The "Email me about product updates" toggle sits in Notifications, not floating near Billing, because proximity tells the story before the labels finish.

Common failure

Equal gaps everywhere, so unrelated controls look like one blob, or a label sits closer to the wrong field.

Fix next

Group by meaning first. Tighten within a group, widen between groups. If two things are not related, do not let them share a tight gap.

How this differs from white space: Space (here) is about proximity and grouping. White space (next) is about breathing room and emphasis through emptiness.

7. White space

Definition

White space is the deliberately empty area that lets a layout breathe and makes hierarchy visible. It does not have to be white. Emptiness is a tool for emphasis and clarity, not leftover canvas.

UI / layout example

A feature launch hero: headline, one short subcopy, one CTA, and generous empty margin on the sides and below the CTA before the next section. The empty band frames the message so the eye rests; a crowded competitor page with five badges, a carousel, and mini-forms in the same fold loses the point.

Common failure

Filling every gap with badges, stock photos, or extra CTAs "so it doesn't look empty," which flattens emphasis.

Fix next

Remove one decorative block from the fold and increase margin around the primary message. Check whether hierarchy got clearer without adding ink.

"This is useful in helping your design breathe, appear non congested. It can also prove to be very useful when developing brand identities as it help you carve out special meanings to your identity icon." - Emmanuel Olotu

8. Balance

Definition

Balance is the distribution of visual weight so no region accidentally overpowers the rest. It can be symmetrical (mirrored weight) or asymmetrical (one heavy element offset by several lighter ones).

UI / layout example

A product analytics dashboard: a large chart card on the left (heavy) balanced by a stack of three compact KPI cards on the right (together matching the chart's weight). Symmetrical alternative: a marketing split with equal columns of illustration and copy. Asymmetry often feels more dynamic for product UI; symmetry suits formal or calm marketing moments.

Common failure

All weight piled in the top-left with a sparse, abandoned right rail, or every card the same size so nothing leads.

Fix next

Squint or blur the screen. If one corner dominates for no content reason, redistribute size, color density, or add a lighter counterweight group.

9. Emphasis

Definition

Emphasis makes the single most important element unmistakable, using color, scale, position, or isolation so the focal point is obvious.

UI / layout example

A checkout footer: one filled primary "Pay $49" button; "Add promo code" as a quiet text control; legal links in small muted type. Only one element wears the loudest color and size. Supporting actions stay visually secondary on purpose.

Common failure

Two filled primaries ("Pay" and "Save for later") plus a bright promo banner, so the eye has no single job.

Fix next

Name the one action that must win. Demote every other control one step (outline, ghost, or text). Before designing, decide what portrays the main message and where it sits.

10. Movement

Definition

Movement is the path the viewer's eye travels through a composition. Choreograph it and the screen reads as one story instead of scattered pieces.

UI / layout example

A landing fold laid out on a soft Z-pattern: logo top-left → nav top-right → headline and supporting line mid-left → primary CTA mid-right → trust row along the bottom. A settings or content-heavy page often follows an F-pattern: strong left-aligned titles and scanning along horizontal bands. If you add motion (a subtle CTA pulse or enter animation), keep it purposeful and respect prefers-reduced-motion so users who opt out still get a clear static path.

Common failure

Decorative animation that pulls focus off the CTA, or a layout with no clear entry point so the eye bounces randomly.

Fix next

Sketch the intended path (F or Z) on a wire. Share the mock with a few people and ask what they noticed first. Keep Fitts's law and Hick's law bookmarked on Laws of UX when interaction cost matters.

"Movement must be done in a subtle way, it is just a way of making the audience accept the design as a single piece of information, instead of considering the many elements as scattered pieces of a puzzle." - Emmanuel Olotu

How these 10 map to NN/g / Gestalt

Our ten is a teaching set for the query "visual design principles." It is not a contradiction of NN/g or Gestalt. Nielsen Norman Group often stresses scale, hierarchy, balance, contrast, and Gestalt grouping as the UX-facing core. Gestalt laws describe how people perceive wholes from parts. The table below shows the overlap.

Takeaway: Memorizing ten names is optional. Knowing which lever to pull on a broken screen is the job. When a critique says "Gestalt," they usually mean proximity, similarity, closure, or figure/ground: tools already sitting inside space, repetition, and hierarchy above. The Interaction Design Foundation keeps a full Gestalt reference if you want the deeper psychology pass.

Alignment, proximity, and scale

Competitors often list alignment, proximity, and scale as peer "principles." Here they work as operators inside hierarchy, balance, and space, not a second article's worth of twelve new rules.

• Alignment: edges share an invisible grid so the layout feels intentional. Misaligned columns read as sloppy even when colors are fine.
• Proximity: distance signals relationship (see Space).
• Scale: relative size ranks importance (see Hierarchy and Emphasis).

Worked example: one pricing card

Imagine a single pricing card you are shipping tomorrow.

1. Alignment: Price, plan name, feature list, and CTA share a left edge (or centered stack with consistent inset). The CTA width matches the card's content column, not a random center float.
2. Proximity: Plan name + price sit tight (8px) as one unit. Feature rows sit 8-12px apart as a second unit. A 24px gap separates features from the CTA so the action is its own group.
3. Scale: Price at the largest type; plan name next; features smaller; legal footnote smallest. The CTA is visually stronger than features but does not out-shout the price if price is the decision variable.

Squint test: you should read price → plan → features → CTA without hunting. If the footnote competes with the price, scale is wrong. If the CTA sits closer to the footer links than to the features, proximity is wrong. If the price hangs off the grid, alignment is wrong.

10-minute visual design critique checklist

Run this on one mock or portfolio case. Set a timer. Fix only what fails.

1. Job of the screen: In one sentence, what should someone notice first? Does the layout match that sentence?
2. Hierarchy: Clear 1 → 2 → 3 reading order? Type scale supports it?
3. Contrast: Body text ≥ 4.5:1? States readable without color alone?
4. Emphasis: Exactly one primary action or focal element?
5. Space / proximity: Related items grouped; unrelated items separated?
6. White space: Does the fold breathe, or is every gap filled?
7. Repetition: Buttons, cards, and titles reuse the same patterns?
8. Balance: Any corner overweight for no content reason?
9. Alignment / scale: Shared edges? Relative sizes match importance?
10. Movement / eye path: F or Z (or another intentional path) without random bounce? Motion respectful of reduced-motion preferences?

Soft next step: If you want a human pass on how these show up in a real case study, browse UI design mentors or UX design mentors, or book a portfolio review. For how design feedback sessions work, see design mentorship.

Keep practicing the principles

Principles stick when you apply them. Try a small craft pass next, like our walkthrough on how to make a great shadow in UI design, or explore where the craft can take you with the visual design career path.

Principles stick when someone reviews a real screen or case study (hierarchy, contrast, spacing, and type), not when you only memorize the list. If you are not sure where to find that reviewer, this comparison of mentorship platforms lays out the options side by side.

Browse UI design mentors or UX design mentors for a 1:1 critique, or book a portfolio review. For a fuller how-to on design feedback sessions, see design mentorship. You can also start from the design expertise hub.

Contributor:
Emmanuel Olotu (ADPList Mentor)
Co-Founder at Watermacks
ADPList profile: adplist.org/mentors/emmanuel-olotu
LinkedIn: linkedin.com/in/emmanuel-olotu

Editor and writer:
Farah Radzi
Content Marketer and Writer at ADPList
LinkedIn: linkedin.com/in/famr