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 active 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 useful, 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 active 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 ibly 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 system 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 prevent us from fol low ing some grid-like rules of order when we design. We strive for consis 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 essentially 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 column 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 contains 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 worldview. 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.
You’re con sid ered one of the recent pio neers of bring ing grid sys tems to inter active 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 useful, 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 active 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 ibly 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 system 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 prevent us from fol low ing some grid-like rules of order when we design. We strive for consis 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 essentially 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 column 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 contains 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 worldview. 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.
No comments:
Post a Comment