Khoi Vinh is the Design Direc­tor for NYTimes.com, where he leads the in-house design team in user expe­ri­ence inno­va­tion. He is also the author of the pop­u­lar design weblog Subtraction.com, where he writes exten­sively on design, tech­nol­ogy and user expe­ri­ence mat­ters of all kinds. Pre­vi­ously, Khoi was the co-founder of the award-winning New York design stu­dio Behav­ior, LLC. He stud­ied com­mu­ni­ca­tion design at Otis School of Art and Design in Los Ange­les, and prac­ticed brand­ing and graphic design in print for sev­eral years in Wash­ing­ton, D.C., before mov­ing to New York.

You’re con­sid­ered one of the recent pio­neers of bring­ing grid sys­tems to inter­ac­tive design. Could you tell us how you were first intro­duced to grid sys­tems, how long you’ve been using them, and what was your first expe­ri­ence like in using grid sys­tems on the web?

I’m the kind of per­son who looks for order in every­thing — and the grid is such a use­ful, func­tional way of find­ing or cre­at­ing order in many, many design prob­lems that it was only a mat­ter of time before I found it, or it found me. As well, I was only par­tially trained in graphic design; I really stud­ied to be an illus­tra­tor, orig­i­nally, and over time came to teach myself most of what I know about graphic design.

So for many years I winged it, and started intu­itively using a grid in my designs, though not always con­sis­tently or well. Over the years, I grad­u­ally became aware of the idea that lin­ing things up on a con­sis­tent frame­work of ver­ti­cal and hor­i­zon­tal lines — and using math to do it — was some­thing other design­ers had done before. Lit­tle by lit­tle, I did the read­ing that I missed out on dur­ing my art school career, and learned the finer points of work­ing with the grid.

As for when I first started using them online, it’s really hard to say. In some ways, since the very begin­ning, but again, a lot of that was pure impro­vi­sa­tion. Prob­a­bly the first fully-fleshed instance where I was able to put a grid into prac­tice was for the redesign of TheOnion.com about four years ago.

Also, I should say that I think the idea of being a “pio­neer” of grid sys­tems in inter­ac­tive design is prob­a­bly over­stat­ing my con­tri­bu­tion. To me, using grids is very much like alpha­bet­iz­ing things… sooner or later, you real­ize that the alpha­bet is an incred­i­bly use­ful orga­niz­ing prin­ci­ple. So there was a cer­tain amount of inevitabil­ity to it.

Have you noticed an improve­ment in your designs, and over­all com­po­si­tion skills, since you’ve adopted the grid system?

Oh yeah, cer­tainly. It’s prob­a­bly true that using a grid gives you an imme­di­ate ben­e­fit in terms of your designs look­ing bet­ter and, cru­cially for inter­ac­tion design, impart­ing a sense of order and more intu­itive behavior.

But I think the true ben­e­fit of using a grid is that as you learn how to use a grid, you start to think sys­tem­i­cally about the solu­tions you design. You start to try and see how var­i­ous details can echo one another, how dif­fer­ent regions of the can­vas can be reused or used for sim­i­lar things, how like ele­ments can be grouped together.

So in one sense, mas­ter­ing grids is a very low-level, roll-up-your-sleeves kind of thing. But I think in a larger sense, it’s an impor­tant part in every designer’s growth because it trains you to see and think about con­text, how smaller parts fit into a larger whole. Once you begin order­ing ele­ments with a grid, then you inevitably apply sim­i­lar logic to the entirety of a doc­u­ment or site or what have you, and then to the process and work­flow that drive your design brief, and then per­haps to the orga­ni­za­tion as a whole. Rig­or­ous think­ing about small details can effect mean­ing­ful changes in the big picture.

As the Design Direc­tor at The New York Times have you imple­ment grid sys­tems into your projects, specif­i­cally NYTimes.com, and do rec­om­mend the use of grids to your team of designers?

Yes, absolutely. To be hon­est, the pages of NYTimes.com use an imper­fect grid sys­tem that we inher­ited, for lack of a bet­ter term. It’s not a true grid, with some columns hav­ing no rational/mathematical rela­tion to oth­ers. But the site is so com­plex and there are so many con­tent ele­ments — and so much work­flow dri­ving each ele­ment — that we won’t be able to change it for some time, unfor­tu­nately. Still, that doesn’t pre­vent us from fol­low­ing some grid-like rules of order when we design. We strive for con­sis­tency and logic, and the range of expres­sion that we need for those pages is fairly nar­row any­way, so main­tain­ing order is a pretty straight­for­ward affair. How­ever, when it comes to cre­at­ing new kinds of appli­ca­tions or con­tent areas, when we’re essen­tially start­ing from scratch, we believe strongly in devel­op­ing a proper, com­pre­hen­sive and ratio­nal grid sys­tem at the outset.

In your opin­ion, why are grid sys­tems impor­tant to the struc­ture and lay­out of a design? What ben­e­fits or improve­ments do they offer to a designer and a design?

Well, in addi­tion to every­thing I out­lined above, I think a solu­tion that’s founded on a well-considered grid opens the door to a higher level of design thinking.

In my view, the cen­tral chal­lenge of any graphic design prob­lem is deter­min­ing the con­straints. Con­straints — rules, frame­works, lim­i­ta­tions — are so often the spark that ignites an inge­nious solu­tion. A grid sys­tem is not just a set of rules to fol­low then, but it’s also a set of rules to play off of — to break, even. Given the right grid — the right sys­tem of con­straints — very good design­ers can cre­ate solu­tions that are both orderly and unex­pected. 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.

Could you briefly explain the process you take when devel­op­ing a grid sys­tem for a spe­cific project?

The first step, again, is always deter­min­ing what the con­straints of the project are — usu­ally the adver­tis­ing units that a page must accom­mo­date, or the par­tic­u­lar width that the design will work within. After that, I use Pho­to­shop to mock up poten­tial col­umn widths and mar­gins, and just see how well they play with the ad units or other com­mon ele­ments that I plan to use on the page. I do this quickly and with­out a lot of care, as I’m try­ing to see how var­i­ous col­umn com­bi­na­tions look. I also tend not to use the many grid cal­cu­la­tors and auto­mated grid gen­er­a­tion tools out there; I’m sure they’re use­ful for other folks, but I find that there’s some­thing more sat­is­fy­ing about devel­op­ing the right grid columns man­u­ally, intuitively.

For some­one new to grids, what advice would you give them? Do you have a list of rec­om­mended books or arti­cles that they could check out?

Every­one wor­ship Josef Müller-Brockmann’s “Grid Sys­tems in Graphic Design,” and I think it’s a wor­thy tome. To be hon­est, the vast major­ity of what I know about grids I learned from por­ing over “Design: Vignelli,” Mas­simo Vignelli’s gor­geous mono­graph from nearly two decades ago. It’s out of print, but there’s a smaller ver­sion that con­tains much of the same mate­r­ial from a few years ago: “Vignelli from A to Z.” For those start­ing out learn­ing about this, I hon­estly don’t think there’s any one book that can give you a com­pre­hen­sive edu­ca­tion in a sin­gle sit­ting or a finite amount of sit­tings. Learn­ing how to use this tool requires an immer­sion and a will­ing­ness to exam­ine and re-examine every­thing in one’s envi­ron­ment through a par­tic­u­lar kind of world­view. It takes time, lots of time. And then, once you learn it, you have to remem­ber that it really isn’t the point at all; the think­ing and problem-solving are the point.

Dis­cuss this arti­cle in the Forum.