is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
One question I get from time to time is, “What do you think of so-and-so’s redesign?” People ask me this about many sites of all kinds, but most often, the inquiry regards the redesign of a news site of some sort. As it turns out, my position as Design Director at NYTimes.com suggests that I might have a halfway interesting answer.
To be honest, I don’t like to comment on our competition, mostly because I think it’s inappropriate for me to make remarks that could so easily be confused as an official New York Times view on what another news outlet is doing online. It’s not that I don’t have an opinion on what they’re doing, I just think it wouldn’t be productive of me to air my thoughts publicly (catch me in private if you really want to know), even if those opinions are generally positive — and they frequently are, as lots of companies in the online news space are doing exciting work.
I do make an exception, though, for those instances where I think a competitor has really hit it out of the park, and when I like a design enough to be effusively positive about it. One example of this, from last September, is the discussion between Liz Danzico and myself over last fall’s redesign of The New York Post’s site. It’s not without its flaws, but I still stand by my contention that it’s a nearly pitch-perfect expression of that paper’s brand and journalism. Nicely done, I say.
Today I want to talk about another example of a newspaper that, I think, is doing really wonderful work online: The Times of London’s recent redesign beautifully translates (versus simply transferring) its broadsheet aesthetic into something vibrant and native to the Web.
It Came from London
It’ll come as no surprise to most readers that my attraction TimesOnline.co.uk is based largely on their rigorous use of a grid to govern the layout of their pages. Theirs is a fairly simple grid that doesn’t completely reconcile the three equally-sized columns on the left with the one outsized column on the right (which looks intended to accommodate a large ad unit), but their disciplined and consistent use of these columns throughout the site —on the home page and section fronts as well as on articles — is very nicely handled.
This isn’t just a matter of ‘pouring’ content neatly into columns, either. The entire site evidences some very keen understanding of how the grid can inform the expression and placement of various elements. The masthead, in particular, very elegantly aligns a silhouetted promotional area on the top right with that large right column. Even more subtly, there’s a rotating headlines area along the sub-header that appears on the home page and section fronts that aligns with the right edge of the second column; a single, not particularly tall vertical pipe anchors that element with the entire infrastructure.
That pipe is a small detail but it has a profound effect on the entirety of the masthead; its quietly meaningful reinforcement of orderliness allows the designers to leave a relatively vast area above for negative space in gray, beneath the navigation and just beneath the bread crumbs. This is an area that most business owners would feel the need to compulsively fill with content in order to assuage their innate fear of empty pixels, but the Times Online designers have somehow managed to keep it free and clear. It’s a very sharp design decision, as it plays a significant role in maintaining a feeling of lightness throughout the page, and fends off that feeling of clutter to which so many sites succumb.
I’m also very fond of the horizontal promotional boxes used on the home page and section fronts. Notice the way that the images in each promo (again, silhouetted) are understatedly aligned with the grid. This isn’t done in the explicit and sometimes showy way that I myself tend to favor when I align objects with columns; rather, these placements make sophisticated use of the grid as invisible guidelines for optical centering of items.
Crop most any of the images in these promotional boxes where they intersect with the vertical columns, and you’ll find that they’re nicely centered within the resulting rectangle. That’s the sign of smart visual planning.
The whole layout, in fact, is rife with elegantly formed widgets and modules that use the grid as a foundation. Witness the dog-eared inset boxes that seem to add an additional visual dimension to the page without resorting to drop-shadows; again, a quiet sophistication is at work here. Similarly, modules promoting comments use a single-column width to form a speech balloon, with the ‘tail’ off to the bottom right; it’s probably not the most ingenious display for this kind of content ever imagined, but it’s not without its charms here.
The Industry Sector financial data on the Business section front, which fits into the columnar structure so seamlessly, is another example. Its three-columns are so appropriate and natural in expression that it seems as if the grid was designed specifically to accommodate it. That wasn’t the case, of course, but this kind of subtlety is an example of how an expert design hand can make the grid seem both invisible and indispensable.
Finally, here’s the two-at-a-time feature browser in the Life & Style section front. It functions similarly to the so-called MOTHs that we have in the middle of the NYTimes.com home page, but the controls are more conveniently placed in the center, straddling the gutter between two columns.
Number Two
To be sure, TimesOnline.co.uk isn’t without its flaws. It adheres perhaps too strongly to the same column arrangement throughout, so that there’s no architectural difference between the home page and section fronts, causing a measure of layout monotony as users move from section to section. The site also falls down a bit in rendering consistently in the Safari and even, to a lesser extent, in Firefox; with a layout this precise, it’s crucial to ensure visual compatibility across all browsers.
All told, though, it’s been executed great aplomb. It’s clearly one of the most sophisticated grid executions online right now, and visually, I’d say it’s among the best-designed news Web sites out there. Everybody knows who number one is, of course, but I’d say it’s pretty close.
I knew I started reading Subtraction for a reason after SXSW. Your writings have beaten me with this grid thing enough now that I’m starting to see when it works, when it’s broken and when a site could use a healthy dose. What more could you have hoped for?
A trend I’m seeing and want to validate: none of the grid-based sites I come across seem to break the grid to do anything to the full page width. Is that avoided for any reason or am I getting caught up in coincidences?
It’s interesting how successfully the new Times Online website brings its new direction to the web also.
A couple of years ago now, The Times changed it’s printed format from Broadsheet to Tabloid. Some would say the journalism changed to something more populist that would appeal to a much wider audience. I think the website redesign is another step along this path for them.
Incidently, it’s the only newspaper website redesign where I’ve seen offline adverts (in tube stations etc).
Richard: I think part of the reason why lots of sites — commercial sites, anyway — don’t take advantage of the full width of the page is that there are so many requirements for a page, mostly in the form of ads but also in the forms of desire to have items appear above the fold, that it’s difficult to find the opportunity.
Mark: I’m at a disadvantage, not living in London. I didn’t realize that The Times of London had switched from broadsheet to tabloid, my mistake. Thanks for pointing that out.
Aaron
…which makes it seem even more of a shame that they didn’t bother enabling a decent range of RSS feeds
Great observations, especially with the horizontal promo boxes and the images within them. I think the idea that grids are meant to guide the size and placement of a page’s various content modules is pretty well understood by many designers, but most still don’t seem to get how important it is for elements to “find the grid” within themselves, too, in order to provide that extra reenforcement and to give subtle cues of stability and order within a holistic design. Even the best grid designs are undermined at some point by haphazard banner, navigation, and illustration design that forgets that there is a grid system surrounding it.
Nice site – it’s going to be interesting to see how this compares to the new guardian site which is launching sometime over the next month. Khoi hilighted the ‘comment is free‘ section in his grids are good presentation – the structure of this area of the site apparently previews what the rest of the site will look like. Hope they carry on the effective use of a strong grid througout the new design.
Although I think the Guardian is the better offline newspaper (in terms of design), I agree The Times has the better online presence at the moment.
For those who are interested, there was an article published last Novemember about The Times’s newspaper ‘realign’.
Priit Parmakson
“Subtlety” and “quiet sophistication” — appear to be very important concepts.
The effects of subtle features are subtle as well. Yet, these small effects often accumulate to significant gains in user productivity. Consider web programming editors. Some experts hold the view that the most basic editor like Windows Notepad is all you need. This view appears radical, simple and cool, for sure. However, when I worked with a sophisticated web editor (Oracle’s JDeveloper), I felt my productivity to increase. But I could not attribute this increase directly to any of the numerous small features of the JDeveloper editor. — The same with the news web site. Subtle helphul features work, but the reader cannot always see HOW they improve the reading experience. We can think of the newspaper visitor as “working” with the newspaper, and here the analogy may become fruitful.
I guess that subtlety is achievable only through gradual, evolutionary design. Grand re-designs maybe are counterproductive in this respect?
(1) Power-feature Design versus Subtle-feature Design; (2) Radical Re-design versus Evolutionary Design; (3) Designer-as-hero Design versus Team design (Wikipedia’s design appears very good – is the Wikopedia’s team approach behind that success?) – these are three themes that I think would need much more discussion by design theorists and practitioners.
Stuart, actually, the Guardian site re-design is already available as part of a staged rollout. Travel.guardian.co.uk shows not only how redesigned site will look but also how it will function. The site will have a lot of tag-based navigation with dynamically generated URLs to show related content on several parts of the site.
Nope, no matter how hard I try, I cannot bring myself to like the redesign. So many people I respect have come out in applaud, all the technical reasons have been explained so beautifully.
Yet whenever I actually try to read the thing, or watch other people spend some time there, there is this overwhelming feeling of being caught in the headlights. I just end up staring at the quote in the top right, urging me to be on another page, as if this page isn’t the right one, with adverts flashing in my peripheral vision.
So many faces staring at me.
Maybe I’m just weird, or it’s some deep down repellant to all things Murdoch, but it just doesn’t seem to work. It doesn’t work for me, or anyone I’ve shown it to.
It took the Times a while to iron out some of the problems they were having at launch, but am I the only one who still throws up in my mouth a bit when I view source on that page?
There are divs with classes like “width-175 float-left margin-right-10” – but does it matter?
The end result will look the same to the user, but at some point, someone is going to have to face the challenge of editing that code, and I pity the fate of that poor soul.
I enjoyed your write up Khoi (I’ve never seen someone write so eloquently about a pipe! 😉 but I had quite a different reaction to the design.
Studying the new design gives me the feeling its needs to be tightened up quite significantly, I almost want to throw it into photoshop and whip it into shape just to scratch the itch! 😉
To me the new design lacks coherency, grid or no grid. It was obviously a deliberate and determined effort to move away from their previous look (which was far more successful with their grid in my view, and it was mostly black and white! ;), but perhaps they overshot the mark in the other direction with the more casual, loose feel.
The page elements to me feel too disparate, the proportions all out (the giant masthead esp.) and perhaps most critically the top third doesn’t introduce you to the story flow down the page, its just an odd mix of elements and giant navigation starring you in the face. Your own paper does a much better job in this regard Khoi, I think.
Anyhoo, what I would *really* love to know with these redesigns is what are the actual outcomes in terms of numbers? Are more stories being read, and for longer? Are individual users click through to more stories, or less? Did the designers and editorial team have specific goals in this regard, and if not, shouldn’t they?
I think there’s a real science to online news design that hasn’t really begun to emerge yet, but will. With online news design taking so many different form (some brief research I did}, there is effect a whole lot of different experiments taking place, if only we had the numbers!
In any case, the gap in their new design between story header and summary (front page) drives me mental 🙂
a little OT question: why does nytimes.com have that double-click search “feature” (in some articles, double-clicking a word opens a popup with a search query on that word)? do you (or anyone for that matter) consider it useful? i just consider it a hassle. i must admit that i am a little compulsive and tend to double-click or select text while i read it but i never thought that a user would expect a search to occur in such a case.
Chris
Thanks for a very interesting post. If you’ll let me make a slightly pedantic point, the newspaper in question is called The Times, not The Times of London nor The London Times. For those in the US who use the contraction “The Times” to refer to the New York Times, perhaps you can avoid confusion by talking about The Times of London without italicising “of London”?
Thanks for pointing that out, Chris. My exposure to The Times of London is relatively paltry, so I appreciate the clarification. I changed all of those italicizations as you suggested.
Steve
Chris – I was just thinking of posting a similar clarification.
(Non Brits) calling it the ‘Times of London’ I can understand, especially when the author works for the NY Times, the need for distinction is obvious.
But this quote struck me – “not living in London. I didn’t realize…”
I don’t know if it was intentional or not, but it makes it sound as if it’s a London paper, ie you wouldn’t see it unless you were in London. It’s not – it’s a national paper. There are 40 or 50 million people over here who don’t live in London but can still buy the Times 🙂
(I’m not one of them. I do live in London and I don’t look to bloody Murdoch for my news.)
Anyway. Nice article, I enjoyed the write up. Not sure if I actually like the redesign to be honest, the grid layout is nice but somehow the Georgia font and pastel grays and blues strike me as very “wannabe” indeed. To see an institution like The Times desperately trying to look like a WordPress install is rather reminiscent of a middle-aged man wearing the latest trendy baseball caps and trainers in a doomed bid to seem hip…
Hi Khoi,
Another nice write up. Thanks!
You mention, “Theirs is a fairly simple grid that doesn’t completely reconcile the three equally-sized columns on the left with the one outsized column on the right (which looks intended to accommodate a large ad unit)”.
I’m not sure what their reasoning is for the out sized column is but it appears that it fits the Golden section So it may indeed be a 5 column grid squeezed into the two main columns of the golden section. Just thinking out loud.
Regardless. It is a lovely re-design. Thanks again for the write up.
Nice article and a very nice re-design! It’s great seeing designers get creative with their iconography, rather than using the same old icons everyone else is using!
I love the funky blue ones at the bottom of the site!
One question I get from time to time is, “What do you think of so-and-so’s redesign?” People ask me this about many sites of all kinds, but most often, the inquiry regards the redesign of a news site of some sort. As it turns out, my position as Design Director at 
I knew I started reading Subtraction for a reason after SXSW. Your writings have beaten me with this grid thing enough now that I’m starting to see when it works, when it’s broken and when a site could use a healthy dose. What more could you have hoped for?
A trend I’m seeing and want to validate: none of the grid-based sites I come across seem to break the grid to do anything to the full page width. Is that avoided for any reason or am I getting caught up in coincidences?
Great write-up Khoi.
It’s interesting how successfully the new Times Online website brings its new direction to the web also.
A couple of years ago now, The Times changed it’s printed format from Broadsheet to Tabloid. Some would say the journalism changed to something more populist that would appeal to a much wider audience. I think the website redesign is another step along this path for them.
Incidently, it’s the only newspaper website redesign where I’ve seen offline adverts (in tube stations etc).
Richard: I think part of the reason why lots of sites — commercial sites, anyway — don’t take advantage of the full width of the page is that there are so many requirements for a page, mostly in the form of ads but also in the forms of desire to have items appear above the fold, that it’s difficult to find the opportunity.
Mark: I’m at a disadvantage, not living in London. I didn’t realize that The Times of London had switched from broadsheet to tabloid, my mistake. Thanks for pointing that out.
…which makes it seem even more of a shame that they didn’t bother enabling a decent range of RSS feeds
Great observations, especially with the horizontal promo boxes and the images within them. I think the idea that grids are meant to guide the size and placement of a page’s various content modules is pretty well understood by many designers, but most still don’t seem to get how important it is for elements to “find the grid” within themselves, too, in order to provide that extra reenforcement and to give subtle cues of stability and order within a holistic design. Even the best grid designs are undermined at some point by haphazard banner, navigation, and illustration design that forgets that there is a grid system surrounding it.
Readers of this article may find Edward Tufte’s opinion of Washington Post’s recent re-design interesting. (Thread ‘A problematic redesign of the Washington Post homepage‘ on Tufte’s website.)
Nice site – it’s going to be interesting to see how this compares to the new guardian site which is launching sometime over the next month. Khoi hilighted the ‘comment is free‘ section in his grids are good presentation – the structure of this area of the site apparently previews what the rest of the site will look like. Hope they carry on the effective use of a strong grid througout the new design.
Although I think the Guardian is the better offline newspaper (in terms of design), I agree The Times has the better online presence at the moment.
For those who are interested, there was an article published last Novemember about The Times’s newspaper ‘realign’.
Although I think the Guardian is the better offline newspaper (in terms of design), I agree The Times has the better online presence at the moment.
For those who are interested, there was an article published last Novemember about The Times’s newspaper ‘realign’.
“Subtlety” and “quiet sophistication” — appear to be very important concepts.
The effects of subtle features are subtle as well. Yet, these small effects often accumulate to significant gains in user productivity. Consider web programming editors. Some experts hold the view that the most basic editor like Windows Notepad is all you need. This view appears radical, simple and cool, for sure. However, when I worked with a sophisticated web editor (Oracle’s JDeveloper), I felt my productivity to increase. But I could not attribute this increase directly to any of the numerous small features of the JDeveloper editor. — The same with the news web site. Subtle helphul features work, but the reader cannot always see HOW they improve the reading experience. We can think of the newspaper visitor as “working” with the newspaper, and here the analogy may become fruitful.
I guess that subtlety is achievable only through gradual, evolutionary design. Grand re-designs maybe are counterproductive in this respect?
(1) Power-feature Design versus Subtle-feature Design; (2) Radical Re-design versus Evolutionary Design; (3) Designer-as-hero Design versus Team design (Wikipedia’s design appears very good – is the Wikopedia’s team approach behind that success?) – these are three themes that I think would need much more discussion by design theorists and practitioners.
Stuart, actually, the Guardian site re-design is already available as part of a staged rollout. Travel.guardian.co.uk shows not only how redesigned site will look but also how it will function. The site will have a lot of tag-based navigation with dynamically generated URLs to show related content on several parts of the site.
Nope, no matter how hard I try, I cannot bring myself to like the redesign. So many people I respect have come out in applaud, all the technical reasons have been explained so beautifully.
Yet whenever I actually try to read the thing, or watch other people spend some time there, there is this overwhelming feeling of being caught in the headlights. I just end up staring at the quote in the top right, urging me to be on another page, as if this page isn’t the right one, with adverts flashing in my peripheral vision.
So many faces staring at me.
Maybe I’m just weird, or it’s some deep down repellant to all things Murdoch, but it just doesn’t seem to work. It doesn’t work for me, or anyone I’ve shown it to.
“Horizontal promotional boxes” are, if memory serves, called skyboxes in the trade.
It took the Times a while to iron out some of the problems they were having at launch, but am I the only one who still throws up in my mouth a bit when I view source on that page?
There are divs with classes like “width-175 float-left margin-right-10” – but does it matter?
The end result will look the same to the user, but at some point, someone is going to have to face the challenge of editing that code, and I pity the fate of that poor soul.
I enjoyed your write up Khoi (I’ve never seen someone write so eloquently about a pipe! 😉 but I had quite a different reaction to the design.
Studying the new design gives me the feeling its needs to be tightened up quite significantly, I almost want to throw it into photoshop and whip it into shape just to scratch the itch! 😉
To me the new design lacks coherency, grid or no grid. It was obviously a deliberate and determined effort to move away from their previous look (which was far more successful with their grid in my view, and it was mostly black and white! ;), but perhaps they overshot the mark in the other direction with the more casual, loose feel.
The page elements to me feel too disparate, the proportions all out (the giant masthead esp.) and perhaps most critically the top third doesn’t introduce you to the story flow down the page, its just an odd mix of elements and giant navigation starring you in the face. Your own paper does a much better job in this regard Khoi, I think.
Anyhoo, what I would *really* love to know with these redesigns is what are the actual outcomes in terms of numbers? Are more stories being read, and for longer? Are individual users click through to more stories, or less? Did the designers and editorial team have specific goals in this regard, and if not, shouldn’t they?
I think there’s a real science to online news design that hasn’t really begun to emerge yet, but will. With online news design taking so many different form (some brief research I did}, there is effect a whole lot of different experiments taking place, if only we had the numbers!
In any case, the gap in their new design between story header and summary (front page) drives me mental 🙂
a little OT question: why does nytimes.com have that double-click search “feature” (in some articles, double-clicking a word opens a popup with a search query on that word)? do you (or anyone for that matter) consider it useful? i just consider it a hassle. i must admit that i am a little compulsive and tend to double-click or select text while i read it but i never thought that a user would expect a search to occur in such a case.
Thanks for a very interesting post. If you’ll let me make a slightly pedantic point, the newspaper in question is called The Times, not The Times of London nor The London Times. For those in the US who use the contraction “The Times” to refer to the New York Times, perhaps you can avoid confusion by talking about The Times of London without italicising “of London”?
Thanks for pointing that out, Chris. My exposure to The Times of London is relatively paltry, so I appreciate the clarification. I changed all of those italicizations as you suggested.
Chris – I was just thinking of posting a similar clarification.
(Non Brits) calling it the ‘Times of London’ I can understand, especially when the author works for the NY Times, the need for distinction is obvious.
But this quote struck me – “not living in London. I didn’t realize…”
I don’t know if it was intentional or not, but it makes it sound as if it’s a London paper, ie you wouldn’t see it unless you were in London. It’s not – it’s a national paper. There are 40 or 50 million people over here who don’t live in London but can still buy the Times 🙂
(I’m not one of them. I do live in London and I don’t look to bloody Murdoch for my news.)
Anyway. Nice article, I enjoyed the write up. Not sure if I actually like the redesign to be honest, the grid layout is nice but somehow the Georgia font and pastel grays and blues strike me as very “wannabe” indeed. To see an institution like The Times desperately trying to look like a WordPress install is rather reminiscent of a middle-aged man wearing the latest trendy baseball caps and trainers in a doomed bid to seem hip…
Hi Khoi,
Another nice write up. Thanks!
You mention, “Theirs is a fairly simple grid that doesn’t completely reconcile the three equally-sized columns on the left with the one outsized column on the right (which looks intended to accommodate a large ad unit)”.
I’m not sure what their reasoning is for the out sized column is but it appears that it fits the Golden section So it may indeed be a 5 column grid squeezed into the two main columns of the golden section. Just thinking out loud.
Regardless. It is a lovely re-design. Thanks again for the write up.
Fantastic article! Thank you!
Nice article and a very nice re-design! It’s great seeing designers get creative with their iconography, rather than using the same old icons everyone else is using!
I love the funky blue ones at the bottom of the site!