Addaly is in open beta. Things will change, and AI answers can be wrong — check anything that matters.

Design, Before Any Software

Hierarchy, type, colour and spacing — the part of design you can do with a pencil, before any software.

Lesson 10 of 748 min

Content that attracts attention whatever you do to it

Some things are pre-emphasised

Everything in this block so far has treated attention as something you allocate through formal choices: size, value, isolation, shape. That model is incomplete, because certain kinds of content pull fixations regardless of how they are styled, and if you ignore them your carefully budgeted hierarchy gets overruled by the content itself.

This is the most common reason a layout tests badly despite being formally correct. The designer ranked the elements; the reader's visual system ranked the meanings.

Faces

Human faces attract fixations early and reliably, including faces that are small, low-contrast, partially occluded or cartoonish. Face detection appears to be a specialised and fast process, running before you have consciously identified anything. Newborns orient towards face-like arrangements of two dots above a line within days of birth, and adults will find faces in plug sockets and clouds.

Two consequences for design:

  1. You cannot out-style a face. A 60-pixel photograph of a person in the corner of a page will be looked at before a 40-pixel headline. If you want the headline first, the face has to move, shrink drastically, or be removed.
  2. Gaze direction transfers. A face looking at something pulls attention towards it. This is well-replicated: participants shown a model looking at a headline fixate the headline sooner and more often than participants shown the same model looking at the camera. A model looking straight out engages the viewer and holds them; a model looking at your product moves them along.

The practical rule is to point faces into the layout rather than out of it, and to treat any face as already occupying the top of your emphasis budget.

Numerals

A figure set as 47% is fixated where forty-seven per cent is not. Digits are visually distinct from the surrounding lowercase letters — different shapes, usually taller, often with more open counters — and they carry the promise of a specific fact, which is exactly what a skimming reader is hunting for.

This is the cheapest device in this lesson. If a paragraph contains a number worth knowing, set it as a numeral. If a page has one fact that should survive skimming, a large numeral will survive it. It is also why pricing, statistics and dates get skimmed accurately from pages where the prose is not read at all.

Be careful with the corollary: a page full of numerals has no attracting numerals, and a long table is a field of digits where nothing stands out. That is a job for alignment and tabular figures, covered in the type block.

Your own name, and words that name you

A reader's own name is detected in text with unusual reliability, and so, more weakly, are words that describe them — their city, their job title, their language, their team. This is the mechanism behind personalised subject lines working, and it is also the mechanism behind them feeling intrusive once readers learn that a machine inserted the name.

The design point is narrow but real: a word that identifies the reader is a strong emphasis channel you did not have to style. Use it where it is honest — naming the city a shop is in, naming the course somebody is enrolled on — and be aware that using it where it is not honest is the recognisable texture of spam.

Motion, and why it is a weapon

Covered earlier as a peripheral-vision effect, but it belongs on this list: motion in the periphery captures attention involuntarily. It cannot be budgeted alongside the other channels because it does not compete with them, it overrides them.

This is why the ethical line sits here more clearly than anywhere else in visual design. An auto-playing video beside an article is not asking for attention; it is taking it, from a reader who cannot decline without leaving. Operating systems and browsers now expose a reduce-motion preference precisely because so many products spent this channel carelessly, and respecting that preference is a two-line change in any modern stylesheet.

What this means for the budget

Add a step to the emphasis budget from earlier: before you allocate anything, inventory what is already pre-emphasised on the surface.

faces present?      → already rank 1, wherever they sit
numerals present?   → strong pull inside prose
motion present?     → overrides everything, including rank 1
reader's own data?  → strong pull, easily overused

Then allocate your formal channels around that inventory rather than in spite of it. If a page has a large photograph of a person and you need the headline read first, the honest options are to remove the photograph, crop out the face, or accept that the face is the headline and write accordingly.

The fights that go on for weeks in design reviews are very often this: one person allocating formal emphasis, another person responding to content emphasis, and neither saying which they mean.

The one thing to keep

Faces, numerals, a reader's own identifying words and any motion attract fixations regardless of styling, so inventory what is already pre-emphasised on a surface before you allocate size, value and isolation around it.

Before you move on

A landing page has a 500px photograph of a smiling person looking straight at the camera, beside a headline the team wants read first. Enlarging the headline by 40% does not change what testers report seeing first. What is the most defensible next move?

Pick the one you would defend. Nobody sees your answer.

No ads. No data sale. No public scores on people. Ever.

© 2026 Addaly