Gavin Wray

Designing with grids

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 wanted to develop my design knowledge and put it into practice. I spent some time studying grid layouts and typography, getting stuck into two books in particular:

These two books 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. Boulton’s bookhelped 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

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 system. This contains sketch sheets, an HTML layout generator and CSS with consistent measurements to help streamline web development from design through to coding.


With a content plan for the portfolio already in place, my first step was to sketch the content type templates 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 image on flickr)

4 sketches of portfolio item template

Portfolio item sketches (view full size image on flickr)


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 nicely into three columns of 320px each. With a 10px gutter either side of each column, you now have 300px wide blocks for the content, which, again, is a perfect number to further sub-divide by three (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 actions) aligned to the grid at units of 50 or 100 pixels.

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 three columns, each block 300px wide and 300px high:

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


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

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

By using grids to focus purely on layout, alignment and white space, you simplify the visual design process. Separating layout from colour and typography reduces the number of design elements and choices to make at once. You can see the effect of small changes more easily and adjust as you work.

Ever have those times when you stare at your design and think ‘this doesn’t look right’ but you don’t know why? Focusing on layout and white space makes it easier to deal with these problems. Something doesn’t feel right? Check your units of measurement and re-align. Does it ‘feel’ better 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.

Content © 2021 Gavin Wray
Athena Jekyll theme by Diana Mounter

Twitter · LinkedIn · SoundCloud · GitHub