Designers, Don't Get Gridlocked!

Many people write about the importance of using a grid to create the backbone for a solid website. A strong grid creates a visual framework that gives structure, order and harmony to your design. As stated in 'Grid systems' by Josef Muller-Brockmann; 'This orderliness lends added credibility to the information and induces confidence'. On a website it allows you to treat content as reusable modules that fit in the layout across different pages. This not only maintains consistency but also sets rules that make it easy to re-produce web content such as images, video and graphic teasers later down the line.

In his excellent series of articles 'Five simple steps to designing grid systems', Mark Boulton said “designing to strong grids means you have to take a step back from what you think the design should look like (and then adding things to the grid to suit), and instead concentrate on creating a harmonious design within the framework you've created.”

This is arguably a sensible approach, however during the design process, designing to a strict grid too early has actually caused me some problems. Something that can be easy to overlook is how a grid will work on all the pages in the site. A simple 4 column layout may work wonders for your homepage, but have you considered how that will translate to a content page or maybe an events listing?

As a designer I find it hard to 'let go' once I've got a grid I think works. I often end up getting into predicaments where I have to decide whether to break the grid that I've become so attached to or reluctantly start again and try 5 columns instead of 4. And I'm guessing I'm not the only designer who has got into this situation.

Boulton later wrote a chapter on 'Breaking the grid' in his book 'A Practical Guide to Designing for the Web' where he suggests your grid 'shouldn't be a rigid tool that you can't change'. I think this makes sense because by worrying about the grid too early in the design process you can risk stumping your creativity and becoming 'gridlocked'. Perhaps we shouldn't worry that our initial designs don't fit in a perfect grid, or one margin works better wider than another. How about just go with it, let your creative juices flow and focus on forming an overall concept... the grid can come later.

So some elements probably won't line up perfectly and one margin here may be bigger than one there, but that's OK for now, don't let those guidelines restrict you before you even have a concept. When you are ready you can take a step back and look at the overall design and assess what kind of grid is going to work across the site and adapt what you have to fit this underlying grid. The point is that it didn't restrict you at the outset.

We recently redesigned the website for Breakthrough Breast Cancer who's striking new brand is simplistic in that it uses just one core colour and a lot of white space. To reflect their new brand online we wanted to use wide gutters between columns to increase the amount of white space and achieve a light, uncluttered design. Now consider the popular 12 & 16 column 960 grid templates that are available for download, the gutters between the columns on these are set at 20px which can often feel cramped. For Breakthrough we wanted gutters closer to 40px or wider so by designing to these we would inevitably end up breaking the original grid. So I say get the calculator out and make your own grid to suit your project.

I like using this grid calculator to quickly build up my own custom grids. It lets you set the number and width of columns and the gutter width. You can then play around with the numbers until it's the right width to fit at the optimal screen resolution and more importantly works for your design. I like it because it's simple but if you really want to get your hands dirty with grid solutions more before jumping into Photoshop, gridr buildrrr is a good alternative with some extra features.

The final tip in Jason O'Brians '6 Tips and Tricks for Designing with the 960 Grid System' provides a fitting summary:

“The (960) template is great for setting up the general size of your content areas and for lining things up, but you shouldn’t get into a habit of leaving it on while you design. Those columns can literally start boxing you in, so ditch them and feel free to get curvy.”