The Grid

Designers have used grids to create balanced, well-structured designs for ages. Luckily for us, grid-based design lends itself easily to making web site sketches.

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?

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.
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 theGolden Mean), take your site width and divide it into thirds until you have the grid you need.
To find a grid, look on the internet. One particularly popular grid can be foundhere.
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.
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

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.
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.
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.
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.