Learn hierarchy, layout, type, colour and icons, then build and critique real screens in Figma.

Visual Design Fundamentals

Take a screenshot or photo of the design. Write one sentence: what should a viewer notice or do first?

Do the squint test: blur your eyes or step back. List the top three things you notice, in order.

Compare that list with your sentence. Note where the order is wrong or where elements compete equally.

List every element and label it 1 (primary), 2 (secondary) or 3 (everything else). Allow only one 1.

Sketch a new version. Change at least three tools: size, weight, colour, position or space. Keep one accent colour for the primary action.

Show your sketch to someone for five seconds, then hide it. Ask what it was about and what they could do next. Write down their answers.

Adjust anything they missed and save a photo of the before and after side by side.

## Why it matters

Every screen, poster or slide asks the viewer to do something: read a headline, press a button, notice a warning. People do not read a screen from top-left to bottom-right like a book. They glance, pick out one or two things that stand out, and decide in a second or two whether to keep looking. **Visual hierarchy** is the order in which the eye moves through a design. If you control it, the viewer sees the important thing first. If you do not, they see whatever happens to be biggest or brightest, which is often the wrong thing.

## The core idea

Hierarchy comes from **contrast**: an element stands out when it is different from what is around it. You have a small set of tools for creating that difference:

- **Size.** Bigger elements are seen first. A headline at twice the body size reads before the body.
- **Weight.** Bold text and thick shapes pull attention from thin ones.
- **Colour and contrast.** A saturated or dark element on a light, calm background jumps out. One bright colour on a mostly neutral screen works like a pointer.
- **Position.** In left-to-right languages, people tend to start near the top-left and scan down. Things placed high and near the start are noticed earlier.
- **Space.** An element with generous empty space around it looks more important than one crowded by neighbours.
- **Shape and imagery.** Faces, photos and unusual shapes attract the eye before text does.

The key is restraint. If everything is bold, nothing is. A good design usually has **three levels**: one primary element (the main message or action), a few secondary elements (supporting headings, key facts), and everything else as quiet tertiary content.

## A worked example

Here is the text for an event page, all at the same size and weight:

```text
Community Code Night
Thursday 14 November, 6-9 pm
Main Library, Room 2
Bring a laptop. Beginners welcome. Free pizza.
Register now
```

Everything shouts equally, so nothing reads first. Decide what the viewer must take away. For this page: **what it is** (primary), **when and where** (secondary) and **the action** (the button stands out by colour, not by size).

A better arrangement:

1. "Community Code Night" at about 2.5 times the body size, bold, at the top.
2. Date and place on two lines below, at about 1.25 times body size, regular weight, darker grey.
3. The friendly details in body text with comfortable line spacing.
4. "Register now" as a button in the page's one accent colour, with space around it.

Now a passer-by who looks for one second gets the event name. Two seconds gets the time and place. Interested people find the button without searching.

## Two quick tests

- **The squint test.** Step back from your screen or blur your eyes. The shapes that survive the blur are your top level. If the wrong thing survives, or nothing does, adjust size or contrast.
- **The five-second test.** Show the design to someone for five seconds, hide it, and ask what it was about and what they could do. If they cannot answer, the hierarchy is not doing its job.

## Hierarchy in interfaces

On app screens hierarchy also tells people what they can do. A screen should normally have **one primary action** styled as a filled button. Other actions are secondary (outlined or text buttons). If a form has two filled buttons, "Save" and "Delete", users hesitate, and some press the wrong one. Make the safe, common action primary and the rare or destructive one quieter.

Page titles, section headings and labels also form a hierarchy. In HTML this is the heading order (`h1`, then `h2`, then `h3`), which screen reader users rely on to navigate. Visual size should match that structure: an `h3` should never look bigger than the `h2` above it.

## Common mistakes

- **Too many levels.** Five font sizes and four colours create noise. Use few, clearly different steps.
- **Differences that are too small.** 16px next to 17px looks like a mistake, not hierarchy. Make steps obvious (for example, at least 1.2 times bigger).
- **Decoration that competes.** A bright illustration can steal attention from the button you actually need people to press.
- **Using colour alone.** Some people cannot tell certain colours apart. Back up colour with size, weight, position or an icon.

## Quick recap

- Visual hierarchy is the order the eye reads a design; you create it with contrast.
- Your tools are size, weight, colour, position, space and imagery.
- Aim for one primary element, a few secondary ones, and calm everything else.
- Check with the squint test and the five-second test.

## Try it

