Version 2: Grid

Monday, October 3, 2005 at 2:15 pm | Comments off

Ok, so I promised to explain the grid system used for this site. This site was built using a strict 6 column grid, with each column being 125px wide. The basic grid for the site looks something like this:

Website grid

Okay, so now we know we've got 6 even columns to work with. Most pages on the site use a 4/2 grid layout, where the main column takes up 4 grid sections while the other column (sidebar) takes up the remaining 2 sections. Lets take a look at the homepage, with the grid overlaid on it. Notice that I've highlighted the important grid lines in green. Also note that the navigation bar follows the 6 125px columns.

Homepage grid

Not every page adhears to the 4/2 grid layout - the archives page uses a 3/3 grid, for instance, as I wanted 2 equal width columns for that page. The important part is not for each page to adhear to the same columns but that each page adhears to the grid.

Archives grid

I'm sure many of you have already noticed the grid design used, but thought it'd be a good idea to point it out anyway. I'll leave you with a few links where you can read up on better explinations of grid systems and how to use them in your designs, as the point of this post was not to go in deapth on grid systems, but rather highlight the grid used for this design.

Comments

Martin Neczypor
October 3rd, 2005
4:57 PM | #

Very interesting, the grid is quite noticable on the site, which I think adds to its look and also helps with the ammount of information your homepage/archives have on their pages. Well done, Ryan.

Patrick Johnson
October 3rd, 2005
8:53 PM | #

Yes well this has given me some ideas on the grid layout style for my website, but this is a really well planned grid system!

Nice work :P

Mark Boulton
October 4th, 2005
6:36 AM | #

Good looking grid Ryan. It certainly adds to the legibility, and it's good to see you using multiple column configurations.

Nice one.

Matthijs
October 4th, 2005
5:11 PM | #

Nice explanation of the way you gridded your site Ryan. I do like the new design. One thing I've noticed, while following Mark's series and looking at live examples like yours, is how the way a grid feels depends on other things than the measurement. For example, if you would switch the side column on this page from right to left, it will look wider. Even though it's exactly the same 250px.

Ryan Brill
October 4th, 2005
11:57 PM | #

Mark - Thanks for the kind words... :)

Joerg Petermann
November 20th, 2005
4:37 PM | #

Interesting example for grid system.

Comments are automatically closed after 45 days