Visual Design Principles in Action
The five visual design principles — scale, hierarchy, balance, contrast and Gestalt — used to critique a real interface. This is the closest thing to a companion video for this lesson.
Watch on YouTube (opens in a new tab)Third-party video. It is loaded from YouTube and is not hosted by the academy.
By the end of this lesson you can
- Define contrast, balance, alignment, proximity and repetition.
- Spot violations of each principle in a real interface.
- Fix a layout by applying the principles deliberately.
The idea
Five principles explain most of what makes a layout feel organised or messy. They are simple to state and take practice to apply well.
- Contrast
- Things that are different should look clearly different. If two elements are only slightly different (two greys that are nearly the same, two font sizes 1px apart), it looks like a mistake. Make differences decisive or remove them.
- Balance
- Visual weight should feel distributed, so the screen does not seem to tip to one side. Balance can be symmetrical (centred, formal) or asymmetrical (a large image on one side balanced by a block of text and generous space on the other). Interfaces usually use asymmetrical balance.
- Alignment
- Every element should line up with something else. Shared edges create invisible lines that the eye follows. A layout with many slightly different starting points looks careless even when people cannot say why.
- Proximity
- Things that are close together are seen as related. A label should be closer to its own field than to the field above. A heading should be closer to the content it introduces than to the content before it.
- Repetition
- Repeating the same styles for the same kinds of things (all cards alike, all section headings alike) creates consistency and helps people learn the interface. Repetition is the visual basis of a design system.
These principles work together. Proximity and alignment create groups, repetition makes similar groups recognisable, contrast separates the important from the rest, and balance makes the whole screen feel stable.
Why it matters in real projects
When proximity is wrong, people attach labels to the wrong fields and fill forms incorrectly. When alignment is inconsistent, screens feel untrustworthy, which matters for payments, health and anything official. When repetition breaks, people stop recognising patterns and have to relearn each screen. These are not aesthetic details; they affect errors, speed and trust.
A realistic example
A clinic's patient registration form has labels positioned exactly halfway between fields, so "Date of birth" seems to belong equally to the field above and below. Some fields start at different left edges because they were added at different times. The "Continue" button is centred while everything else is left-aligned.
The fix uses each principle: labels move to sit 4px above their own field with 24px between field groups (proximity); every label, field and the button share one left edge (alignment); all fields use one style (repetition); the "Continue" button becomes the only filled element (contrast). In a short test, people who previously typed their phone number into the email field stop doing so.
Step by step
Draw the alignment lines
Take a screenshot and draw vertical lines at every left edge. Count them. Fewer, deliberate lines are better.
Check every gap
Is the space inside each group clearly smaller than the space between groups? A useful starting rule is that the gap between groups is at least twice the gap within them.
Look for near-misses
Find elements that are almost the same but not quite: two slightly different greys, two button heights. Make them identical or clearly different.
Check repetition
Do all items of the same type share one style? List any exceptions and decide whether they are intentional.
Check balance
Squint. Does the screen feel heavier on one side or at the top? Adjust spacing or sizes until it feels settled.
Common mistakes
Mistake Spacing everything equally.
Instead Equal spacing removes grouping. Use small gaps inside groups and larger gaps between them.
Mistake Centring some elements and left-aligning others on the same screen.
Instead Choose one alignment for each column of content. Centre only short, self-contained items such as an empty state.
Mistake Low-contrast differences that look accidental.
Instead Make differences obvious, or remove them.
Mistake Drawing boxes around everything to group it.
Instead Try spacing first. Borders add visual noise; space often groups more cleanly.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 35 min
Fix a form layout with five principles
Find a form on any website (contact, sign-up, checkout). Recreate it roughly in a design tool, then fix it using the five principles.
Steps
- Recreate the form, keeping its spacing and alignment.
- Annotate every problem, labelled with the principle it breaks.
- Fix proximity and alignment first, then repetition, then contrast.
- Check balance last.
- Put the before and after side by side with annotations.
Deliverable
An annotated before and after comparison.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Contrast: make differences decisive.
- Balance: distribute visual weight so the screen feels stable.
- Alignment: line every element up with something.
- Proximity: put related things together and unrelated things apart.
- Repetition: style the same things the same way.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- 5 Principles of Visual Design in UX (opens in a new tab)Nielsen Norman Group
- Proximity Principle in Visual Design (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.