Website Design Layout Using Grid Systems

Posted by Martin White

Grid systems are the back bone of layout and graphic design. They are the (usually) invisible grids, who’s lines and axises our designs (should be) based upon.

Grids can be as elaborate or complicated as your imagination allows, but a set of rows and columns of equally sized and spaced grid ‘squares’ is the basic theory which holds it all together and the aspect we are going to look at here.

In this explanation I have used photoshop to create a simple 3 column web site design based on a very simple 6 column grid system.

6 columns? I thought you just said it was a 3 column design?!

Well in it’s finished state and with all visible grid lines removed it is in it’s simplest form a three column design, but the sizes and shapes used were created over a six column grid system.

Enough chatter here’s the basics.

The design was made to work on a minimum screen resolution of 800x600px, so i’ve gone comfortably under to 750px wide to allow for scroll bars etc.

This is the finished design with all visible guides and grid removed:

website-01

And this is the grid used to create the design: (the pixel dimensions and arrows here are just for the purposes of this demonstration.)

At a width of 750px it was very easy to divide by six and make 6 equally sized columns of 125px each. (750 divided by 6 = 125)

*One reason why i didn’t go for a more standard 760px wide.

website-grid-00

Here is the same grid over my design.

As you can see, the 3 columns (the lefthand navigation area and the 2 content text columns) fit exactly into the grid.

The ‘gutters’ between the columns were created by subtracting (in this case 20px) from the edge of each text column.

Although we are arranging the text content 20px from the edge, the containing column still remains a neat 250px wide.

So why three 250px wide columns?

Well, firstly i want the layout to have 3 equally sized columns as to obey what is called ‘the golden ratio’, which a brainy Ancient Greek discovered and states that the human brain finds a design of 1 and 2/3rds particularly pleasing to look at.

So the first thing to do was to divide the total width by three, which gives me 250px (750px divided by 3 = 250px – which, ‘detail fans’, is equal to 2 of the 125px columns from the original grid!…more on that later.)

Once divided, this design obeys the golden ratio principle by placing of the division between the lefthand menu section and the 2 column text section right on the line of the golden ratio (1/3rd from the left edge, leaving exactly 2/3rds for the content area.) – (1 and 2/3rds)

Below you can see my design with the 3 250px wide columns shown.

You should also be able to see the combination of 2 of these columns to for the 2/3 (500px) wide column of ‘the golden ratio’ containing the text content.

website-arrows-02

And again with the full six columns showing.

Can you see the pictorial images i the bottom of the left hand navigation section?

website-arrows-03

You can see that even though the main design was based on 3 columns, the original 6 columns are still a useful tool in laying out this design’s elements.

And back to the finished design.

website-01

BrightLemon