Five simple steps to designing grid systems - Preface

Following my article in Design in Flight I've received countless emails to elaborate, in some way, on how to correctly design grid systems. It's quite a complicated field and so distilling it into 'Five Simple Steps' has proven to be quite tricky, so much so that I thought I needed to write some sort of preface before we get on to the first part.

What is a grid?

Before we even begin to tackle designing grid systems we need to have a basic understanding of what they are, why we use them and where they came from.

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. The grid is a child of Constructivist art and came into being through the same thought processes that gave rise to that art movement. Clear links can also be drawn between the Concrete-Geometrical art of the Zurich school in the 1930's and several notable artists of this movement made important contributions to typography through their fine art.

It was around this period that the grid system moved from the domain of art and into one of typography and commercial design.

It's about mathematics... mostly

First of all when talking about grid systems we have to mentally separate form and function. We have to think about aesthetics and proportions as a result of considered construction. This can be quite tricky for designers who have been schooled in the 'you'll know it's right when it feels right' school of composition. But as I've written about before, feel is an emotional reaction to construction, to mathematics.

Ratios and equations are everywhere in grid system design. Relational measurements are what defines most systems, from simple leaflet design to the complex of newspaper grids. To design a successful grid system you have to become familiar with these ratios and proportions, from rational, whole-number ratios such as 1:2, 2:3, 3:4 and those irrational proportions based on the construction of circles, such as the Golden Section 1:1.618 or the standard DIN sizes 1:1.414⁶.

These ratios are ubiquitous in modern society, from the buildings around us to patterns in nature. Using these ratios successfully in a grid system can be the deciding factor in whether or not a design, not only functions, but has aesthetic appeal too.

What is a grid system?

A grid system is a grid design which has been designed in such a way that it can be applied to several different uses without altering it's form. An example of this would be a grid system for a book whereby you have many different page types - part-opening, title, half-title etc. - and would need only one grid to use on all the page types.

The danger with designing a system to cope with many different varients is complexity. When you add complexity, you decrease usability and there is a danger the grid would become so complex the designer can't use it. This thought should always be running through your head when designing a grid system - keep it simple, but comprehensive.

Why design a grid system?

It is often said of grid systems that they limit the scope for creativity or leave no freedom. Karl Gerstner, one of Switzerland's preeminent graphic designers, was aware of this conflict with the designers adoption of grid systems.

The typographic grid is a proportional regulator for type-matter, tables, pictures and so on. It is a priori programme for a content as yet unknown. The difficulty lies in finding the balance between maximum formality and maximum freedom, or in other words, the greatest number of constant factors combined with the greatest possible variability.

The grid is a regulatory system which pre-empts the basic formal decisions in the design process. it's preconditions help in the structuring, division and ordering or content. I'm not saying a well designed grid will solve all of your compositional problems, far from it, but it goes some way in creating a coherent structure in design which in turn creates the aesthetic values all of us are after in our designs.

The Five Simple Steps

You should now have a clearer understanding of what grid systems are, where they came from and what they should do, if designed well. Within the next Five Simple Steps, I'll go through the elements which make a successful grid system and how these elements can be brought together to create simple and complex systems which can be applied to a number of media outputs.

The first in the series will be 'Combining Ratios'

1. Subdividing ratios
2. Ratios and complex grid systems
3. Grid systems for web design: Part 1
4. Grid systems for web design: Part 2 Fixed
5. Grid systems for web design: Part 3 Fluid

Comments

Commenting is not available in this section entry.

I'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.

I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.

Mark Boulton Design

If you're after simple, clean and effective web design; let me know.