Designing with the 960 grid system

10 November, 2009

• design
• grid
• resources

Ismail Koci

Category: Web Design

As I go along learning new techniques to better improve my design and workflow, occasionally I'll come across a doozy. Well it's happened again folks! For the past month I've been utilising an incredibly handy method of improving not only my designs, but also the time it takes to do that design.

Ladies and gentlemen, I give you the 960 grid system. Go to http://960.gs/ for info and downloads and stuff.

Basically what the 960 grid system does is provides:

• Sketch sheets for quickly mocking up your ideas
• Design layout guides for bringing your sketches to life in Fireworks, Photoshop, Illustrator and more
• A css file with all the floats and measurements and other nifty things

At the moment, I've only put 2 of these into practice, those being the sketch sheets and the design layouts for Fireworks. The design layouts in particular have proved a revelation in how I construct my visual concepts as it provides a 960 pixel wide 12 or 16 column guide system out of the box. This saves me time in determining the widths of content boxes, and also provides a means of quickly laying out my design with good design principles firmly in mind.

Below is the template of the 12 column layout guide for fireworks.

Here is the 16 column layout guide.

I haven't tried the pre-built CSS system yet, but am interested to see how well it will interact with Drupal's Zen theme, which is the base theme that I currently use when developing a website. Once I try it out, I'll be sure to let you know.

I highly recommend any designers that haven't at least tried this to do so, as it has worked wonders for me!