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 1024×768 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.        

14 Comments on "Grids In The Real World"

  • michael says

    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.

  • Pedro Monteiro says

    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

  • Antonio says

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

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

  • Antonio says

    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.

  • Raphy says

    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.

  • Antonio says

    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.

  • chris says

    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?

  • Antonio says

    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.

  • Steve says

    I’m a bit miffed…

    I’ve tried the site on both Safari and Firefox—your text doesn’t tend to sit on the baseline,
    nor does it in your screen-shot example…

    It does atleast sit on the first line.
    After that, having such a prominent visible
    baseline seems to throws the eye off the
    baseline of the type.

    Sorry to disagree.

    Anyway be good to hear your side of it.

    Lot’s of nice stuff on the rest of the site though.

    Enjoyed reading it!

  • Steve says

    Just completely ignore the above, I thought the end result had a visible baseline grid…

    silly me

  • Antonio says

    Steve, check out this other post I wrote about grids. It goes into more detail about the baselines.

    http://www.aisleone.net/2007/design/designing-grid-systems-for-flash/

  • christopher says

    what’s with the overuse of “/” in the titles/subheads of UK design?

  • jimbo says

    [quote]what’s with the overuse of “/” in the titles/subheads of UK design?[/quote]
    christopher–look at the client’s logo and business name–do you see “/” there?