Non-Grid Websites

February 4, 2008 7:35 PM

What are some good website designs that subvert the "grid" system, or just don't make use of grids?

I've been reading a lot about how grids are the best way to design websites; however, a lot of the websites cited as great grid designs all look rather same-y to me.

I'm interested in looking at some website designs that either subvert the conventional grid wisdom, or just don't make use of grids at all. Circles, triangles, curves, whatever - so long as it's not "griddy".

posted by divabat to computers & internet (7 answers total)

A List Apart has a good article on this subject.
posted by Zephyrial at 8:02 PM on February 4, 2008 [1 favorite]

The grid system that most people are discussing now isn't so much about look but more about an easy way to align objects and cut development time based on easy math or block systems.

The web deals in squares. To be truely anti-grid you need to get out of HTML.

Designing for the web via HTML is inherently gridy and anything that doesn't appear to be gridy is faked to look that way. The primary reasoning behind grid layouts on a larger scale is the organization of content. If that's not an issue or if your content is more of static nature, you have a bit more freedom to let the creativity evolve.

You can, of course, fake it and overlap this or that, slice things up correctly and create an organic looking product in the end. However, to be truely organic in flow you have to seek alternative methods such as Flash.
posted by travis vocino at 8:11 PM on February 4, 2008

I think some clarification is in order. In graphic design, the use of grids has to do with layout and placement, not visual shapes. So you could have as many triangles and squiggly lines in your design as you wanted, and as long as the overall structure adhered to the grid guidelines, the assumption is that it will look decent.

In web design, some make use of grids to align columns, borders, text and images in a very structured, boxy style. I think this stemmed primarily from the blogging templates that everyone started using in '02.

So you're looking for non-boxy designs, not non-griddy ones.
posted by lychee at 8:17 PM on February 4, 2008

First site that came to mind was script.aculo.us. You're not gonna find a lot of examples using HTML, since HTML is only good at drawing rectangles.

And lychee is correct in pointing out the important distinction between boxy and griddy. Grid-based design is more about imposing a regular rhythm between elements (structural, whitespace, type, etc.) than the use of any particular shape.
posted by Hildago at 8:51 PM on February 4, 2008

There are various ways of getting text to wrap around non-rectangular objects in pages. Or rather there aren't, but there are ways of faking it...
posted by AmbroseChapel at 9:02 PM on February 4, 2008

sofake does some amazing stuff with flash that isn't griddy in the least. See matthewmahon.com, for instance.
posted by wemayfreeze at 9:14 PM on February 4, 2008 [1 favorite]

Jonathon Yuen. Don't miss his slightly dated, but still lovely Memoirs from Hijiyama.
posted by juv3nal at 12:27 AM on February 5, 2008