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.
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.