Grid based approach to improve your designs

Monday, 7 December 2009

This article looks at using the grid based design approach to improve your design efforts. Using a grid will provide clarity, structure and balance to your designs. There now exists a range of easy to use tools that can be turned on and off at will to guide you in the process of designing with a grid.

The idea of using a grid based system has been around for some while now, Smashing Magazine did one of their usual mega-link articles over two years ago now. But there are still a good reasons to have another look at the grid based approach. If you are like me and you are more on the development side and most of your design ideas suck most of the time it is a process of continual improvement. We spend most of our time concentrating on how things work and not on how they should look. The problem is that design, clarity and presentation all matter to the user experience. So, you should care.

If you are like me and work for a small team, don't have the luxury of a design team or it's just not feasible to have a mock-up for each page you work on, you will be making design decisions and trade-offs all the time. The use of a grid is a simple tool that will improve your design work. Remember it's just a guide, so you can shuffle things around to your liking. But you will find that the use of a guide as a beginning tool-block to lay out your design is a clever and practical way to improve the end result.

There are tools out there available to make designing with a grid very easy. These are simple links that can be dragged on to your toolbar and will apply the grid over the top of your page. They allow you to customise the grid and tweak your designs as you work on them. Firebug + grid = good idea! has a jQuery based grid system which sits on a tab at the side of your page and has many options for displaying vertical and horizontal bars. It is my preferred choice as it looks great and the option to hide it without closing is helpful. As well it contains most of the options you need without being too cluttered.

The next is Allan Jardine's Grid javascript bookmarklet. Grid is highly customisable and has a full feature set. It allows you to set alignment, gutters and margins.

The last one is the simple, easy to use grid960 grid overlay bookmarklet. This has a 12 and 16 column option and an option to set the opacity. This is a good starting point if you only want to use the grid as a rough guide or you want to do some quick tweaking and don't want to worry about setting too many options.

If you want to read up more on the topic and how you can use the grid system to improve your designs I suggest you check out the 960 grid system site. The site has a good deal of showcase sites and links to other quality tutorials and resources.

The grid overlay is an easy way to make big gains in your overall site design and using these unobtrusive tools makes it easier for you to apply the grid approach to your next design.

If you have a grid designed site that you would like to share or if you have something to share on the best way to use the grid based approach let us know in the comments section below.
blog comments powered by Disqus