Twitter Flickr Tumblr Pinterest

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.        

14 Comments on "Grids In The Real World"

  • michael says

    nice job… one minor thing, the “Our/” on the home and the ser­vices 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 sub­di­vi­sions to place the logo. The 14 pixel lead­ing to have every other line on the base­line is really good also. Thank you so much to have shared this. All the best

  • Antonio says

    Michael, thanks for notic­ing 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 Pho­to­shop to lay every­thing out and if I need to illus­trate any­thing I use Illus­tra­tor but a major­ity 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 — espe­cially con­sid­er­ing the sub­ject mat­ter. As a poten­tial cus­tomer, I’d want to be inspired and excited by the cre­ativ­ity and expe­ri­ence of the own­ers. I don’t get any of that here.

  • Antonio says

    We’ll Raphy we all have our opin­ions but you really don’t under­stand the tar­get audi­ence here, which you def­i­nitely aren’t. This com­pany doesn’t orga­nize the local bingo game, they spe­cial­ize in high end events, mainly for hedge fund groups. These mil­lion dol­lar orga­ni­za­tions don’t care about how pretty are the dec­o­ra­tions, they care about who you know and if you can get Jerry Sein­feld to host the party.

    As for their expe­ri­ence, it’s all there on the site.

    I wish there was more pho­tog­ra­phy but unfor­tu­nately there isn’t. The com­pany wanted a site that explained their objec­tive and their ser­vices and that was well designed. The design isn’t life chang­ing but I think this site achieves that, espe­cially if you com­pare it to other event group sites.

  • chris says

    hi

    this arti­cle is great, im a prod­uct designer but ive been vis­it­ing aisleone pretty much every­day for a good year or so,some of the stuff is really inspir­ing. You talk a lot about using grid sys­tems. Is there a web­site / disk full of grid sys­tems that you can use to design for web / print? It would be good if you could load a grid tem­plate into pho­to­shop and design on that — dif­fer­ent tem­plates for dif­fer­ent uses. Are such things available?

  • Antonio says

    Chris, if you check out this arti­cle I wrote, there is a PSD that you can down­load with a grid sys­tem already setup. This is per­fect for web based designs. But for the most part, I cre­ate my own unique grids for each project since they all require dif­fer­ent structures.

  • Steve says

    I’m a bit miffed…

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

    It does atleast sit on the first line.
    After that, hav­ing such a promi­nent vis­i­ble
    base­line seems to throws the eye off the
    base­line of the type.

    Sorry to disagree.

    Any­way be good to hear your side of it.

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

    Enjoyed read­ing it!

  • Steve says

    Just com­pletely ignore the above, I thought the end result had a vis­i­ble base­line grid…

    silly me

  • 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]
    christo­pher – look at the client’s logo and busi­ness name – do you see “/” there?