Comments on: Looking for skillfully-broken layout grids.

Question: Looking for skillfully-broken layout grids.

nímwunnan — Fri, 26 Sep 2008 07:16:38 -0800

Looking for examples of design that begins with a strong grid but breaks or subverts some of its own rules while remaining legible and user-friendly.

A designer I met once told me that the most useful advice he got in school was to make a perfectly-balanced layout, and then break one part of it. I'm looking for examples of this kind of thing in action -- web, print, whatever. This was almost what I was looking for, but the examples were too divorced from the grid. I'm looking for stuff that has the robust structure of grid-based design while communicating the feeling of transgressing those boundaries.

By: LionIndex

LionIndex — Fri, 26 Sep 2008 07:38:53 -0800

As far as architecture goes, a lot of Richard Meier's early stuff has a quality like that. Specifically, the High Museum in Atlanta, and the Museum of Decorative Arts in Frankfurt.

By: LionIndex

LionIndex — Fri, 26 Sep 2008 09:45:39 -0800

More in depth on the Frankfurt building (but I'm not sure if/how you could apply the thinking to web or other design): The musuem plan incorporates an existing structure on site, which is sort of an old house that's part of the museum. Meier used that structure as the genesis of his design, taking its size and multiplying it into a 4x4 grid, for a total of sixteen squares of the same general dimension as the original house. I belive there was also a bit of an overlaid heirarchy on that grid, so that it was also a 2x2 grid (the 2x2 divisions would be major elements, further broken down into the smaller 4x4 divisions, so that the grid was a 2x2 grid made of four 2x2 grids). The resulting grid aligned with the orientation of the original house, but how Meier broke it was that he overlaid the original grid with another grid aligning with the surrounding streets, which were rotated off the orientation of the house, in the neighborhood of a 10 degree difference or so. The differences between the grids ended up being the circulation cores through the center of the building, as well as other elements. Essentially, the original grid was "about" the building's functional spaces, while the second grid was "about" the circulation.

I don't recall as much about the High Museum, but it's kind of similar--Meier started with a grid, and then "eroded" one corner of it to form the circular rotunda at the entrace.

A similar way to think of the concept that I think you're looking for is what one of my professors called the "cracked-egg partis". You have a very strong graphic element (the yolk - a pure circle) that allows the rest of the design (the white - a sloppy undefined mass) to sort of run ragged, as long as it remains subsidiary to the strong part. With the eroded grid scheme, the grid takes the part of the yolk. I played with that kind of thing all through college. The trick is that you have to make the break be about something - it's quite a bit weaker to break it just to break it.

By: misteraitch

misteraitch — Fri, 26 Sep 2008 09:57:33 -0800

While not an example of design as you perhaps intended it, I think that Georges Perec's novel Life a User's Manual meets your criteria. It was planned to follow a rigid grid of constraints, but in its execution those constraints were occasionally (deliberately) broken. Perec used the term clinamen to denote such a conscious 'imperfection' in an otherwise rigorous (literary) design.

By: jadepearl

jadepearl — Fri, 26 Sep 2008 10:42:55 -0800

There are good examples in Making and Breaking the Grid by Samara.

By: TauLepton

TauLepton — Fri, 26 Sep 2008 11:11:28 -0800

Smashing Magazine has many examples worth checking out. There are websites, table of contents, design elements and more.