Why Use a Grid to Design Your Website?

Web design layout is generally measured in columns; common layouts include three or two columns. There is however much more to consider in good layout design than the mere number of columns.

You will find it much more advantages to visualise your layout design in a grid, a grid that consists of both columns and rows. A grid is not designed to make your design rigid, it can be an excellent tool. Below we will look at some of the benefits of using a grid system.

Common Practice

The use of grids in design is not a new concept. Interior designers will design rooms with grids. Print and graphic designers design print layouts using grids. If you apply the same grid techniques to web design, your page layouts will look right across multiple platforms and feel right to your customer base.

Restrictions in Creativity

It is a common misconception that using a grid will be boring and that your designs will begin to reflect this. I would certainly agree that if you began to use a grid as a means of filling in squares with something, it would indeed become quite boring. To use a grid effectively, use it to help organise the space you have rather than just filling it up.

Two best practices:

1. Create a standard. It should have a fixed number of sub-divisions, create as many as you think you will need; and then stick to it. The temptation could be to later add random lines to fit around your design. Try to avoid this as the benefit of a grid is its uniformity.

2. When using a grid place your web site elements on the grid lines, make sure they fit the width and height of your grid lines. The best website designs use the grid in a balanced manor, not 100% symmetrical.

Once you begin using a grid, you will find prototype design can be executed much quicker. Web development becomes an easier process as you avoid a lot of cross browser issues, as the browsers also follow a similar grid system. Take a look at some of your favourite websites, it is likely they too follow a similar grid system even if you can’t see the grid at first glance.

An excellent grid to use in web design is the 960 grid. It was developed to streamline both design and development by providing commonly used dimensions, based on a width of 960 pixels.