Loose notes from SXSW 2011 session: Ordering Disorder: Grid Design for the New World
Khoi Vinh, Design Director, NY Times. Wrote book of same name.
Everyone’s using grids, and grid tools and frameworks are everywhere. But do you truly understand the ins and outs of this powerful design principle, and how it’s changing along with new media and platforms? Chances are most digital designers have only a cursory knowledge of the grid’s concepts and best practices, overlooking the tremendous value that truly smart grid usage brings. In this expansive sequel to his famous 2006 SXSWi talk “Grids Are Good,” designer and grid expert Khoi Vinh (NYTimes.com, Subtraction.com) will give a bracing tour of the many ideas packed into his new book “Ordering Disorder: Grid Principles for Web Design.” This solo talk will span the history of grids, take a brass-tacks tour of best practices, and look ahead at some of the most enlightening and innovative thinking that’s shaping grid thinking in the future.
Humans have always looked for order in nature, the hidden math that can help make sense of the world. e.g. fractals. Any two marks on a page form the beginnings of a grid.
When you divide a rectangle in half, the two resulting rectangles have the same proportions as the original rect.
Why is a brick the size that it is? It mirrors the human hand. Allows multiple humans to collaborate in a consistent way. When you start to stack bricks, you create a grid.
A wall is a division between what’s outside and what’s inside. When you put together a lot of walls you start creating a grid system for a human society.
Grids add order, continuity and harmony to information. And allow an audience to predict whether to find information. And make it easy to add new content consistent with the exiting content. Ad facilitate collaboration on a single solution.
“The engineer shapes our age.”
“the use of standard practices in teh book trade is therefor an integral necessity in modern typography: no piece of printing can be called satisfactory if it ignore such an outstanding element in the organization of book production. It is indeed an economic necessity.”
A) Derive beautiy from the innate quality of the printing press
B) Derive beautiy from the innate quality of the web browser
So we go from designers as pressmen to designers as coders.
Design is a form of tyranny. You need to be willing to impose order on the world, or the things around you.
1) Research 2) Wireframes 3) Preparatory design - Pencil sketch - Calculations - Page sketches 4) Visual design 5) Code
Not every sketch ends with a great design. But almost every great design starts with a sketch. The key is to generate ideas quickly and at very low cost. Pen and paper is still the best way.
The power of constraints is not to be underestimated, especially in grid design. A constraining element, something non-negotiable like an ad unit, can be very helpful. The ad can be a blessing in disguise.
Figuring out font size: You want to shoot for 60-80 characters per line, so lay out text on your grid mockup and do a count before committing.
Overly strict adherence to the grid is impractical and undesirable. Be a tyrant, but be a benign tyrant.
The grid is just as useful for carving out whitespace as it is for determining content placement.
Behaviors should be consistent within each device. Behavior variations should be virtually unnoticeable.
Grids are a balancing act. Design aesthetics can be a red herring. Grids are an opportunity to benefit from the past, not to rcreate it.
@khoi on Twitter