← archive
003

a grid doesn’t make a good composition

The golden ratio, the rule of thirds and the F-pattern help us ask questions about composition. But a grid organises relationships between elements; it doesn’t certify beauty.

article7 min read

For a long time, I wanted composition to be something I could calculate. Divide the page into thirds, find the golden spiral, put the object in the right place — and stop doubting. There’s an appealing clarity to that approach, as if every successful piece has a hidden password.

The problem is that it’s easy to draw a grid after a piece has already worked. Then it explains everything and nothing at once. A third runs here, something close to the golden ratio appears there, and this line supposedly guides the eye. None of that proves the author thought that way, that a viewer will see it that way, or that another piece without the line would be worse.

A grid can help me put a composition together. It can’t decide what matters most for me.

the golden ratio hasn’t lost, but it hasn’t won everything either

The golden ratio is often presented as a universal law of beauty. A proportion of roughly 1:1.618 appears in architecture, painting, nature, logos and even the human body. The story carries too much certainty and too little testing: you can fit the same spiral to many different images if you move its centre around for long enough.

Experiments paint a more interesting picture. P. A. Russell’s study found no evidence of a special role for the golden ratio across five categories of painting. Portrait proportions varied with what was depicted. In a separate task where participants chose a pleasing rectangle, the result depended on the instructions: an abstract rectangle could approach the golden ratio, while a “rectangle for a painting” or “for a tile” shifted preferences elsewhere (Russell, 2000; context experiment, 2000).

This doesn’t prove the proportion is always useless. It shows that preferences depend on what we see, what it’s for and how the question is framed. A rectangle for a photograph, a phone screen and a window in a room serve different purposes. They don’t have to share one “correct” width.

So I’d give the golden ratio a modest place. It can be a useful starting constraint. It can establish rhythm or help compare options. But matching 1.618 isn’t what makes a piece good.

what a grid actually does

A grid isn’t a drawing over a layout. It’s an agreement: which edges align, which distances repeat, where the columns run and how much space separates groups.

If a heading, caption and button share a vertical line, it’s easier to compare them and see that they belong together. If the space between cards is smaller than the space between sections, the groups become distinct. If a line repeats across the page, the layout stops looking like a random collection of objects.

Here, a grid works with what perceptual psychology calls grouping. We tend to see nearby elements as a group, similar elements as related and incomplete contours as whole. Gestalt principles describe this; MIT’s graphic design teaching materials directly connect white space, proximity, similarity and alignment with an interface’s scannability (MIT 6.831 notes, OpenStax).

In that sense, a grid is like road markings. It helps me stay out of the opposite lane, but it doesn’t tell me where to go or why. Sometimes the road should be straight; sometimes it needs to curve around a building.

one layout, four choices

Four composition choices for one task The same elements create different effects depending on their arrangement. ONE LAYOUT · FOUR HYPOTHESES 01 · centred02 · split in half03 · thirds04 · free arrangement
a grid is a hypothesis, not an answerCentre creates quiet, a split creates balance, thirds create emphasis, and a free arrangement creates tension.

Imagine a poster for a talk. It includes the speaker’s name, the title “How to look at design”, a short description, a date and a registration button. We change nothing except the arrangement.

centred. Everything gathers around a vertical axis. It feels calm, almost ceremonial. It works when the event itself is the focus and people need to grasp the title quickly. But centring everything can flatten the distinction between the heading, explanation and action.

split in half. Text goes on the left, a photograph or a large shape on the right. The two halves create a clear balance. This is useful when the subject and the image both need an introduction. But an even split can become predictable: the eye moves between the halves without finding a starting point.

thirds. The image or the speaker’s name takes roughly two thirds; the text and button take the rest. This creates an asymmetric emphasis. The important part sits slightly off-centre and has room to breathe. But if the heading is long or the photograph already has strong contrast, the “thirds point” won’t rescue it and may make it cramped.

a free arrangement. The heading moves towards an edge, the date becomes a small label, and the button sits where the speaker’s gaze points. There’s no single guiding line, but there is tension and character. This needs checking: the connection between the date and the button can disappear if the spacing doesn’t explain the structure.

None of the four wins automatically. For a museum talk, I might choose a centred layout to create quiet. For a festival, thirds might bring energy. For instructions, a split layout could make the action easy to find. For an expressive poster, a free arrangement might be worth the risk.

The useful question isn’t “Did I hit a third?” It’s “What should someone notice first, connect next and do afterwards?” A grid helps when it defines relationships: this edge aligns with that one, this space separates a group, this contrast invites the eye to pause.

the eye doesn’t travel on rails

Designers often say that a diagonal guides the eye, a triangle creates movement, or a horizon at a certain height makes an image stable. These descriptions are useful for observing. They become a problem when they turn into a promise: put the object here, and the viewer will follow the route you’ve drawn.

The eye doesn’t move through a layout like a ball through a maze. Size, contrast, familiarity, captions, the direction of a face, the task and past experience all influence it. One person looks for a price, another examines a photograph, a third reads the heading. The same person can switch modes a second later.

A spiral overlaid afterwards doesn’t prove that it organised the image. It can be a good way to ask which relationships already work. But you have to test the answer by removing the spiral and seeing whether the hierarchy remains.

F is about scanning, not reading

The F-pattern is often retold as a law: people supposedly always read pages from top to bottom in the shape of an F. NN/g’s original eye-tracking study found something more modest: on many web pages, users often moved a long way across the top, a shorter way below it, then scanned the left edge. The study itself stresses that this is a rough shape. E shapes, inverted L shapes and substantial pauses elsewhere also appeared (Nielsen, 2006).

Scanning means looking for signals: a price, a name, an item or the word “buy”. Reading means drawing meaning from sentences in sequence. When I browse a list of services, the first words of headings and a consistent edge matter. When I read an essay, I may return to the start of a paragraph, finish a long line or pause over a diagram in the middle.

So the F-pattern is useful as a warning: don’t hide the main point at the end of a long paragraph, and don’t assume visitors will read everything first. But it doesn’t forbid long texts or dictate every page’s composition. A good article can begin with a short conclusion and then make room for attentive reading.

how to use rules without worshipping them

Balance between self-similarity and chaos Composition emerges where relationships connect and distinguish elements. COMPOSITION IS NOT PREDICTABILITY relationships matter more than a magic number self-similaritycompositionchaos everything is the samenothing is connected
a working model instead of a checklistToo much sameness collapses into one block; too much difference falls apart. The task is to choose the right degree of difference.

I’d keep five steps for myself.

1. Name the task first: what should someone understand, feel or do? 2. Choose a constraint — centring, columns, thirds, a repeating gap — and use it as a hypothesis. 3. Make at least two arrangements that solve the same problem differently. 4. Remove the guides and check whether the hierarchy, groups and next step remain clear. 5. If in doubt, show the layout to someone with a specific question: what did you notice first, what did you connect and where did you pause?

A grid is especially useful when the work continues across screens, a catalogue or a magazine. It preserves relationships between pages and reduces the number of small decisions. But in a single poster or cover, breaking the rhythm may be more important for giving the piece a voice.

Composition doesn’t begin with a golden spiral. It begins with a choice you can explain. A grid helps you see, repeat and test that reason. Sometimes it helps you see where it’s time to break the rule.

sources