Grid-based Design

What do I mean by grids?

Grids are the underlying models designers use to compose upon to impose order on the finished composition. They can be visible or not, depending on the design’s needs. Think of them as armatures upon which the designer arranges text and images.

Grids have been used for centuries in print design. They have helped rein in the chaos of the web as well—time was, web pages were built with lots of nested tables and spacer gifs. This situation was not conducive to terribly neat grids, but once CSS became more popular and supported, designers were quick to snap content together this way.

Why use them?

Compositions ordered using such templates are easier to read and view, being more balanced compositionally from page to page. In fact there is a theory known as the Aesthetic Usability Effect where the user perceives the more attractive object as more usable. Take advantage of this phenomenon and polish your designs, make them as well composed and balanced as you can. Things that are better designed are more usable because we expect them to be.

Grids bring visual order and structure to design. Users enjoy a site where there is a rhythm to follow, and having a framework will do that for your site. Once you have a working visual beat, you can occasionally improvise and break the grid to great effect. Plus, the better the user can trust your site structure to reliably guide her around, the more the user is likely to stick around.

How do you create a grid?

We use ratios to create grids. One ratio worth mentioning is the Golden Mean, or 1:1.618. This is a ratio known as Phi, and it is found throughout art and nature, over and again.

Using this ratio makes for some pretty difficult math rather quickly, so instead I suggest you use the Rule of Thirds: take your canvas (in this case, your Photoshop working file) and divide it up into thirds horizontally. Then divide it one again into thirds vertically, and kaboom! you have a grid.

Once you have your framework, you can use the lines to guide your design: put important elements along them, or at the points of intersection.

What if I want a more complicated grid?

Luckily there are a lot of resources for designers out there. I use the 960 Grid System in my professional work. It is simple enough for 1 and 2 column compositions, and supports more complicated 6 and 8 column ones as well. In order to use them, go to the 960 Grid System page and download the templates. You will find the link up in the upper left hand corner. I will be leading a demo using them in class.

Won’t they make my site look boring and rigid?

Not at all, at least if you approach them in a sensitive way. The purpose of a grid is to give you some consistent parameters within which to design. That way, the entire site has a visual consistency that makes it easier to use. You can also break the grid as you need to, perhaps to emphasize a certain content area. The grid is a guide, not law.

Some galleries of grid-based designs


Grid-Based CSS Design

Articles used to write this lesson

960 Grid System
Nathan Smith

Grid (Page Layout)
Wikipedia Entry

Aesthetic Usability Effect
By Ash Towers | March 30, 2010

Aesthetic-Usability Effect
Mark Bouton  |  March 6th, 2005

Five simple steps to designing grid systems — Preface
Mark Boulton  |  June 26th, 2005

Five simple steps to designing grid systems — Part 1
Mark Boulton  |  July 4th, 2005

Grid-Based Design: Six Creative Column Techniques
Sean Hodge  |  March 26th, 2008

Labtime: Work on page designs in Photoshop