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, Design Chair at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “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. Refer to the advertising and sponsorship page for inquiries.+
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.
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.+