Pyrophoric

gotta love those grids…

Friday, February 13th, 2009

A builder wouldn’t put up a house without a set of architect’s blueprints. An engineer wouldn’t build a pipe system without a schematic, so as web designers why are we any different? A decent foundation of a solid grid, or lack of, can make or break a web design.

Grids on the web are not a new concept – back before the semantic web and table based layouts were the norm, websites were built in varying degrees of complexity with nested tables inadvertently creating a grid system. Many of the earliest web designers were dabbling print designers and designed the way they were used to. In design for print, the grid is the work surface. With the rise of CSS and standards based layouts (and for a while, Flash websites) and the flexibility that they offered, these grids seemed to go out of fashion with the tables as designers took up these newer methods.

I became very aware of the return of the grid (and you must realise, I’m of the Web Designer generation that is proud to say I’ve never built a table based website) when The New York Times design director Khoi Vinh used a grid system in the design of the publication’s online version, and wrote an article about the process in 2007. Other newspapers around the world were soon to follow. Personally, I prefer the layout of The Guardian online edition. Designers like Mark Boulton and websites like The Grid System have also been evangelising the use of grids for years.

When the BBC relaunched their main & news sites in 2008 and the style guide complete with the grid system used was released as the “Visual Language 1.0 (PDF)” document I, and many others, was impressed at the level of detail it allowed for despite its simplicity. Instead of hindering, it enabled a much more creative use of the space. I immediately adapted it and began to use in my everyday work flow.

There are many different grids, systems and layouts out there and everybody will have their favourite. Whether its the 960, the BBC grid or your own custom system, a decent grid opens up the space and unifies things like whitespace and margins / padding, so you can get on with making everything look great. Which is never a bad thing.

Tags: design, grids, layouts
Posted in Articles | 1 Comment »