Articles & Examples

Why use a grid?

Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform - web, print & real 3d environments.

Lots of things are designed to grids - city blocks, Interior space, building exteriors and of course books, and more recently websites. Why is this formal arrangement of lines so comfortable to us? What makes horizontals and verticals work for a huge range of applications? Think about it, why are they everywhere?

Take this simple grid.

Superimpose a building elevation, a page in a book or a website page and with very little adjustment they will fit, but most importantly they will all work and feel right.

Grids are a standard way of organising things visually, from bricks to letter, understanding how to create harmonious arrangements based on a grid allows us, as designers, to communicate better.

The squares, or lines, a grid creates can be divided and then divided again. How it is divided is critical in function of the grid. For example, take an average city block (for ease, i’ve used the previous simple grid diagram):

Nothing new here, nice tidy lines of the main roads, good grid, good design. But, then add the minor roads, driveways and other things:

Things start to fall apart. The grid is subdivided in such a way that makes navigation and orientation difficult (from a mapping point of view). True you can navigate by the main roads, which is still grid like, and then trickle down to the sub roads. It still works this way. If the grid was sub-divided in this way though:

Navigation, orientation and design would be an easier, if unrealistic proposition. But a city block, or rather a map of a city block, like this would seem more comfortable to the eye. Our brains can process the information much quicker. I think (and the psychologists could prove me wrong here) our brains see a repeated pattern, recognise it very quickly and assume it applies to the entire structure, we can read it more easily.

A conclusion to this is when designing a grid, subdivide so there is a fractional relationship to the whole grid area, eg, 1/3 3/4 2/3 etc. but more importantly be consistent.

To illustrate the importance of harmonious, fractional divisions consider this diagram:

Grid 1 shows a grid where the master grid lines (indicated in grey) are regularly spaced, the subdivisions however (shown in blue) are uneven divisions there only to serve the designers needs, not the readers.

Grid 2 however has subdivisions, vertically, of a third and another level of division, for each main block division of one sixth. This grid helps the designer but more importantly, helps the reader.

This diagram is an extreme and may seem very obvious to a lot of people. But how many times have you seen it done incorrectly? How many times have you designed a grid and just added another line to suit some aesthetic requirement?

Next, we’ll be going into designing a grid for print publications and then for websites.

Articles

Examples

Print media CSS: The Guardian example

Legal disclaimer: Any redesigns of existing sites may use names, logos, graphics, and/or images which are trademarked or copyrighted by the owning organisation. These items do not fall under any copyright claim or association of Mark Boulton.

Search

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.