Five shapes, four arrangements
The parts stay the same. Move them, and the page changes what it is claiming. A controlled demonstration of the difference between elements and relationships.
Most arguments about a design are arguments about which elements to use. Most of the meaning is decided one layer down, in the distances between them.
Take five shapes. A disc, two bars, a square, a rule. Put them on a page in four different arrangements without adding, removing or resizing a single one. The parts are identical in every version. What the page says is not.
The idea behind it: a medium is built from primitives, those primitives arrive already carrying a charge, and that charge only becomes a specific meaning in relationship. The essay states the principle. This page is the demonstration, and it is deliberately boring in its parts so the relationships have nowhere to hide.
A disc. Closed, weighted, no direction of its own.
A bar. Horizontal, directional, reads as a line of something.
A second bar, the same as the first. Sameness is itself an element.
A square. Static, planted, the flattest shape in the set.
A hairline. Almost nothing, which is what makes it useful.
What actually changed
Three variables, and only three, are different between the four arrangements: distance, alignment and overlap. No element was scaled, recoloured, rotated except once, or replaced. That constraint is the point of the demonstration. If a page can change its meaning that much while its inventory stays fixed, then most arguments about which elements to use are arguments about the wrong layer.
It is worth naming the layers, because they are routinely confused:
- Elements are the primitives. A disc, a bar, a typeface, a colour, a control, a role on a team.
- Relationships are what you do with them. Distance, alignment, overlap, order, repetition, contrast.
- Meaning is what the arrangement produces in the person reading it, which is the only place meaning has ever lived.
Most teams argue about the first layer, because it is the layer with nouns in it. Swapping the disc for a hexagon is a decision you can make in a meeting. Deciding that the square belongs with the bars is a decision about what the organisation is claiming, and it is much harder to have that argument without a picture.
Where this holds and where it misleads
The demonstration is honest about grouping, order and emphasis, because those effects are strong, well studied and easy to verify by looking. It is not a claim that shapes carry fixed meanings. A disc is not trustworthy and a square is not stable; those are conventions, not properties, and they shift with culture, context and what sits next to them.
It is also a constrained case. Five monochrome shapes on an empty field is a laboratory, not a page. Add type and the type will dominate, because language is a much faster route to meaning than shape. Add colour and the strongest contrast will start to override proximity. Add motion and order collapses into whatever moved last. The relationships shown here still operate in a real composition, but they operate alongside stronger forces, and a technique that is decisive in a laboratory can be a rounding error in a live interface.
The transferable part is not the shapes. It is the habit of asking, when something on a page is not landing, whether the problem is the parts you chose or the distances between them.
Fifteen minutes, one slide of your own
- Open a slide, a page or a screen you made recently and list its elements. Not its sections, its primitives: each block of type, each image, each rule, each control.
- Without changing a single one of them, move things so that two items you had treated separately become one group.
- Then move one item far enough away that it reads as an exception.
- Look at the result and say out loud what the page now claims.
What to watch for. The version that reads most clearly is usually the one where the gaps are least even. Uniform spacing is the default a tool gives you, and it is the arrangement that asserts the least. If your page felt flat before, check the gaps before you check the fonts.
Where it connects
In an interface, the four arrangements above are four different navigation models. Dispersed is a dashboard of equal tiles. Clustered is a primary action with its alternatives demoted. The sequence is a wizard. Nested is a single object with expandable detail. Teams usually choose between these by arguing about components, when the decision is really about which relationship the product is claiming between its parts.
In customer experience the same four appear as service design: a set of independent touchpoints, a main journey with an escape hatch, an ordered flow, or one continuous relationship with internal stages. The elements, meaning the touchpoints, are frequently identical across competitors in a category. The arrangement is where the difference lives.
Sources and further reading
- The grouping effects demonstrated here are the Gestalt principles of proximity, similarity and common region, described in the perceptual psychology literature from the 1920s onward. They are well replicated as descriptions of what people see, which is a narrower claim than a rule about what designers should do.