The ultimate resource
in grid systems.
“ The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ”
February 22, 2009
Khoi Vinh is the Design Director for NYTimes.com, where he leads the in-house design team in user experience innovation. He is also the author of the popular design weblog Subtraction.com, where he writes extensively on design, technology and user experience matters of all kinds. Previously, Khoi was the co-founder of the award-winning New York design studio Behavior, LLC. He studied communication design at Otis School of Art and Design in Los Angeles, and practiced branding and graphic design in print for several years in Washington, D.C., before moving to New York.
I’m the kind of person who looks for order in everything — and the grid is such a useful, functional way of finding or creating order in many, many design problems that it was only a matter of time before I found it, or it found me. As well, I was only partially trained in graphic design; I really studied to be an illustrator, originally, and over time came to teach myself most of what I know about graphic design.
So for many years I winged it, and started intuitively using a grid in my designs, though not always consistently or well. Over the years, I gradually became aware of the idea that lining things up on a consistent framework of vertical and horizontal lines — and using math to do it — was something other designers had done before. Little by little, I did the reading that I missed out on during my art school career, and learned the finer points of working with the grid.
As for when I first started using them online, it’s really hard to say. In some ways, since the very beginning, but again, a lot of that was pure improvisation. Probably the first fully-fleshed instance where I was able to put a grid into practice was for the redesign of TheOnion.com about four years ago.
Also, I should say that I think the idea of being a “pioneer” of grid systems in interactive design is probably overstating my contribution. To me, using grids is very much like alphabetizing things… sooner or later, you realize that the alphabet is an incredibly useful organizing principle. So there was a certain amount of inevitability to it.
Oh yeah, certainly. It’s probably true that using a grid gives you an immediate benefit in terms of your designs looking better and, crucially for interaction design, imparting a sense of order and more intuitive behavior.
But I think the true benefit of using a grid is that as you learn how to use a grid, you start to think systemically about the solutions you design. You start to try and see how various details can echo one another, how different regions of the canvas can be reused or used for similar things, how like elements can be grouped together.
So in one sense, mastering grids is a very low-level, roll-up-your-sleeves kind of thing. But I think in a larger sense, it’s an important part in every designer’s growth because it trains you to see and think about context, how smaller parts fit into a larger whole. Once you begin ordering elements with a grid, then you inevitably apply similar logic to the entirety of a document or site or what have you, and then to the process and workflow that drive your design brief, and then perhaps to the organization as a whole. Rigorous thinking about small details can effect meaningful changes in the big picture.
Yes, absolutely. To be honest, the pages of NYTimes.com use an imperfect grid system that we inherited, for lack of a better term. It’s not a true grid, with some columns having no rational/mathematical relation to others. But the site is so complex and there are so many content elements — and so much workflow driving each element — that we won’t be able to change it for some time, unfortunately. Still, that doesn’t prevent us from following some grid-like rules of order when we design. We strive for consistency and logic, and the range of expression that we need for those pages is fairly narrow anyway, so maintaining order is a pretty straightforward affair. However, when it comes to creating new kinds of applications or content areas, when we’re essentially starting from scratch, we believe strongly in developing a proper, comprehensive and rational grid system at the outset.
Well, in addition to everything I outlined above, I think a solution that’s founded on a well-considered grid opens the door to a higher level of design thinking.
In my view, the central challenge of any graphic design problem is determining the constraints. Constraints — rules, frameworks, limitations — are so often the spark that ignites an ingenious solution. A grid system is not just a set of rules to follow then, but it’s also a set of rules to play off of — to break, even. Given the right grid — the right system of constraints — very good designers can create solutions that are both orderly and unexpected. That’s when you’ve gone from using the grid as a style and moved into using the grid as a real tool for creativity.
The first step, again, is always determining what the constraints of the project are — usually the advertising units that a page must accommodate, or the particular width that the design will work within. After that, I use Photoshop to mock up potential column widths and margins, and just see how well they play with the ad units or other common elements that I plan to use on the page. I do this quickly and without a lot of care, as I’m trying to see how various column combinations look. I also tend not to use the many grid calculators and automated grid generation tools out there; I’m sure they’re useful for other folks, but I find that there’s something more satisfying about developing the right grid columns manually, intuitively.
Everyone worship Josef Müller-Brockmann’s “Grid Systems in Graphic Design,” and I think it’s a worthy tome. To be honest, the vast majority of what I know about grids I learned from poring over “Design: Vignelli,” Massimo Vignelli’s gorgeous monograph from nearly two decades ago. It’s out of print, but there’s a smaller version that contains much of the same material from a few years ago: “Vignelli from A to Z.” For those starting out learning about this, I honestly don’t think there’s any one book that can give you a comprehensive education in a single sitting or a finite amount of sittings. Learning how to use this tool requires an immersion and a willingness to examine and re-examine everything in one’s environment through a particular kind of worldview. It takes time, lots of time. And then, once you learn it, you have to remember that it really isn’t the point at all; the thinking and problem-solving are the point.
© 2014 The Grid System