Grid-Based Design

What do I mean by grids?

Grids are the underlying models designers use 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.

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.

What does the grid do?

It acts as a framework for you, dividing the page up into rows and columns that you can use as the content needs. The main advantage is that once you have established your grid, you know how to size each particular element in relation to one another. This way you can balance your designs from page to page, structuring the content according to your framework. This means you will know where new content will go when you update your site later: you have a system for dealing with it, all thanks to the original grid.

Visitors also benefit from grid-based design because it helps order content and the page as a whole. This means the site is all the more usable, elegant and organized. Cluttered layouts are hard to navigate; grids help prevent that from happening.

News sites are a great example:

How do you design with a grid?

  1. Read your content and get to know the feeling and atmosphere you are trying to get across. I can’t emphasize this step enough; it is imperative that you get a true sense of what it is you are designing.
  2. Create or find your grid.
    To create a symmetrical grid, start with a blank file, then divide the page up into halves, then fourths, and so on until you create a grid of sufficient sophistication to handle your needs. Here is an excellent walk through of that process by the inimitable Mark Boulton.
    To create a grid based on the Rule of Thirds (a rough approximation of the Golden Mean), take your site width and height and divide by thirds until you have the grid you need.
    To find a grid, look on the internet. One particularly popular grid can be found here.
  3. Apply your grid to all designs that need it.
    Use the underlying grid to not only order the single page, use it to create a pattern of relationships between related pages.
  4. Break the grid when you really need to.
    There is something to be said for occasionally busting loose and breaking your grid. It adds tension and impact to the overall design, which might be just what your design needs.

Some tips for constructing a grid for web design

  1. Use the pixel as your base unit of measure, or better still a block of pixels. I like to use a 5×5 pixel square as my base unit. That way when I go to code my grid later, I don’t have to remediable random numbers. All my measurements will be in units of five.
  2. Remember your user can change how s/he views your page, so make your grids adaptable. Users can make the text bigger whenever they want, so be sure your design is not dependent on having fixed-height text columns. Fixed-width is fine, although you may be making things difficult for people on other devices like smart phones.
  3. The more you stick to your grid, the stronger a visual balance you can create. What I mean is, don’t apply the grid sloppily. Stick to it, aligning everything to it except for the few things that need to be out of alignment for the design’s sake.
  4. Be sure not to stick to one pattern of content arrangement, it can get really boring after awhile. You just have to develop sensitivity to this. The more you work with grids, the better you will be at playing them like a harp, finding different harmonies as you need to.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s