Mark Boulton

Follow­ing my art­icle in Design in Flight I’ve received count­less emails to elab­or­ate, in some way, on how to cor­rectly design grid sys­tems. It’s quite a com­plic­ated field and so dis­tilling it into ‘Five Simple Steps’ has proven to be quite tricky, so much so that I thought I needed to write some sort of pre­face before we get on to the first part.

What is a grid?

Before we even begin to tackle design­ing grid sys­tems we need to have a basic under­stand­ing of what they are, why we use them and where they came from.

In the con­text of graphic design, a grid is an instru­ment for order­ing graph­ical ele­ments of text and images. The grid is a child of Con­struct­iv­ist art and came into being through the same thought pro­cesses that gave rise to that art move­ment. Clear links can also be drawn between the Concrete-Geometrical art of the Zurich school in the 1930’s and sev­eral not­able artists of this move­ment made import­ant con­tri­bu­tions to typo­graphy through their fine art.

It was around this period that the grid sys­tem moved from the domain of art and into one of typo­graphy and com­mer­cial design.

It’s about math­em­at­ics… mostly

First of all when talk­ing about grid sys­tems we have to men­tally sep­ar­ate form and func­tion. We have to think about aes­thet­ics and pro­por­tions as a res­ult of con­sidered con­struc­tion. This can be quite tricky for design­ers who have been schooled in the ‘you’ll know it’s right when it feels right’ school of com­pos­i­tion. But as I’ve writ­ten about before, feel is an emo­tional reac­tion to con­struc­tion, to mathematics.

Ratios and equa­tions are every­where in grid sys­tem design. Rela­tional meas­ure­ments are what defines most sys­tems, from simple leaf­let design to the com­plex of news­pa­per grids. To design a suc­cess­ful grid sys­tem you have to become famil­iar with these ratios and pro­por­tions, from rational, whole-number ratios such as 1:2, 2:3, 3:4 and those irra­tional pro­por­tions based on the con­struc­tion of circles, such as the Golden Sec­tion 1:1.618 or the stand­ard DIN sizes 1:1.414⁶.

These ratios are ubi­quit­ous in mod­ern soci­ety, from the build­ings around us to pat­terns in nature. Using these ratios suc­cess­fully in a grid sys­tem can be the decid­ing factor in whether or not a design, not only func­tions, but has aes­thetic appeal too.

What is a grid sys­tem?

A grid sys­tem is a grid design which has been designed in such a way that it can be applied to sev­eral dif­fer­ent uses without alter­ing it’s form. An example of this would be a grid sys­tem for a book whereby you have many dif­fer­ent page types — part-opening, title, half-title etc. — and would need only one grid to use on all the page types.

The danger with design­ing a sys­tem to cope with many dif­fer­ent vari­ents is com­plex­ity. When you add com­plex­ity, you decrease usab­il­ity and there is a danger the grid would become so com­plex the designer can’t use it. This thought should always be run­ning through your head when design­ing a grid sys­tem — keep it simple, but comprehensive.

Why design a grid system?

It is often said of grid sys­tems that they limit the scope for cre­ativ­ity or leave no free­dom. Karl Ger­st­ner, one of Switzerland’s pree­m­in­ent graphic design­ers, was aware of this con­flict with the design­ers adop­tion of grid systems.

The typo­graphic grid is a pro­por­tional reg­u­lator for type-matter, tables, pic­tures and so on. It is a pri­ori pro­gramme for a con­tent as yet unknown. The dif­fi­culty lies in find­ing the bal­ance between max­imum form­al­ity and max­imum free­dom, or in other words, the greatest num­ber of con­stant factors com­bined with the greatest pos­sible variability.

The grid is a reg­u­lat­ory sys­tem which pre-empts the basic formal decisions in the design pro­cess. it’s pre­con­di­tions help in the struc­tur­ing, divi­sion and order­ing or con­tent. I’m not say­ing a well designed grid will solve all of your com­pos­i­tional prob­lems, far from it, but it goes some way in cre­at­ing a coher­ent struc­ture in design which in turn cre­ates the aes­thetic val­ues all of us are after in our designs.

The Five Simple Steps

You should now have a clearer under­stand­ing of what grid sys­tems are, where they came from and what they should do, if designed well. Within the next Five Simple Steps, I’ll go through the ele­ments which make a suc­cess­ful grid sys­tem and how these ele­ments can be brought together to cre­ate simple and com­plex sys­tems which can be applied to a num­ber of media outputs.

The first in the series will be ‘Com­bin­ing Ratios’

1. Sub­divid­ing ratios
2. Ratios and com­plex grid systems
3. Grid sys­tems for web design: Part 1
4. Grid sys­tems for web design: Part 2 Fixed
5. Grid sys­tems for web design: Part 3 Fluid