Layout | Basics

Ratios and com­plex grids

In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to cre­ate a sym­met­rical grid on which to cre­ate your designs. This, the second part in the series, will deal with other ratios and how they can be com­bined to cre­ate more com­plex grid systems.

Relat­ing to grid systems
I’ve talked a few times about using the Golden, or ‘Divine’, Sec­tion in the grid sys­tems you design. The Golden Sec­tion is a ratio which is evid­ent through­out the uni­verse as the num­ber Phi. You can use this ratio to good effect in design by mak­ing sure that ele­ments of your grid con­form to this ratio. Using the Golden Sec­tion can ensure a nat­ural sense of cor­rect com­pos­i­tion, even though it is based in math­em­at­ics it will ‘feel’ right.

This is an import­ant point and has been argued and debated for ages. Aes­thet­ics can be meas­ured and more import­antly can be con­struc­ted. If you want some­thing to be aes­thet­ic­ally pleas­ing there are steps you can take to make sure it is going in the right dir­ec­tion. Now I’m not say­ing that ‘fol­low these rules and you will cre­ate some­thing beau­ti­ful’. What I am say­ing is that by fol­low­ing a few of these guidelines can go some way into cre­at­ing some­thing com­pos­i­tion­ally bal­anced, which will inher­ently be more aes­thet­ic­ally pleasing.

Com­pos­i­tion can make things more usable
This is a the­ory that exists called the ‘Aes­thetic Usab­il­ity Effect’. I find it a really inter­est­ing the­ory. This the­ory sug­gests that things which are designed to be beau­ti­ful are inher­ently more usable as a res­ult. It is an inter­est­ing the­ory and can cer­tainly chal­lenge the usab­il­ity field, which is often tar­nished with the ‘ugly brush’.

Com­pos­ing grids using the­ory and bal­anced ratios (such as the Golden Sec­tion), which in turn enable the cre­ation of beau­ti­ful, bal­anced designs. These designs then have a qual­ity which will make them more usable, accord­ing to the the­ory. Per­haps I’m labour­ing the point here, but in short:

Well designed grid sys­tems can make your designs not only more beau­ti­ful and legible, but more usable.

Put­ting it into practice
As in the first art­icle I’m going to be desiging this grid in con­text. For those of you who are primar­ily web based I’m afraid this is going to be another print example, but that doesn’t mean this the­ory can’t applied to web. It can of course be applied to lots of dif­fer­ent medium, from archi­tec­ture and interior design to product design and art, you just have to apply it to a dif­fer­ent ‘canvas’.

So, as in the DiF art­icle the brief is to design a book. Unlike the first art­icle in this series, I’m going to be apply­ing the grid to a double page spread rather than a single page, this is called an asym­met­rical grid as opposed to the sym­met­rical grid I designed in the last article.

Shap­ing the page
For this grid, we’re going to use the ratio of the page to define the main text, or con­tent, area of the pages. There’s a very simple way of redu­cing this page size down to make sure the ratio is cor­rectly placed and bal­anced. See diagram.

We now have an area, shown in red, in which to con­struct the grid.

Apply­ing the Golden Section
Now you’ve read the other art­icles you will see that apply­ing the ratio to this area is pretty straight for­ward. The area is divided using Phi which gives us two columns, A and B.

Cre­at­ing the system
So, we’ve got the columns, we now need to flesh out the grid to be able to cope with the dif­fer­ent con­tent and page types. First off, we extend the lines of the con­tent area and the columns.

We then apply a hori­zontal rule cut­ting across con­tent area cre­ation lines. I call these ‘hanging lines’, not too sure what the cor­rect ter­min­o­logy is. But any­way, the con­tent ‘hangs’ from these lines giv­ing us con­sist­ency through­out the book. It gives the reader a line, in the same place, to rest their eyes on page after page.

Using the exten­ded lines we can then add areas for the access struc­ture of the book—folios etc. These typ­ic­ally sit out­side of the con­tent area, usu­ally with plenty of white space around them, as to show that they are dif­fer­ent ‘types’ of content.

We can then add vari­ous designs to this grid com­fort­able in know­ing that the indi­vidual ele­ments of the design—text, images, access struc­ture elements—will all have a rela­tion­ship to each other and to the book size.

Relat­ing to grid systems
Cre­at­ing grid sys­tems in this way—using ratios to cre­ate related lines on which to con­struct composition—ensures a bal­anced grid.

I’m afraid it isn’t an exact sci­ence though. A lot of grid design is exper­i­ment­a­tion with ratios, it’s exper­i­ment­a­tion with using white space and ele­ments of con­tent such as pho­to­graphs and text. It’s also about con­ven­tions. Don’t rein­vent the wheel need­lessly, study the con­ven­tions used in magazines from all sectors—from archi­tec­ture to nurs­ing (ser­i­ously, some magazines from unex­pec­ted pro­fes­sional sec­tors have fant­astic grid designs).

What I’m say­ing is, have a play with grid design. Just because I’m talk­ing about ratios, sub­di­vi­sions and mod­u­lar­isa­tion, doesn’t mean design­ing grids should be dull. Have a mind on the end product, but not at the expense of the pro­cess of design­ing your grid.