Grid it! - taming the page layout

Composing to a grid

So I’ve just returned from @media2007 in London, my head brimming with new ideas and creative energy. The event was a blast and has indeed, among other things, acted as a catalyst to finally get this very blog started.

One thing that popped up in quite a few presentations was the concept of aligning your page design to a grid. Following a grid for layout purposes is certainly not a new idea in general - in fact, the technique has been around for a while in print. Whereas the idea of designing in adherence to a rigid system may seem highly constraining on first sight, it actually allows for a lot of flexibility and clarity during the creative process. Knowing the desired proportions and relations of different elements to each other throughout the design already answers many questions – no more “Hmm, where should this go…” or “I guess a spacing of 20px looks about right here”.

Instead of having to calculate proportions and distances again and again, you can rely on your grid to guide you towards the right answers. On top of that, a unit-based grid design has a very modular feel about it. As content comes and goes, you can make flexible use of your layout units, confidently rearrange elements for different documents and still maintain the same ordered and recognisable visual language throughout the pages. A great example for this kind of flexibility is Trout’s company website: if you navigate around the page you will see how neat a grid-based design can be.

Learning to use the instrument

Even though the technique is an old hat in print design, its popularity as a tool for web developers has only recently spread beyond a small circle of minds – no doubt helped along by inspiring articles such as Mark Boulton’s “Five Simple Steps” tutorial and Khoi Vinh’s excellent case studies. Others, like Cameron Moll and Wilson Miner, have taken up the torch and carried it a bit further along the way, while the canny David Yeiser came up with a way to brainstorm grids in their early stages by using humble spreadsheets. Who would have thought of Excel as a designing tool? On top of that, Mathew Pennell provides an excellent web-based tool for the same purpose. Andrew Ingram even wrote a script for Photoshop CS2 called GridMaker, which is a breeze to use.

There really is just one rule to make grid design work: align everything. This is simple enough, but sometimes it can be hard to maintain and in a few cases the layout will have to follow the grid more than you might like. In any case, after the grid has been created (a process which has been covered at length by Mark and Khoi), everything needs to be set according to this framework. The reward is a visual harmony that pleases the eye – even more so if the underlying grid was designed in track with the golden proportion.

Designs can become especially appealing if special elements “break” the grid in a carefully arranged way. This can be a powerful method to create a focal point and direct the reader immediately to the most important information on the page, but it certainly shouldn’t be used as an excuse when your layout doesn’t abide by the grid, and you’re looking for an easy way out.

Dancing to a rhythm

The devil is in the details, and mastery of those details makes for the dot on the i. So you have set your page elements (such as header, navigation, content, features, footer and what not) to your grid and are quite happy with the result. But you can take it another step forward, right down to where most of the stuff you want to say is hidden: your lovely paragraphs of text.

Richard Rutter started to introduce the idea of a “vertical rhythm” for text over at 24ways.org, and the ubiquitous Mark Boulton lately refined the concept with his approach of “incremental leading”. Summed up, both of them aim, again, at providing the reader with an invisible and yet comfortable order on the page. This is achieved by aligning not only text blocks, but instead every single line to the grid. Whether you call this method a “baseline grid” (Wilson Miner) or “vertical rhythm”, the outcome makes calculated use of whitespace and should look like this (courtesy of Mark Boulton):

Line heights in proportion to the respective font sizes help guide the reader through the hierarchy of the page and make for an agreeable reading experience.

Summary and further reading

1. Using a grid as a solid base for your page layout helps to create a consistent design that is visually pleasing
2. Align everything!, even your humble lines of text
3. Break the grid to create focal points, but use this sparingly

If this article has piqued your interest, you should continue reading a few of the excellent essays that are linked on webfactory’s del.icio.us account (tag: grid), or drop us a line with your thoughts!