Open the **Do** tab. You will rank the elements of a real screen, redesign it on paper or in Figma, and test it on another person.


Arrange size, weight, colour and position so the most important element is seen first.

Visual hierarchy

Visual Hierarchy

Hierarchy | Basic Principles of Graphic Design [Ep. 01]

Draw or create a 360 by 640 frame. On paper, use 45 by 80 squares at one square per 8px.

Add a 4-column grid with 16px margins and 16px gutters (in Figma: select the frame, then Layout grid > Columns).

Write down your spacing scale before you start: 4, 8, 16, 24, 32, 48.

Place the card so its left and right edges sit on the margins. Give it 16px padding inside.

Place the avatar, name, title and bio, using 4px for items that belong together and 16px between groups.

Add two 48px-tall buttons side by side with an 8px gap, 24px below the bio.

Measure every gap. Change any value that is not on your scale.

Squint at the card. Check that the groups (identity, bio, actions) are visible from spacing alone.

## Why it matters

When elements line up and the gaps between them follow a pattern, a screen looks calm and trustworthy, even if the viewer cannot say why. When every gap is slightly different and edges almost-but-not-quite line up, the design feels messy. Layout is also practical: a consistent system makes decisions faster for you, and it makes the design much easier for a developer to build.

## The core idea: columns and spacing

A **layout grid** is a set of invisible guides that you place content on. Most screen grids have three parts:

- **Columns**: vertical strips that content spans. Phones commonly use 4 columns, tablets 8, desktops 12.
- **Gutters**: the gaps between columns (for example 16px on mobile, 24px on desktop).
- **Margins**: the space between the outer columns and the edge of the screen (often 16 to 24px on mobile).

A card might span all 4 columns on a phone, 4 of 8 on a tablet and 4 of 12 on a desktop. The grid does not force every element to fill a column exactly, but edges of major blocks should land on column lines.

## The 8-point spacing system

The **8-point grid** is a simple rule: every size and space is a multiple of 8 pixels. Typical spacing steps are 8, 16, 24, 32, 48 and 64. A 4px half-step is allowed for small adjustments such as the gap between an icon and its label.

Why 8? It divides evenly at the common screen densities (1x, 1.5x, 2x, 3x), it gives enough steps without too many choices, and it is widely used, so developers often already have matching spacing tokens. The exact number matters less than having a scale and sticking to it.

## A worked example: a profile card on a phone

Frame: 360 by 640 (a common small-phone size). Grid: 4 columns, 16px margins, 16px gutters.

```text
Card padding ............ 16
Avatar .................. 64 x 64
Avatar to name .......... 16
Name to job title ....... 4   (they belong together)
Title to bio ............ 16
Bio to buttons .......... 24  (a new group)
Button height ........... 48  (a comfortable tap target)
Gap between buttons ..... 8
```

Notice that the spacing tells a story. Name and job title are 4px apart because they are one unit. The buttons sit 24px below the bio because they are a separate group. Small gaps join things; large gaps separate them. That idea, **proximity**, is covered more in the next lesson.

## Whitespace is not wasted space

**Whitespace** (or negative space) is any empty area, whatever its colour. Beginners often fill every gap because empty space feels like wasted space. In practice whitespace:

- **Groups content**, as in the card above.
- **Creates focus.** An element surrounded by space looks important.
- **Improves reading.** Generous line spacing and paragraph spacing make text easier to scan.

**Micro whitespace** is the small space inside components: padding in a button, space between lines. **Macro whitespace** is the large space between sections. Both matter. A crowded button with 2px padding looks cheap even on an otherwise roomy page.

## Alignment

Pick a small number of alignment lines and use them again and again. Left-aligned text is easier to read than centred text for anything longer than a couple of lines, because each line starts in the same place. Centred layouts suit short, symmetrical content such as a title over a single button.

A simple check: draw vertical lines down the left edges of your elements. If you count more than three or four different lines on a simple screen, tidy them up.

## Responsive thinking

Screens vary in width, so layouts must adapt. Designers usually design a small and a large version and decide what changes: the number of columns content spans, which elements stack, and which spaces grow. Spacing tokens can scale too, for example 16px section gaps on mobile and 32px on desktop, while staying on the 8-point scale.

## Common mistakes

- **Random values.** Gaps of 13, 17 and 22px suggest nobody decided. Snap them to the scale.
- **Equal spacing everywhere.** If every gap is 16px, the viewer cannot tell which items belong together.
- **Ignoring the margins.** Text touching the edge of a phone screen is hard to read and looks broken.
- **Tiny tap targets.** Keep buttons and tappable rows at least about 44 to 48px tall.

