Grid structures in Web design

Problem:

a chaotic world in which parameters are always changing;
a need for control without being controlled;
a desire to find beauty and truth;
vast quantities of words and images that need to be placed on a page.....
The designer and the grid. by Lucienne Roberts, Julia Thrift

For anyone interested in learning about grids in design, this book is a fascinating read and nice introduction. It doesn't really teach you how to use a grid, but rather gives background to the history and psychology of the grid. A more practical, "how to" book, is Grid Systems by Kimberly Elam.

My own journey with design and the grid began at an early age (though I didn't realise until recent years). Back in my school days my copybooks were littered with sketches and doodles of all sorts. I'd always had an interest in art but never really taken it seriously. At the age of about 15 my father, a typesetter by trade, asked me to sketch a component for a logo he was working on. Given a blank piece of paper and pen, I was lost. Without the grid lines and boundaries of my school copy book I was stumped.

My solution in the end was to go back to my gridded school paper, sketch up what I had in my head and then copy it onto normal notepaper. I don't know whether this was just because I'd always used gridded notepaper for sketching and I was used to it or because it provided a structure within which my ideas could take shape. Whatever it was, it stuck in my head and I still use gridded notepaper at the start of every project today.

Here at Cubedroute, our approach to web design is simple. We're firm believers that content is king. At the beginning of a project for a client, we gather together as much of their information as possible, content, brand materials, etc. After carefully studying the content along with our client's target audience, we try to come up with the best way to present this information in a way that tells our client's story.

First we prioritize the information, then we begin to design a grid that will help us best display this information. Out of this our wireframes are born, which eventually lead to our finished polished designs. The idea of using grid structures to contain and unite all the information works for us. Having said all this its just as important not to be confined by the grid; it's easy to get locked in. We try to design a grid that works and then break out of it in certain areas to create impact. Let your eye be the deciding factor whether something is right and not the grid.

Over the years there have been some brilliant articles written in relation to web design and the grid. Below are just a few of our favourite reads over the years.

• Five simple steps to designing grid systems — Part 1 (Mark Boulton 2005)
• Grid Computing… and Design (Khoi Vinh from way back in 2004)
• Grids Are Good ( Vinh and Boulton, PDF presentation)
• 65 Resources for Grid-Based Design (loads of juicy stuff here)

 

We'll be coming back to the grid in detail over the coming months.

Related tags: Design