Grid systems : create order from chaos

Grid systems


Being a 'creative', I thought I should be a free-thinker. Follow no rules. Do you're own thing. You know what I mean?

So you can imagine my surprise, after years of 'free-thinking' that I began to understand the elements of designs I saw and liked. Grid systems.

So NOT creative, I thought. But, I looked, I appreciated, I copied - or should we call it 'was inspired by'?

After a lot of practice, I discovered that grid systems can actually help your creativity, rather than restrict it. Very weird. But immensely practical in real terms.

For a creative person, when starting a new creative project, the worse thing in the mind is the blank sheet (or screen, these days). No limitations, do what you want? But a working creative mind can do any number of 'things' - it's finding the relative ones to focus upon that is the issue. Years and years of practice make it easier to focus on the important factors, but a really good brief is even better. Especially one that has restrictions as well as inspiration.

Likewise, when you start to design on the page, a few visual 'rules' to work within can actually be a massive help in getting you started. The logo must be here. The address details must go there. The tagline goes below that. Etc. Once you start plotting these out with guides, you suddenly find yourself with a very basic grid system.

So, rather that fight it, I began to whole-heartedly develop my own grid systems with a varying number of vertical columns and work within them. Imagine my delight, when I found it easier to start placing my thoughts upon the page, when I started to use the grid of columns. Seems counter-creative, but it works.

But don't take my word for it :

Grid (graphic design)

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner. A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.

source : Wikipedia

As you can imagine, there are many, many websites that discuss grid systems, one that I have visited on quite a few occasions is thegridsystem.net, where at the top of the page you will find this quote :

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ”

Josef Müller-Brockmann


For the last decade and more, I have almost always started a project by first creating a grid system within which to work, then added the fundemental items required. All the type I place is normally sat upon a baseline grid, so that the reader sees a consistent spacing between the lines of type.

I also have my own rules for aligning images within the type design, to give a better balance on the page. For example, in most cases I will align the top of any image with the top of the lowercase x-height of the type. The bottom of the image rests on the baseline grid. Below is a visual explanation of what I mean, if you don't understand :

explanation of x-height

(I have other personal rules too, but I shall leave them for another time).

Whenever I can, I am trying my utmost to make the message from my clients simpler and clearer for their target-market to understand, whatever I am creating. The grid system is a great starting point.

Most ordinary folk are quite surprised when they discover how much effort designers put into what appears to be a simple design. But it is this attention to detail that makes the design appear simple and easy to read.

And it takes a lot of experience, practice and skill to create order from chaos.


Paul Thompson
bamboo:ZOO