Designing with grids

Grid sketches on graph paper and design text books

With my new portfolio design finished and live, it’s time to catch up on writing posts. This post documents the design process I worked through in creating this website.

As I mentioned in my last update on what I’m doing, I really wanted to up my wider design knowledge and put this knowledge into practice. So, I spent some time studying grid layouts and typography, getting stuck into two books in particular:

These two books really forced me to consider the portfolio layout in detail. Elam’s book is quite theoretical, which is a good thing when you’re learning a new subject, while Boulton helped me consider the grid theory in terms of the web.

Red grid overlaid on a poster for the Institute for Architecture and Urban Studies
Page 43, Kimberley Elam’s ‘Grid Systems’

Specifically, Boulton’s chapter on layout helped me to consider grid layouts that work aesthetically yet always keeping in mind that I’d eventually have to turn the grid design into code for a WordPress theme.

Mark Boulton's grid layout for De Staandard website
Page 235 in Mark Boulton’s ‘A Practical Guide to Designing for the Web’

To work through this process, I chose the grid960.gs system, which is a set of sketch sheets, HTML layout generator and CSS with consistent measurements that helps streamline web development from design through to coding.

Sketching

With a content plan for the portfolio already in place, my first step was to sketch out the key page templates required using Nathan Smith’s sketch sheets:

  • Home page
  • About page
  • Portfolio index
  • Portfolio item
  • Blog index
  • Blog post
  • Contact

Sketch of home page using a 12 column grid
Home page sketch (view full size scan on flickr)

4 sketches of portfolio item template
Portfolio item sketches (view full size scan on flickr)

Wireframes

Next, I grabbed the 12 column 960 template psd, opened it in Pixelmator and drew wireframes of each page template.

Back using Boulton’s chapter on layout, I used his advice on the Rule of Thirds:

“Photographers have used the Rule of Thirds for years, who borrowed it from, yet again, classical artists and architects. The theory is simple – which is why it’s easy to apply in your day-to-day design work. Divide any workspace, or layout, into thirds horizontally and vertically, and align key focus points of your composition to where the lines intersect.”

A web design at 960px wide breaks down nicely into 3 columns of 320px each. With a 10px gutter either side of each column, you now have 300px wide blocks for your content, which, again, is a perfect number to further sub-divide by 3 (giving 100px blocks).

In this closeup of the home page’s top left corner, I used the Rule of Thirds on the horizontal spacing. You can see the different elements—title, navigation bar, summary text in bold and the call to action buttons—aligned to the grid at units of 50px or 100px.

Home page wireframe with grid overlay showing alignment of key sections based on the Rule of Thirds

You can also see the content blocks on the portfolio page arranged in 3 columns, each block 300px wide and 300px high:

Portfolio index wireframe with grid overlay - the content boxes are 300 pixels wide

In summary

You may wonder why it’s worth going through this detailed grid design process. Is it too detailed? Should you just fire up your image editor and dive in?

Everyone has different ways of working—and this is a personal braindump of the thought processes I’ve worked through—but I think using grids is a valuable exercise, particularly if you find the visual side of web design difficult.

By using grids, and thereby focusing purely on layout, alignment and whitespace, you’re simplifying the visual design process. Separating layout from, say, colour and typography, reduces the number of design elements and choices you make at any one time. You can see the effect of small changes more easily and adjust as you work along.

Ever have those times when you stare at your design and think ‘this doesn’t look right’ but you struggle to identify the cause? Focusing on layout and whitespace makes it easier to deal with these problems. Something doesn’t feel right? Check your units of measurement and re-align it. Does it ‘feel’ right now?

An organised layout based on grids, using consistent measurements, can begin to feel like a good web design – even before you introduce colour and type.

  • Good post – I’m a big fan of the grid approach myself 🙂

    Something I’ve been looking at recently is how the grid can be adapted to work with different browser window sizes and different devices – there’s a couple of great articles on A List Apart that might be of interest:

    http://www.alistapart.com/articles/fluidgrids/
    http://www.alistapart.com/articles/responsive-web-design/

    • Thanks for the comment Russell. Some useful articles there. It’d be interesting to hear how you’re handling grids across the different devices.

      Must admit I cheated a little for this site – used the WPtouch iPhone Theme plugin, which does all the work!

  • I have to admit that up until now it’s been a case of providing different layouts for different devices and using the WP plugins, but I’m playing around with the flexible/responsive idea as it seems a good possible solution for the future.