Composition basics: arranging a page so people read it

Composition is deciding where things go so that a reader meets them in the right order. Nobody reads a page evenly. The eye jumps between a few points, landing first on whatever differs most from its surroundings and then hunting for the next thing, so the designer's job is to decide that order and build the differences that produce it. Write the order down in words before you start, for example the headline first, then the picture, then the price, then everything else. Research on eye movement shows what happens when nobody does. In 2006 Jakob Nielsen reported an eye-tracking study in which 232 people looked at thousands of web pages and mostly scanned in an F shape, across the top and down the left edge, which is what readers do when a page gives them no order of its own.

You build that order out of contrast, and there are only a few levers. Size is the obvious one, but weight, colour, position and space all rank things too, and isolation is the strongest of the quiet ones, since a small element with space around it will outrank a bigger one lost in a crowd. The classic demonstration is 'Think Small', the 1959 advertisement for the Volkswagen Beetle by the agency Doyle Dane Bernbach, art directed by Helmut Krone with copy by Julian Koenig. The car is tiny, near the top left of a page that is almost entirely white, with a short headline under it and three columns of copy along the bottom. Full-colour car adverts were common then. This page was black and white and mostly empty, and in 1999 Advertising Age ranked the campaign the best of the twentieth century.

A grid is the structure underneath, a set of columns and margins with gutters between the columns, decided once so that every later decision is quicker and every page agrees with the last. Its modern form came out of Swiss design after the Second World War, and Josef Müller-Brockmann's Grid Systems in Graphic Design, published by Niggli in 1981, is still the standard handbook. The idea is much older. Newspapers have run on columns for centuries, and medieval scribes ruled their pages to fixed proportions before writing a word. On screens the usual grid has twelve columns for a plain arithmetical reason, because twelve divides by two, three, four and six, so halves, thirds and quarters all land on column edges. The grid is for the designer. A reader should only ever notice that the page feels calm and ordered.

Alignment is the cheapest improvement in design. When things share an edge, the eye draws an invisible line between them and reads them as belonging together, so a page with three strong edges feels deliberate and a page with nine slightly different ones feels careless, even to someone who could not say why. Pick a few edges and hold them strictly. Measured alignment is only the start, because some shapes have to pass the line slightly to look as if they sit on it, and "Alignment and edge relationships" shows which ones and why. Near misses are the worst case of all. Two edges that miss each other by two millimetres look like a mistake, so either line them up exactly or move them clearly apart.

White space is any part of the page left empty, whatever its colour, and it does two jobs. First it groups things, because the eye reads items that sit close together as one unit, a tendency the Gestalt psychologist Max Wertheimer described as proximity in 1923. Move a caption closer to its picture and further from the next paragraph, and the page explains itself without a box or a rule. Second, space signals value. For most of printing history space cost money, because advertising was sold by the column inch, so a crowded page still reads as cheap and an open one as confident. Make the gaps uneven on purpose. Equal gaps everywhere carry no information, while one gap twice the size of the others tells the reader, without a single word, that a new section has begun.

Scale and balance come next. Scale is the size of one element compared with the others, and it needs to be decisive, because a headline a little bigger than the body looks like an error while one three or four times bigger looks like a choice. Balance is how visual weight spreads across the page. Symmetry, with everything centred on an axis, feels formal and settled, which suits an invitation or a title page, while asymmetry feels active and balances a heavy element against open space, the way a child balances an adult on a seesaw by sitting further out. Designers have argued about this for a century. Jan Tschichold's book Die neue Typographie of 1928 treated the centred layout as finished, yet by 1947, redesigning Penguin's paperbacks, he was centring title pages again. Both work when chosen.

Cropping is composition applied to a picture, and it decides what the picture is about. A tight crop keeps the subject and cuts away the explanation. Toulouse-Lautrec's 1893 poster for the Divan Japonais, a Paris cabaret, cuts off the singer Yvette Guilbert's head at the top edge and still lets you recognise her by her long black gloves, while the dancer Jane Avril, a black silhouette in the foreground, takes the first look. The working rules, where a crop may cut a person and how one picture survives being cut to several shapes, are set out in "Framing and cropping", near the end of this module.