Grids In The Real World
March 3rd, 2008It’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.
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.
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.
michael
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
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
Michael, thanks for noticing that. I’ll fix it.
The Ad Mad
Really nice and tidy, these grids really work. What soft do you use for web design?
Antonio
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
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
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
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
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
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
Just completely ignore the above, I thought the end result had a visible baseline grid…
silly me
Antonio
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
what’s with the overuse of “/” in the titles/subheads of UK design?
jimbo
[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?