Grids In The Real World

age_grid3.jpg

It’s one thing to write about how useful and important grids are for a design, it’s another thing to utilize them in a real world project. I recently designed this site for my wife’s event company using a grid system that I’ve developed that also incorporates a baseline grid. It’s very similar to the grid in my Designing Grid Systems For Flash article, the only difference being the vertical height. The grid is 946 pixels wide to accommodate 1024x768 screen resolutions with baselines that are 10 pixels apart. Since this isn’t a Flash site, and vertical scrolling is acceptable, the height is taller for the pages with more content.

age_grid1.jpg

Using the Rule of Thirds, the grid is divided into 6 columns that are 146 pixels wide and 12 subdivisions that are 68 pixels wide, all separated by 10 pixel wide gutters. The first two columns, or 4 subdivisions, are reserved for the logo. The remaining 4 columns are used for the navigation and the site content. Since there are 4 navigation items to work with each one occupies the width of one column. The area below containing the headers, images and text is divided into two large columns that are 150 pixels wide, a good width for text blocks since I can fit 8-10 words per line making it easier to read. Text is set in Helvetica and styled using CSS. Font size is set to 11 pixels and leading is at 14 pixels creating text blocks that flow well and are easy to read. Using a 14 pixel leading every other line falls on a baseline giving the text a systematic structure to go along with the rest of the grid system. So not only are the images and graphics working together in a cohesive structure, the text is as well, giving you a well balanced and organized design.

age_grid2.jpg

You can view the full site with the grid visible but keep in mind that since all browsers render CSS differently, certain things might be slightly off in certain browsers. It’s best viewed in Safari.

Spread The Love :
del.icio.us | Reddit | Digg | Facebook | Technorati | Google |  StumbleUpon

Posted on March 3, 2008 by Antonio in Design, Grid Systems, Typography.

Tags: , , , , , , , , .

nice job… one minor thing, the “Our/” on the home and the services pages seem to shift a bit when you go from one page to the next.

Comment by michael — March 3, 2008 @ 4:05 pm

Great!!!!! This is really inspiring.

I love the way you use the subdivisions to place the logo. The 14 pixel leading to have every other line on the baseline is really good also. Thank you so much to have shared this. All the best

Comment by Pedro Monteiro — March 3, 2008 @ 7:25 pm

Michael, thanks for noticing that. I’ll fix it.

Comment by Antonio — March 3, 2008 @ 11:47 pm

Really nice and tidy, these grids really work. What soft do you use for web design?

Comment by The Ad Mad — March 4, 2008 @ 2:27 pm

I use Photoshop to lay everything out and if I need to illustrate anything I use Illustrator but a majority of the work is done in Photoshop.

Comment by Antonio — March 4, 2008 @ 3:05 pm

While I agree that the grid work is well done, the site built upon it falls flat - especially considering the subject matter. As a potential customer, I’d want to be inspired and excited by the creativity and experience of the owners. I don’t get any of that here.

Comment by Raphy — March 4, 2008 @ 7:24 pm

We’ll Raphy we all have our opinions but you really don’t understand the target audience here, which you definitely aren’t. This company doesn’t organize the local bingo game, they specialize in high end events, mainly for hedge fund groups. These million dollar organizations don’t care about how pretty are the decorations, they care about who you know and if you can get Jerry Seinfeld to host the party.

As for their experience, it’s all there on the site.

I wish there was more photography but unfortunately there isn’t. The company wanted a site that explained their objective and their services and that was well designed. The design isn’t life changing but I think this site achieves that, especially if you compare it to other event group sites.

Comment by Antonio — March 4, 2008 @ 7:50 pm

hi

this article is great, im a product designer but ive been visiting aisleone pretty much everyday for a good year or so,some of the stuff is really inspiring. You talk a lot about using grid systems. Is there a website / disk full of grid systems that you can use to design for web / print? It would be good if you could load a grid template into photoshop and design on that - different templates for different uses. Are such things available?

Comment by chris — March 7, 2008 @ 3:03 pm

Chris, if you check out this article I wrote, there is a PSD that you can download with a grid system already setup. This is perfect for web based designs. But for the most part, I create my own unique grids for each project since they all require different structures.

Comment by Antonio — March 7, 2008 @ 3:08 pm

TrackBack URL
Subscribe to RSS feed for comments on this post.

Leave a comment

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image