## Quick recap

- A layout grid has columns, gutters and margins; big blocks line up to it.
- The 8-point system uses multiples of 8 (with 4 for fine adjustments) for every size and space.
- Small gaps group, large gaps separate. Whitespace creates focus and readability.
- Keep alignment lines few and consistent.

## Try it

Open the **Do** tab and lay out a profile card on a 4-column, 8-point grid, on graph paper or in free Figma.


Use columns, an 8-point spacing system and whitespace to lay out a clean, consistent screen.

Layout, grids, and whitespace

8 Point Grid system - Improve your UI designs (Figma file included)

White Space | Basic Principles of Graphic Design [Ep. 04]

## Why it matters

People do not see a screen as a list of separate pixels, boxes and words. The brain automatically groups what it sees into larger patterns: this label goes with that field, these three cards are a set, that row of icons is a toolbar. **Gestalt principles**, described by German psychologists in the early 20th century, explain how that grouping works. If your layout agrees with these instincts, people understand the screen without effort. If it fights them, they misread it, for example by matching a label to the wrong input.

## The core principles

### Proximity

Things that are **close together** are seen as a group. This is the strongest and cheapest grouping tool you have, because it needs nothing but space.

A form where every label sits exactly halfway between two fields is confusing: which field does "Email" belong to? Move each label 4px above its own field and 24px away from the field above, and the pairing becomes obvious.

### Similarity

Things that **look alike** (same colour, shape, size or style) are seen as related. If every link on a page is blue and underlined, a new blue underlined word will be read as a link. That is useful, and it is also a trap: if you make a plain heading blue, people will try to click it.

Similarity also lets you break a pattern on purpose. In a row of grey tags, one tag in the accent colour reads as "selected".

### Common region

Elements inside the **same boundary** (a card, a panel, a shaded background) are seen as a group, even if they are not very close. Cards on a dashboard work this way. Common region is stronger than proximity, so use it when spacing alone is not enough, but do not box everything: too many borders add clutter.

### Continuity

The eye follows **lines and curves**. Items arranged along a line, such as a horizontal row of steps or a timeline, are read as a sequence. Breadcrumbs and progress steppers use continuity.

### Closure

People **fill in missing parts** of a shape. A circle drawn with a small gap still reads as a circle. Many icons rely on closure, and so do carousels where a card peeking in from the edge hints that there is more to scroll.

### Figure and ground

The brain separates a **figure** (the thing you look at) from the **ground** (the background). A modal dialog with a dimmed backdrop uses this: the dialog becomes the figure and the page behind it becomes ground.

### Common fate

Elements that **move together** are seen as a group. When you drag a selected set of files and they all move, you understand they are one selection.

## A worked example: a settings screen

Imagine a settings screen with ten toggles listed with equal spacing. It works, but it is hard to scan. Apply the principles:

1. **Proximity**: split the toggles into three groups (Notifications, Privacy, Display) with 32px between groups and 8px within.
2. **Common region**: put each group on a lightly shaded card.
3. **Similarity**: make every toggle and every label the same style, so differences are meaningful.
4. **Hierarchy** (from lesson 1): give each group a short heading.

The same ten toggles now read as three understandable sections.

## When principles conflict

Principles can pull in different directions. If two items are close together but look different, or far apart but share a card, the viewer has to work out which signal wins. Common region usually beats proximity, and proximity usually beats similarity. The safest design makes the signals agree: related items are close, look alike and share a region.

## Common mistakes

- **Equal spacing everywhere**, so nothing groups.
- **Accidental similarity**, such as styling non-clickable text like a link or a button.
- **Boxes inside boxes inside boxes.** Common region overused becomes noise; often whitespace alone is enough.
- **Labels floating between fields.** Always place a label clearly nearer to its own control.

## Quick recap

- The brain groups what it sees automatically; Gestalt principles describe how.
- Proximity (closeness) and similarity (look-alike) are your everyday tools.
- Common region, continuity, closure, figure-ground and common fate add more ways to group.
- Make the signals agree so the grouping is unambiguous.

## Try it

This lesson is quiz only. Open the **Do** tab and test yourself on which principle explains each layout.


Group related elements with proximity, similarity, common region and continuity so screens explain themselves.

Gestalt principles

The Gestalt Principles for User Interface Design

Gestalt Principles

Make the important thing read first: hierarchy, grids, whitespace and the way people group what they see.