Mon 19 Mar
2007
Oh Yeeaahh!
It’s been about a year now since I first started thinking about creating some kind of definitive documentation about my approach to designing for the Web with the typographic grid as my primary layout tool. I spent a few weeks last summer putting a lot of those thoughts down on paper, but nothing much became of them.
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.
Remarks 71 total remarks were added before the post was closed.
Great stuff, Khoi. This was definitely my favorite presentation at SXSW—great of you to put it online where those we weren’t there can see it.
I have to ask: any chance we could see the unabridged, FOWA version of the deck? :)
Those designs are Khoi Vinh all over, I love your style :) Looking forward to checking out the slides. Just incase you don’t mention any books in the slides, can you recommend any good ones with regard to grids in design?
Also, has anyone made any progress on scalable grids / designing using grids in conjunction with ems?
A few of my favorite grid books:
Grid Systems, Elam
Making and Breaking the Grid, Samara
Layout, Ambrose/Harris
19 Mar 2007, 06:42 am
Hello there,
I am an usual lurker here, but I had to come out to thank you for putting the slides online. They are great inspiration source for a grid enthusiast like me :-)
Thanks a million and keep up the good work!
j
Thanks for these Khoi. Now, any chance of a podcast of the talk itself? ;)
Thanks Khoi, looking forward to having a good look at that PDF!
Excellent post - and thanks for sharing your PDF presentation.
Was not familiar with the Grid Approach, so excited to learn more.
Cheers
Thanks for sharing this, Khoi. Like many, I really enjoyed the crunch panel you had with Mark. Once again proving that great design is in the details.
Thank you for sharing this!
A podcast would be nice, but let’s not hope for too much :)
This was definitely one of those sessions that needed an hour.Great work Khoi.
Oh, wonderful! I’ve been keeping an eye out for these, in large part because I wanted to take another look at that grid formula. Thanks for sharing your slides; this was one of my favorite SXSW presentations this year.
Khoi, thanks sooo much for sharing this info. All of us who could not make it to SXSW at least can have an idea of what your presentation was.
I have to agree with Brad Brooks; any hope we can have the podcast :P
Thanks again.
Thanks for posting the PDF. Seeing the progression of the elements, and the trail and error of the units, was very helpful.
Nicely done :)
Outstanding job! I wish this was an hour long session. It was definitely one of the highlights for me.
19 Mar 2007, 02:05 pm
This is amazingly nice work, one of the clearest descriptions of using the grid I’ve ever read. It seems like progress on Mark’s PDF book on grids is stalled (for good?), but this is a fantastic replacement.
19 Mar 2007, 02:14 pm
This is wonderful. Really, Mr. Vinh, when are you going to post the audio recording?
Thanks everyone! I’m not sure if our session was in fact recorded, but even if it was, it may not make much sense unless it was video recorded and you could follow along with the slides, too. Maybe I should sell a DVD of that performance…!
Back to Jeff’s query, way up top: I probably won’t be posting the full deck from Future of Web Apps. I kind of feel like that was for those people who attended the workshop only.
But, I do hope to write a book about this stuff soon, with lots more insight into this process. Stay tuned.
This is fantastic. I’m just getting into web design - learning the very basics - and this will be really helpful as I teach myself. Also, for those who couldn’t attend SXSW, this is a huge boon. Thank you!
Seeing these slides really helps things come together in my mind. I echo Will’s comment about seeing the progression of the elements and how that is a huge help as well. Awesome work!
excellent… i’m excited about a potential book. the web needs its own tufte
Thanks a lot for putting this information up for those who couldn’t attend SXSW. I enjoyed your previous posts on the Grid and I’m currently reading Making and Breaking the Grid, I’m sure this presentation will go along quite nicely with it!
Khoi, glad to see this up, was a great presentation for 25 minutes, and was a lot of fun. That being said, like Lee and others have mentioned, I think with all that’s been said about adapting grids from print, that the web-specific stuff is what most interests me - scalable grids (px+%), more depth on dealing w/ vertical content/reflowing, dynamic layouts, resolution scaling, etc. —I haven’t kept up on the discourse around the topic, is this well tread ground? I didn’t see much of that in the presentation.
BTW, for those interested in grids, there’s only one book you need to start with.
This session at SXSW was certainly one of my favorites from this year - particularly with regards to practical approaches to design. I too have been checking back here often in hopes you would share the slides. Thanks for doing so.
Definitely one of my favorite panels from SXSW. I wish you two had more time to talk about it, but great job.
Leonard: You’re absolutely right, that book is essential. After the interest shown here, I’ll post a blog entry about all the different grid books that I use soon. Muller-Brockmann’s is on there.
In other news, no, I haven’t done any work with scalable grids, though with resolution independent interfaces, that’s the obvious next thing. I’ll look into it, but if you have anything to share on that, please send it my way.
Great presentation - I immediately thought of a project I’ve just put online - it’s all a blatant grid :)
20 Mar 2007, 09:48 am
Thanks Khoi, very interesting and helpful.
@ Jon - I love the design…great!
-Joey
Hey Khoi, you got me all excited about this grid method! I’m about to give a complete design overhaul to three newspaper websites and I’m planning on using the brilliant ideas presented :) Thank you.
Very interesting method. I think I may have been inspired by the same thing (subconsciously) in my web site design, though without ever explicitly knowing about grid design. (It’s a grid, but doesn’t have explicit [at least not conscious] ratios, as per your method.)
Many thanks. This presentation was great, but it went by so fast my notes were pretty incomplete by the time it was over.
you make my day brighter, much much brighter… you rule, man! i was just working on a presentation about the french yahoo! portal proposition and design…and explaining how dull it is… Did you send this to yahoo? $$$
Hi Khoi,
A great presentation with some fantastic tips in there. (I like the box model references.) Thanks for sharing. But I’m always puzzled as to why you only seem to talk about columns in your grids. Surely horizontal divisions are equally important in creating layouts and providing a rational framework for solving visual design problems.
Cheers,
Nick.
Thanks for a great PDF (grids_are_good.pdf some good stuff in there when you are new to working with grids.
Thanks
/Dennis
23 Mar 2007, 03:14 pm
Hi Khoi, as soon as I saw you were presenting this at SXSW I was dying to get my hands on it. I’m delighted to see you’ve made the slides available. Thanks. Can the algorithm you propose for calculating the column unit value be applied to percentage or em based widths also? Again, thanks and great work.
This was by far one of the best panels I’ve ever seen at a web conference. Thanks Khoi for posting the PDF of your slide show.
I also enjoyed the
Web Typography Sucks panel presented by Richard Rutter and Mark Boulton. They had some really interesting ideas about applying horizontal grid lines to create a “rhythm” to your typography.
25 Mar 2007, 11:00 am
Thank you for reminding me of the grid system I’ve forgotten. I really enjoy it.
Cam on…
Great information all of us should understand. Seriously, thanks for providing the PDF.
I have a question about this statement in slide #47.
“In general, we want to
create units in multiples of
three or four.”
Is this due of the traditional aspect ratio of the tv monitor? Or is there an underlying principle of proportion here that relates for other media as well. Why not other ratios?
Thoughts anyone? Just curious really.
Cheers
:B
::B-
The impression I got from Khoi when I heard him say that was simply that number which are divisible by three or four create a plethora of possible layouts. For example, a 12-column grid (which is divisible by both three and four) can be used to create three equal columns, four equal columns, eight equal columns, six equal column, plus a whole ton of unequal column layouts.
A number that isn’t so divisible by three and/or four (like, say, 14) results in many fewer possibilities.
Yes, that’s exactly right Jeff, thanks for clarifying for me. That’s the problem with posting slide decks without accompanying audio; there’s a whole other dimension missing.
sweet stuff, recalls Grid Systems, by Kimberly Elam. And can’t leave out Tufte here.
I’m very impressed by this Grid Systems. I’ve never thought of using this kind of layouts, and this opens a whole new way of thoughts in a webdesign point of view.
Thanks, Khoi, and keep doing this amazing job.
28 Mar 2007, 04:59 pm
Khoi, thank you so much for putting this presentation up for public consumption.
I was just looking over the portion of Andy Clarke’s Transcending CSS that talks about your site and then I stumbled upon this entry!
This is a huge help, even to those of us who’ve been designing for a while.
Thanks again.
29 Mar 2007, 01:23 pm
Many thanks for this fantastic article. What software was used to mock-up “Oh Yeeaahh!”? I would find it useful to see the raw files (excluding the pictures and icons of course) as to see how you made use of the application and it’s align features, guides etc.
I’m definitely more an illustrator than designer, so I tend to get a lot out of your posts on the latter topic. I eagerly downloaded the PDF to find the illustration I did for you was featured. Neat. That was a nice surprise!
Excellent presentation. It’s very helpful. Thank you for posting it.
Most of the presentations I’ve seen on using the grid for the web really turn out to be more column systems than grid systems - i.e. strong verticals, lining things up with the columns of the grid, but not much horizontally. The Yeeaah page in your presentation is like this too - the header & footer are strong horizontal elements, but everything else is jumbly.
Is a true grid layout, with strong horizontal and vertical organization (like the Personals site mockup in the presentation), only something we can do for static pages? Should we give up on it and just be columnar for much dynamic content?
I find grid layouts like the personals layout so much more visually pleasing than columnar layouts like the home page.
10 Apr 2007, 05:33 pm
Thank you very much, Khoi - this is one of the most useful guides by far. Well-written, well-styled, unmistakable. Respect!
If yahoo adopted your design, they might actually have a second chance (rather, a “2.0” chance) to beat Google.
We use a grid framework on our site, but not CSS yet. Still tables, but our design dept. is reworking it.
Thanks for your pdf guide. Your work is an inspiration and Mark Boulton’s. Like to see how you can work this into a fluid or elastic design. Do you plan to write a book about this subject? Cheers
19 Apr 2007, 02:53 pm
Yes, if you can find audio it would be very appreciated. I couldn’t make it to the conference but following along with Mark’s pdf while listening to the podcast was quite effective in getting his very inspiring points. Seeing your wonderful slides I’d love to hear what you had to say as well! Thank you.
I found your presentation posted in slideshare. Thought you’d like to know.
Hi, this is excellent, and thank you for sharing. I am working on my next design using a combination this and the “Web Typography Sucks” techniques. I have a question about the use of rules in some of the grid gutters, which is even shown in your mockup. If you implement the box model the way you indicate on slide 87-88, you can’t use CSS borders as rules in the grid gutters. What is the best practice for doing that? Just fudging the box placement and margins/padding in those instances to make it look right?
I think its a shame that you didn’t follow through with your grid so much in the bottom right. I feel thats one of the areas where consistency in your pattern is most important because the start and end of things are the most noticeable.
Ace idea basing it around the advert measurement however.
Great article. I love getting an inside view of how designers operate (the end result is pretty impressive as well). For once I feel charged up about layout - and have managed to crack not 1 but 2 different website grids this weekend. Cheers!
Great slides. I would have loved to hear that presentation.
It gave me ideas for a restructuring of my own humble site.
Thanks a lot.
Are you aware of the link spam hidden on the bottom of both of the sample pages?
03 Jun 2007, 03:14 pm
The presentation was awesome - thanks for the insight. Going to apply those principles to several new designs I’ll be launching :D
The presentation is great. Thanks so much.
And just so that people interested in this process can see it in action on a live site:
It’s 100% grid design at it’s best.
12 Jun 2007, 06:44 pm
For those interested, the podcast is available at the sxsw interactive archives.. Just scroll down about 3/4 of the page.