Then, a few months ago, in preparation for a workshop at Carson Systems’ Future of Web Apps conference, I started thinking about how to visually represent the problem-solving process that I go through when designing new interfaces with grid layouts. At first, I started thinking about disassembling and then reassembling one of the designs in my portfolio. But that seemed as if it wouldn’t be quite satisfactory, as I wanted the ability to talk openly about all the different factors that go into a design solution, without worrying about offending colleagues or clients.
What If…
So I hit upon the idea of a hypothetical redesign of an existing Web property. That approach would allow me to tackle a set of real world design problems that would be familiar to lots of users, without having to tread too lightly on proprietary information or relationships.
When I started casting about for an ideal candidate, there was an obvious winner in a high-profile portal Web site that’s familiar to millions of Web surfers — rhymes with “ha-hoo.” That site has an ideal mix of many different kinds of information design problems: robust navigation, multiple content types, consumer branding, a mix of editorial and marketing contents. You couldn’t really ask for a more well-rounded challenge.
In order to avoid provoking the company’s legal team, however, I decided to make an arbitrary name change to the somewhat ridiculous but still similar fictional brand Yeeaahh!. With that settled, I spent a few evenings poring over the typical content available on the home page as of January of this year, and then reconstituting almost all of it into a new, grid-based layout. (I was also helped enormously in the iconography department when I was lucky enough to get permission to use the beautiful Oslo and Oslo Buzz icon sets from the very generous Josh Williams at IconBuffet.)
To show the flexibility of the grid that I developed for the home page, I also tackled the front page of the company’s personals property, and had plans to tackle even more pages from its family of Web products, but time got the better of me and I had to stop there. You can see the home page and the personals page at Yeeaahh.subtraction.com.
Caveat Designer
I should note that the final designs, if ever launched, would be poorer click-through performers in various ways, I’m sure, and that the few areas where I took creative license with the original layout are bound to introduce new usability problems, as well. None of that was the point, though. The idea wasn’t so much to improve upon the originals, as it was to use the redesigns as a vehicle for illustrating the various methods and principles that I use in grid layouts.
As well, I’ll add that a grid-based layout is not meant to be a solution that precludes the entirety of a design process. This approach is not a replacement for educated guesswork, best practices research, instinctual creativity and testing, testing and more testing. Keep in mind, while reviewing these designs, that they focus only on one part of that larger design process, and that I readily admit that they wouldn’t fly in the real world without some more consideration and validation than I invested into them.
Opening the Kimono
I originally presented these materials in a three-hour workshop in London in late February for the aforementioned Future of Web Apps conference. Afterwards, I abridged the deck and incorporated feedback from fellow grid enthusiast Mark Boulton as he joined me to present it again in a highly compressed twenty-two minutes at last week’s South by Southwest Interactive festival.
Based on anecdotal feedback, both sessions went over fairly well, I think, and I was urged by several attendees of both sessions to make slides available online. That’s incredibly flattering of course, but for reasons I can’t elegantly articulate, I’ve never felt very comfortable about making the slides from my talks available for download.
However, I’m trying to come around on that point. After some deliberation, I made the London presentation available to those who attended my workshop — but at a secure URL. I figured they’d gone through the trouble and expense to sign up for my workshop, and I should give them something lasting to help them get the most mileage from that session — but that I shouldn’t too readily offer those materials to everyone else, as well.
South by Southwest though is a different story. That presentation was composed of roughly the same material, but there were so many more attendees who came to see Mark and myself talk, that it doesn’t seem worthwhile to try and secure the download location. So I’m making it available here. Have at it, anyone who wants it — you can download the slide deck at this URL, below.
One final note: if you use these techniques to create a grid-based layout of your own, well, please drop me a note with a link where I can see your work. I’d get a kick out of seeing these ideas take hold in the world outside my office.
+