say something

Grid Design, A Classic Beauty For Whitespace Freaks

5Thirtyone Website

One of the concepts in web design I like most is the grid, gridified design. Popularized by Grid-Posterboy Khoi Vinh the beauty of the grid finds its way every day more in modern web design. There are numerous examples of great grid design. Recently a grid CSS framework was released and many designers offer tools, aids to simplify grid design.

Whitespace Rules Grid Design

A central element to awesome grid design is whitespace. Whitespace and correct padding. Without those your grid-coolness will soon look cluttered and horrible. Both Mark Boulton’s and Derek Punsalan’s design excel in whitespace and look very spacious. A notable mention for the whitespace factor in grid design goes to the unfinished Avalonstar.

Gridified Or No Grid

Many designs online look like a grid but aren’t. One of the specialists in this category is Brian Gardner who released two grid-like themes, Revolution, the premium WordPress theme optimized for online newspapers and magazines, and Vertigo. Another example of an almost gridified design is the recently mentioned Skysports site.
But the trained eye will immediately recognize that the grid goes further. The grid is a game of pixel correct widths and can be found in the smallest details of a design. Who else could explain the finesse of grid design better than Khoi Vinh in every grid lover’s manual, Grid Computing… And Design.

After the jump full length screenshots of mentioned grid designs.

5ThirtyOne, Derek Punsalan

Derek Punsalan’s 5ThirtyOne

Subtraction, Khoi Vinh

Khoi Vinh’s Subtraction

Jeff Croft

Jeff Croft

Mark Boulton

Mark Boulton

AIGA/NY

AIGA/NY

Avalonstar, Veloso

Avalon Star

.

6 people says things!

  1. This article in 7 words:

    Grids go both ways. Here’s some screenshots.

    These are the most featured websites on the most overdone lists. You guys are better than Smashing Magazine, please don’t stoop :)

    By Connor Wilson on August 27, 2007 6:08 pm

  2. Dude, it’s Avalonstar is one word.

    By Ryan on August 27, 2007 7:20 pm

  3. Corrected, dude!

    By Franky on August 27, 2007 7:25 pm

  4. Great list and very timely; I was looking for exactly this yesterday to try out my own grid solution.

    By Andrew on August 30, 2007 5:48 am

  5. [...] I’ve used Brian’s Blue Zinfandel a lot, as the code is very clean and easy to customize. I have never used Michael Pollock’s themes, but I am so impressed with his stuff- I’d love to play with his Zeke theme. There a ton of others that I stand in awe of such as 5thirtyone and Subtraction that are using grid based design. [...]

    By 5 things about design and me at Randa Clay Design on August 30, 2007 6:32 am

  6. [...] Grid Design, A Classic Beauty for Whitespace Freaks - Wisdump. [...]

    By 65 Resources for Grid-Based Design | Vandelay Website Design on April 1, 2008 1:48 am

  7. Subscribe to comments via RSS!

    What do you think?