Ordering Disorder: Grid Principles for Interaction Design

by Khoi Vinh

The grid has long been an invaluable tool for creating order out of chaos for designers of all kinds€”from city planners to architects to typesetters and graphic artists. In recent years, web designers, too, have come to discover the remarkable power that grid-based design can afford in creating intuitive, immersive, and beautiful user experiences.Ordering Disorder delivers a definitive take on grids and the Web. It provides both the big ideas and the brass-tacks techniques of grid-based design. Readers are sure to come away with a keen understanding of the power of grids, as well as the design tools needed to implement them for the World Wide Web.Khoi Vinh is internationally recognized for bringing the tried-and-true principles of the typographic grid to the World Wide Web. He is the former Design Director for NYTimes.com, where he consolidated his reputation for superior user experience design. He writes and lectures widely on design, technology, and

Genres: Design, Website Design, Nonfiction, Web

183 pages, Paperback

First published November 23, 2010

About the author

Khoi Vinh was the Design Director at NYTimes.com for 4½ years until he resigned in July 2010. He is now the co-founder and CEO of Lascaux Co., makers of Mixel for iPad, the world’s first social collage app. Read more or get in touch with him on this page.

Reviews

[Ryan · Rating 4 out of 5]

In reviews on Amazon, Ordering Disorder has been dismissed by some for being overly simplistic, but I thought it was a refreshing read, even for someone who has experience designing a few dozen large-scale websites.

Khoi Vinh is the former Design Director of NYTimes.com and founder emeritus of the excellent design firm Behavior. Reading Ordering Disorder is like sitting over his shoulder and watching him work — albeit on a hypothetical website. Vinh demonstrates how a well-considered grid can be a helpful guide and supporter of creativity, rather than a frustrating constraint. In that sense, it reminded me a lot of Josef Muller-Brockmann's classic Grid Systems in Graphic Design, published more than fifty years earlier.

There were only two things I didn't like about this otherwise excellent book:

- It could have been a little bit more candid in tone. I want to learn from Khoi Vinh's experience, not just from some guy who knows a lot about design. Some more real-world examples, anecdotes, or lessons-learned would have been nice.

- The premise of starting with a wireframe delivered from an anonymous information architect didn't match any experience that I've had professionally. I know this was a book about grids, but Mr. Vinh seemed strangely disconnected to the content itself, which seems like a bad example to set for web designers who, I'm ashamed to say, tend to care more about form (or at least technology) than content anyway.

Regardless, this book is ideal for students or those new to web design, but a fitting refresher for established professionals as well. I hope Khoi Vinh comes out with a more advanced follow-up — I'd be the first to pre-order it.

[Allison · Rating 4 out of 5]

A very well explained book on how to use grids in designing layout. I particularly liked how he gave examples and walked you through on an exercise to design a web page.

[Jess · Rating 4 out of 5]

I have often looked for a book to help me conceptually wrap my brain around design frameworks for the Web and Ordering Disorder accomplished that (for the most part). Although Ordering Disorder was written in a period when fixed width layouts were more popular than responsive design, I still find this book useful as it is explaining some core design principles and practices that can be applied to many different kinds of mediums and design theory.

[spike シ · Rating 3 out of 5]

I believe this guy popularized the already popular grid system back in the heyday, I mean there were lots of cats who jumped on that ship but he was one of the more vocal evangelists at the time (as was Andy Clarke in his Transcendent CSS book, which is excellent). This one might be dated but I feel still relevant for insights into CSS grid based web design.

[Mason Brown · Rating 4 out of 5]

Succinct and useful

[Jasmina · Rating 2 out of 5]

I really expected more from this book. A single 16 units grid design is worth investigating in an article, and just like a "light-introduction-to-working-with-grids" article was this book to read. I guess I was expecting too much in the beginning, hoping to read about many different design approaches, usability and interaction, all under the scope of different grids and design layouts (F and Z layouts, for example).

