Grid Layouts

Most people tend to think of columns when you mention web design layout. Either 3 or 2 column and so on. But a layout should go much further than this when wanting to design a site. You should be thinking about design in terms of a grid of columns and rows. But before you start feeling confined and rigid in your designs let’s look a little more closely at grids and how they can benefit you.

A website designed using a grid system is a strong foundation for the structure and consistency in a website’s layout. The Grid system was orginally used in print but has since made its way over to the web design information”>web design world.  There are several advantages to using grids in web design, and I will be going through a few of them and discussing the various grid systems you can find out there.

The most common one I have heard and seen of is the 960 Grid System by Nathan Smith. The system was created as an attempt to streamline web design workflow by using common dimensions, based on a width of 960 pixels.
Check it out 960 Grid System

Getting into the habit

I often hear new designers saying that using a grid restricts their design and can be boring. This can often be true, but only if you use the grid as a madate to fill in every grid square with something. The point of a grid system is not to just fill up the space, but more to help organise the space that you have to work with.

Two tricks to help you when using a grid system:

1. Create a grid, or use a common online one such as the 960 Grid System, and then stick with it. Don’t add random lines after you have a grid. The benefit to a grid is the uniformity of it.
2. Set elements on the grid lines, and allow them to  fit the width and height of your grid lines. The most effective designs use the grid in balanced but not 100% symmetrical layouts.

Once you have grasped the understanding of using grids to design your pages, you can then start moving away from rigid grids and creating more elegant websites that work even if you can’t see the grid at first glance.