Twitter Flickr Tumblr Pinterest Dribbble

Grids In The Real World

age_grid3.jpg

It’s one thing to write about how use­ful and impor­tant grids are for a design, it’s another thing to uti­lize them in a real world project. I recently designed this site for my wife’s event com­pany using a grid sys­tem that I’ve devel­oped that also incor­po­rates a base­line grid. It’s very sim­i­lar to the grid in my Design­ing Grid Sys­tems For Flash arti­cle, the only dif­fer­ence being the ver­ti­cal height. The grid is 946 pix­els wide to accom­mo­date 1024x768 screen res­o­lu­tions with base­lines that are 10 pix­els apart. Since this isn’t a Flash site, and ver­ti­cal scrolling is accept­able, 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 pix­els wide and 12 sub­di­vi­sions that are 68 pix­els wide, all sep­a­rated by 10 pixel wide gut­ters. The first two columns, or 4 sub­di­vi­sions, are reserved for the logo. The remain­ing 4 columns are used for the nav­i­ga­tion and the site con­tent. Since there are 4 nav­i­ga­tion items to work with each one occu­pies the width of one col­umn. The area below con­tain­ing the head­ers, images and text is divided into two large columns that are 150 pix­els wide, a good width for text blocks since I can fit 8 – 10 words per line mak­ing it eas­ier to read. Text is set in Hel­vetica and styled using CSS. Font size is set to 11 pix­els and lead­ing is at 14 pix­els cre­at­ing text blocks that flow well and are easy to read. Using a 14 pixel lead­ing every other line falls on a base­line giv­ing the text a sys­tem­atic struc­ture to go along with the rest of the grid sys­tem. So not only are the images and graph­ics work­ing together in a cohe­sive struc­ture, the text is as well, giv­ing you a well bal­anced and orga­nized design.

age_grid2.jpg

You can view the full site with the grid vis­i­ble but keep in mind that since all browsers ren­der CSS dif­fer­ently, cer­tain things might be slightly off in cer­tain 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?