In my opinion the read was quite superficial even for the topic itself. I skipped a lot of the texts and the book could not hold my attention. It would have been much more interesting to follow the design of the same website through not one but multiple different grid decisions and layouts, and see how it differs, changes and what possible problem/solution situations one might encounter throughout the design process.

If you are new to web design, you might find it interesting as a brief introduction with some good advice on using the 3x3 grid and golden ratio.

[David Hall · Rating 3 out of 5]

I've been enjoying Khoi Vinh's blog posts on web grid theory for years and was pleased to see that he has combined these into a relatively short book. Ordering Disorder is well written and engaging. Being a sometimes jaded designer, I found his philosophy and process inspiring.

One criticism is that he skipped over the use of fluid grids in his approach even though he does mention it in passing. Given that 'responsive design' seems to be the order of the day, I find this puzzling. Also, some may find his examples a little too specific to one design style.

In the end though, Khoi no doubt has a skill for passing on his passion for a subject that could otherwise be dry and brings it alive for the uninitiated. Type or paste your English text here and click on the "Check Text" button.

[Vitor Carvalho · Rating 1 out of 5]

The author tackles the very difficult task that is writing a lasting practical book about web design, trying to make it feel like it wouldn't be outdated in a few years (which I’m afraid it almost always is). There are a couple of good insights on the first pages and on the last ones, and some of them serve as evidence for the fast pacing growing nature of the web.

What really bothered me is a sort of mechanical approach towards web design. More or less half of the book is dedicated to describing the process of designing a fictional website and its grid while disregarding its conceptual and visual dimensions. It seems like a very personal description of one’s process—too personal to really be useful.

[Matt · Rating 3 out of 5]

Beautifully presented, excellently written, but thin on detail and furnished with only one example (albeit a good one). The whole book can be read cover to cover in just a few hours, which is a shame - I've no objection to tight and concise, but this feels a bit rushed and superficial instead. Vinh's design judgement is (of course) excellent, so it's a shame that the reasoning that led to the choices he makes aren't explored in any depth.

Still a thoughtful and worthwhile read, and as far as I know, the only book to properly treat grids for web design as distinctly different from print, with their own constraints, challenges, and guiding principles.

[Stanislav Grinapol · Rating 5 out of 5]

A grid is probably number one tool for Designers, but understanding differences between a static grid and one use for screen could mean a difference between success and failure. Khoi Vinh is able to outline his process of establishing flexible grids for web design in a logical manner in 175 pages filled with diagrams and illustrations.

[Leonard Houx · Rating 2 out of 5]

I was so excited to read this book. But there was just so little substance. Vinh justifies his book, among the numerous other books on grid-based design, to explain grid-design from a web-oriented persepctive. Yet this book offers so little substantial advice, web-based or otherwise, that it would seem to barely enough to constitute a decent article.

[Jeremy · Rating 4 out of 5]

Good review of grid based and basic design principles, as well as designing with an information hierarchy. Fairly practical in that it goes through a 4-template design, using the grid for consistency.

[Anthony · Rating 5 out of 5]

This is a really great guide to using grid-based design on the web.

[Adam Procter · Rating 1 out of 5]

very disappointed found the examples did not adhere to the grid at all frustrating.

[Alex · Rating 4 out of 5]

A succinct, well-written guide to grid design on the web.

[Abe Serrano · Rating 4 out of 5]

Great book on using grids for the web. I had several "oooh, now that makes sense moments".

[Zach Inglis · Rating 3 out of 5]

Not bad at all, just way too short.

[Davood Torabzadeh · Rating 4 out of 5]

Great book about fundamental of grid design.

[Ainsley · Rating 4 out of 5]

Great, quick read laying out the principles of how to design for the web with a grid system. Step by step of how to construct it and then apply the needs of a design to that grid. Really helpful.

[Masatoshi Nishimura · Rating 3 out of 5]

It was nice that he touched on baseline principles, since it was new to me. It was a straightforward workbook to run through on your hand the next time you design web.