Ordering Disorder: Grid Design for the New World (talk by Khoi Vinh, 12/03 @ 12:30PM)

March 12, 2011 | 21 notes

As the New York Times’ Khoi Vinh acknowledges at the start of his packed-out talk, “thanks for coming to hear me talk about lining things up”. Grid systems are at the sexier end of the melting pot of glamour that is page layout, so it was unsurprising that enough attendees cared to fill up Ballroom A during lunch. Vinh’s talk in 2006 on the same subject was famous for its impact, so I was quite excited to hear him revolutionise everything I thought I knew about grid-based design.

He kicked off with a slide of a single dot in the middle of the page. It was joined by a second dot, seemingly randomly placed, which he then used to demonstrate the power of grids by revealing a column-based grid behind the two dots, with both occupying the gutter space between columns and becoming linked and ordered in the process - very clever.

Vinh took us through a history of grid-based design, highlighting the brick as the “first grid to matter”. The brick was shaped around the proportions of the human hand and allowed multiple people to collaborate. Bricks build walls, walls build grids. This is what designers mean when they talk about beauty and harmony.

In terms of websites, a grid allows us to organise information. We use a 12 column grid consistently across guardian.co.uk and it helps users predict where to find information and makes it trivial to add new, consistently-located content. Vinh suggested that the simpler the grid, the more effective, and that strict adherence to the grid can impact on user experience. Again, this reminded me of Jon Dahl’s talk yesterday on Programming & Minimalism, where he suggested that Orwell’s rules of linguistic economy could be applied to computing concepts too.

Vinh suggested that obsession with mathematical purity in grid design was perhaps a little pointless, as some designers overexert themselves trying to implement the Golden Ratio or the Fibonacci Sequence. Instead, he suggested, the rule of thirds (as used by photographers) was generally more useful.

Most interestingly, Vinh said that when designing a page layout, an ad unit could be the most helpful element to work with. An ad is a non-negotiable element in the design, around which you can build a grid. This blessing in disguise allows designers to throw away combinations of columns and units that don’t work. It can also help to produce a dominant ‘side’ of the page to focus readers, although ads are usually positioned outside of this, leading to what some call “right column blindness”.

A little maths followed as Vinh outlined some of the ways to calculate typographical concepts like measure, rhythm and baseline grids, but soon we were back to fundamentals - the grid covers the whole page, he said, but there was no need to fill it all.

There was a reason that Vinh’s 2006 talk was so popular and there was a reason he pulled in a large audience today. With more and more concern being shown to the challenges and advantages of presenting information digitally, it’s more important than ever to learn the lessons available to us from hundreds of years of print and industrial design, where these problems were solved a while ago. The theme from SXSW this morning suggests that while digital and interactive design is a brave new world, it’s not too smart to be taught a few things from the one that preceded it.

- Matt Andrews