Home/Elements & Principles/The unity dial
Elements & Principles · Demonstration and film

The unity dial

Twenty marks, one grid, five settings running from complete sameness to complete difference. Each setting is right for a different job, including the two at the ends.

Visual EssayDemonstrationFilm12 min readSeries · Communication Systems

Unity is not a virtue and variety is not a vice. The only real question is what the composition is for, and that question is almost never asked out loud.

Unity is what makes a set of things read as one thing. Variety is what makes any of them worth looking at. They pull in opposite directions, and a surprising share of composition problems are really one decision about where to stop pulling.

What follows is a controlled version of that tension: twenty marks on a fixed grid, with a single dial running from complete sameness to complete difference. The grid positions are identical in every setting, so anything you see changing is the dial and not the layout.

The five settings are not five points on a quality scale. Each is genuinely useful for a different job, including the two at the ends, which is the part most treatments of this idea get wrong.

Fig. 01 · The unity dial
Setting 1 · Identical Maximum unity. No variety. Twenty marks with nothing to distinguish them stop being twenty things and become one texture. There is no entry point and no reading order, which is a failure in a poster and exactly right in a background, a repeat pattern, a dense data grid, or anything whose job is to be read all at once rather than looked at.

The dial, with the purposes written on it

  • Identical — backgrounds, patterns, dense data, anything read at a glance rather than looked at.
  • A family — design systems, product ranges, a set of illustrations that must obviously belong together.
  • Family with an accent — a single call to action, a headline in a run of body copy, the one number that matters on a dashboard.
  • Mixed — a genuine collection: an index, a directory, a marketplace, a museum wall.
  • Unrelated — the depiction of variety itself: a crowd, a market, a problem about to be solved.

What this model does not settle

Where to sit on the dial is a question about purpose. The demonstration answers a narrower one: what happens perceptually when sameness increases or decreases while everything else is held constant. Three things it cannot tell you.

It cannot tell you which variable to vary. Size, shape, colour, weight, spacing and rotation are not interchangeable and do not carry equal force. Colour usually outruns size; motion outruns both. A family built on one variable behaves quite differently from a family built on another, which is why the dial above varies only size until its last two settings.

It cannot tell you how much variety a longer exposure will tolerate. A poster is read in two seconds; a reference page is lived in for an hour. Sameness that reads as calm at first glance can read as monotony by the fourth screen, and variety that reads as energetic on arrival frequently reads as fatigue on return.

And it says nothing about meaning. A coherent family communicates nothing by itself beyond the fact that its members belong together. What they mean is decided by everything else on the page, and most of all by the language.

Try it

Find the dial in something you already own

  1. Open a page you made and name the one variable carrying most of its variety. Usually it is size, colour or weight.
  2. Turn that variable down until the page is at setting 1, everything the same. Look at what survives. Whatever is still legible was never relying on that variable.
  3. Turn it up one notch at a time and stop at the first setting where the page says what you wanted it to say.
  4. Write down what that setting is for, in one sentence, and keep the sentence with the file.

What to watch for. Most pages that feel busy are not at setting 5. They are at setting 4: two or three coherent systems, each defensible, running at once. The fix is rarely more restraint everywhere. It is deciding which of the systems is the page, and demoting the others.

The same idea, as a film

The demonstration below takes one variable, isolates it, adjusts it while everything else is held still, and shows what the adjustment does. It runs for twenty-six seconds, it is silent, and nothing starts until you ask it to. The step-by-step description underneath carries the same content in text, for reading rather than watching, and the same sequence is available as a 1080p file.

Scene 01 Twenty-four marks. Identical. Scene 02 Isolate one variable: size. Position, shape, colour and spacing held still Scene 03 Vary it, inside a narrow rule. Range · 0.72 to 1.16 Scene 04 Break the rule once. One break in the rule · read first The takeaway Unity is what makes an accent affordable. Markup · markup.design
Fig. 02 · One variable at a time · browser animation, no audio

Download the 1080p file MP4, H.264, 1920 × 1080, 26 seconds, silent, 1.0 MB. The five scene descriptions below are its transcript; the film contains no spoken words. It is the same sequence as the demonstration above, exported frame for frame.

  1. Scene 01

    Twenty-four marks on a fixed grid, all identical. A texture, not a picture. Nothing invites the eye anywhere.

  2. Scene 02

    One variable is isolated: size. Position, shape, colour and spacing are held still for the rest of the demonstration.

  3. Scene 03

    Size is varied within a narrow range, roughly 0.72 to 1.16 of the original. The field gains internal life and stays coherent.

  4. Scene 04

    One mark breaks the rule: half again as large, and the only coloured thing on the field. It is read before anything else.

  5. Scene 05

    The takeaway. Unity is what makes an accent affordable, because the accent is only loud in proportion to the sameness around it.

Sources and further reading

  • Five shapes, four arrangements — the companion demonstration, on relationships rather than sameness.
  • The grouping effects the dial relies on are the Gestalt similarity and common-region principles. They describe reliably what people see. They do not prescribe what a designer should do about it.
A model, not a measure The dial is a teaching device. It shows five arrangements chosen to make a relationship visible, and the settings are named rather than numbered because there is no scale on which 3 beats 2. Nothing here measures how good a design is, and no research establishes an optimum position on this axis.
Why the accent is so loud In setting 3 the accent is about one and a half times the size of its neighbours, which on its own is a mild difference. It reads as dramatic because every other channel that could carry a difference has been switched off. Contrast is relative to its surroundings rather than to any absolute value, and this is the most useful consequence of that fact.
Settings 1 and 5 are not failures It is tempting to read the dial as a slider with the good designs in the middle. Identical is correct for a texture and for anything scanned rather than studied. Unrelated is correct when the subject genuinely is variety. The error is not the position on the dial, it is choosing a position without having said what the composition is for.