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.
Well-respected online information architecture magazine Boxes and Arrows announced an open redesign contest last month, the deadline for which was extended until just this morning. I found this out last Friday, when my Behavior colleague, Chris Fahey, suggested that we try to put together a submission.
Initially, I resisted the idea of taking part in this, mostly because of all the work that it was going to involve. The I.A. documents they provided were appropriately high-level for an audience of devoted, would-be contestants ready to finesse every little detail for themselves. For me, on the other hand, they were sufficiently lacking in detail that I knew it would take me a huge chunk of my weekend to sift through all the brain challenges required to get a coherent set of comprehensives designed.
Below: never go home again, at least not to the old one. Here’s a proposed new one. Scroll down for links to enlargements.
Sunday, Bloody Sunday
Still, I somehow found myself blocking out my Sunday afternoon for just this purpose. In the early afternoon, I got on the horn and on instant messenger with Chris, and we tried to make sense of the chunk of work before us. We started out basically from scratch, trying to develop a new set of wireframes that would address the interface with a much higher level of specificity and provide a blueprint for the three comps we had to do, all the while trading them over the ether to compare notes. Around 05:00p, we were ready to start pushing pixels in Photoshop, and aside from some breaks for food, we pretty much continued right up until 05:00a the next morning.
It was a back-breaking process, as I literally hit the sack just before dawn with pains up and down my spine from the egregiously poor ergonomics of my home workstation. But it was fun, too; I was having a good time and feeling incredibly productive — in the zone, so to speak. Throughout all fourteen hours of it, I never found myself particularly tired or felt that I was dragging along, most of which I can attribute to feeling incredibly enthusiastic about the work we were doing.
Winning Isn’t Everything
I’m pretty happy with the final product, which can be seen here below and also, thanks to Chris’s early morning industriousness, with annotations directly overlaying the designs on this extranet. To me, anyway, they look like a compelling online magazine, though I’m not sure we’ve got a particularly stellar chance to win. In the scheme of all possible solutions, ours has to rank among the most conservative.
Below: One, two, three, hey! Proposed new designs for the Boxes and Arrows home page, article page and search results. Click on each for enlarged views.
This is mostly due to the fact that we tried to put forward a proposal that would require the absolute minimum in alterations to the Boxes and Arrows editorial workflow (if any at all), something that I think is very important to a volunteer-run magazine. We also made a conscious effort to preserve the existing Boxes and Arrows brand as much as possible, extending it rather than subverting it.
It’s difficult, from the contest announcement, to get a good idea of whether this is what the magazine’s staff is looking for. I hope it is — even if they don’t pick ours, I still hope they’re thinking along these lines, because, in my estimation, it’s the shortest, most efficient and most productive path to successfully redesign Boxes and Arrows.
Well I don’t think I’m going out on a limb here to say that I really do believe your submission will win. The IA was followed to a ‘T’ in your new navigation, and I honestly can’t think of a better way to display individual article pages (the tabs for comments vs. the content are genius!).
Sorry I’m gushing, but new Khoi or Behavior work always gets me goin 😉
More of the golden touch of Khoi Vinh I see. I like how you’ve used elements that have popped up across Behavior projects and are distinctively your style and yet they never feel dated, but always solid.
I’m also solidly impressed by the use of green with the blue – never thought the two would work well together but there ya go.
Which reminds me, I have to send you an e-mail about the idea of tighter integration of a personal site – when I get a chance to actually sit down and breathe.
All I wanted to see in the redesign is a narrower line length – and your articles mockup does that really nicely, with the addition of outdented callouts, graphics and captions. I think this is the strongest of your three templates, with great use of white space – well done!
If I may add further comment, I see no reason why the search page can’t be similarly ‘padded’, and the front page seems to burst with content.
I love the consistency of colouring – greens for comments and blues for articles. But in the ‘recent articles’ sidebar, all text is bold (?). I feel some variation in emphasis would give more balance to this section.
A couple of other points – the text resizer gets a disproportionate amount of emphasis, and the ‘schwag/write for’ sidebars seem at odds with the rest of the layout, as they aren’t matte.
All said, there’s no way I could have done a job this good, it’s a brilliant effort guys!
My kudos goes to all who enter these types of ‘competitions’, It seems you have already got alot out of it, regardless of the results, eh?
Raphy
All the html text appears “smooth” in these comps. I’m curious if you typically deliver comps this way, rather than with aliased text.
In my case, when designing comps in Photoshop I typically render the html text as smooth – especially since I started using Safari as my main browser.
Anyone else have thoughts on this, or perhaps there are some stats as to percentage of people using browsers with font smoothing turned on?
Adam, thanks for your comments and feedback. If nothing else, we got a lot out of the exercise in terms of personal growth — you learn a lot from trying to resolve these problems in such a short amount of time. As for some of your other comments: the Resize Text widget was a big question mark, and yeah it’s probably not in an optimal location everywhere, but it makes perfect sense on the article page, doesn’t it? And the Schwag and Write For Us touts are meant to suggest advertisements; so hopefully they’ll be designed with more rigor than we were able to put into them. Maybe Boxes and Arrows could have a design contest for them!
Raphy: lately, I’ve been doing all of my comps this way, with anti-aliased text (thanks for the correction; I had inadvertently mixed up those terms earlier) rather than anti-aliased text. This is for a few reasons, the most prominent of which is that it’s a more pleasant experience for me, but also because Windows can render text this way if ClearType is set properly, and eventually all new PCs will do so too…. just as soon as Longhorn is here.
Kidding aside, I’ve started to do the same in my comps recently as well – it’s jarring to see anti-aliased text these days. Most of the people I know are on OSX or WinXP with ClearType on. on old Windows machines, there’s a Font Smoother “plugin” but only works at large text sizes – still, any improvement none the less.
Stunning designs! I love the use of color-coding and lines to seperate information. Also good idea with the clever use of columns with cross-cutting rows in the search results (I couldn’t think of any other way to describe it).
I’m rooting for this design, you guys did a great job!
Jeff, what exactly were you looking at? Tag is the same as category, archives by tag is the same as archives by category. It took me less than a moment to figure that out, and I immediately noticed that each article had a ‘tags’ field.
Also, when you say nothing seems to stick out, do you mean to someone who is color blind? Again, were you referring to this site or the design comps that were presented?
Nefeli
Raphy: I learned that submitting a comp with anti-aliased text may be risky in some cases.
I recently presented a website to a client directly on Safari. He approved it, but when he saw the final website on his Win XP – without Clear Type on – he objected that the text looked awful. So I had to use images for all the headings to meet his expectations. 🙁
pois_n
Did you win?
Anthony
Ah, loved your design way more than the final one they chose. Just seemed much better organized, easier to read. And clean, of which I’m fan.
Too bad they chose the one they did as the winner. Great work!
And, btw, love your weblog site. Of all the weblogs I’ve seen (and I read an absolute ton) this is one of the most innovative in terms of breaking outside of the two-column (or three-column) box.
Thanks Anthony, we were disappointed we didn’t win, too, but we’re looking forward to seeing the new redesign. For posterity, I should post a link to the winning announcements, something I forgot to do after relaunching the site.
Jason
Ahhh…I’m wondering if your entry perhaps got lost in the mail because loooking at the other that won, you guys are streaks ahead of the rest. The winners are nowhere near as good as your design…..weird.
When I see the actual design they use now I am wondering WFT? lol!
Anyway… Can we use part of your design as inpiration? I mean I truly love the navigation bar. But I don’t think the search bar should disappear (or more to the point move) in the search page. It’s a visual cue (in French I would say “repУre” – could not find the right term in English, so…) to the design and should remain static.
Well-respected online information architecture magazine 
Beautiful work as usual Khoi. What a logical brain.
Well I don’t think I’m going out on a limb here to say that I really do believe your submission will win. The IA was followed to a ‘T’ in your new navigation, and I honestly can’t think of a better way to display individual article pages (the tabs for comments vs. the content are genius!).
Sorry I’m gushing, but new Khoi or Behavior work always gets me goin 😉
Thanks to both of you, I’m happy you like it. I’m half hoping they don’t choose it… I’d like to put some of the ideas to work on Subtraction.com!
More of the golden touch of Khoi Vinh I see. I like how you’ve used elements that have popped up across Behavior projects and are distinctively your style and yet they never feel dated, but always solid.
I’m also solidly impressed by the use of green with the blue – never thought the two would work well together but there ya go.
Which reminds me, I have to send you an e-mail about the idea of tighter integration of a personal site – when I get a chance to actually sit down and breathe.
Beautiful job.
All I wanted to see in the redesign is a narrower line length – and your articles mockup does that really nicely, with the addition of outdented callouts, graphics and captions. I think this is the strongest of your three templates, with great use of white space – well done!
If I may add further comment, I see no reason why the search page can’t be similarly ‘padded’, and the front page seems to burst with content.
I love the consistency of colouring – greens for comments and blues for articles. But in the ‘recent articles’ sidebar, all text is bold (?). I feel some variation in emphasis would give more balance to this section.
A couple of other points – the text resizer gets a disproportionate amount of emphasis, and the ‘schwag/write for’ sidebars seem at odds with the rest of the layout, as they aren’t matte.
All said, there’s no way I could have done a job this good, it’s a brilliant effort guys!
My kudos goes to all who enter these types of ‘competitions’, It seems you have already got alot out of it, regardless of the results, eh?
All the html text appears “smooth” in these comps. I’m curious if you typically deliver comps this way, rather than with aliased text.
In my case, when designing comps in Photoshop I typically render the html text as smooth – especially since I started using Safari as my main browser.
Anyone else have thoughts on this, or perhaps there are some stats as to percentage of people using browsers with font smoothing turned on?
Adam, thanks for your comments and feedback. If nothing else, we got a lot out of the exercise in terms of personal growth — you learn a lot from trying to resolve these problems in such a short amount of time. As for some of your other comments: the Resize Text widget was a big question mark, and yeah it’s probably not in an optimal location everywhere, but it makes perfect sense on the article page, doesn’t it? And the Schwag and Write For Us touts are meant to suggest advertisements; so hopefully they’ll be designed with more rigor than we were able to put into them. Maybe Boxes and Arrows could have a design contest for them!
Raphy: lately, I’ve been doing all of my comps this way, with anti-aliased text (thanks for the correction; I had inadvertently mixed up those terms earlier) rather than anti-aliased text. This is for a few reasons, the most prominent of which is that it’s a more pleasant experience for me, but also because Windows can render text this way if ClearType is set properly, and eventually all new PCs will do so too…. just as soon as Longhorn is here.
“…just as soon as Longhorn is here.”
By then there’ll be no computers.
Kidding aside, I’ve started to do the same in my comps recently as well – it’s jarring to see anti-aliased text these days. Most of the people I know are on OSX or WinXP with ClearType on. on old Windows machines, there’s a Font Smoother “plugin” but only works at large text sizes – still, any improvement none the less.
Stunning designs! I love the use of color-coding and lines to seperate information. Also good idea with the clever use of columns with cross-cutting rows in the search results (I couldn’t think of any other way to describe it).
I’m rooting for this design, you guys did a great job!
damn – that’s pretty
I hope this doesn’t win. Nothing seems to stick out – if everything is the same – nothing is important. What does “archive by tag” mean????
This is Ie 5 mac, so maybe display is off??
Don’t mean to be rude, but I looked at this page and didn;t know what the !@$# to do……
Jeff, what exactly were you looking at? Tag is the same as category, archives by tag is the same as archives by category. It took me less than a moment to figure that out, and I immediately noticed that each article had a ‘tags’ field.
Also, when you say nothing seems to stick out, do you mean to someone who is color blind? Again, were you referring to this site or the design comps that were presented?
Raphy: I learned that submitting a comp with anti-aliased text may be risky in some cases.
I recently presented a website to a client directly on Safari. He approved it, but when he saw the final website on his Win XP – without Clear Type on – he objected that the text looked awful. So I had to use images for all the headings to meet his expectations. 🙁
Did you win?
Ah, loved your design way more than the final one they chose. Just seemed much better organized, easier to read. And clean, of which I’m fan.
Too bad they chose the one they did as the winner. Great work!
And, btw, love your weblog site. Of all the weblogs I’ve seen (and I read an absolute ton) this is one of the most innovative in terms of breaking outside of the two-column (or three-column) box.
Inspiring work.
Thanks Anthony, we were disappointed we didn’t win, too, but we’re looking forward to seeing the new redesign. For posterity, I should post a link to the winning announcements, something I forgot to do after relaunching the site.
Ahhh…I’m wondering if your entry perhaps got lost in the mail because loooking at the other that won, you guys are streaks ahead of the rest. The winners are nowhere near as good as your design…..weird.
Congrats on the design guys!
When I see the actual design they use now I am wondering WFT? lol!
Anyway… Can we use part of your design as inpiration? I mean I truly love the navigation bar. But I don’t think the search bar should disappear (or more to the point move) in the search page. It’s a visual cue (in French I would say “repУre” – could not find the right term in English, so…) to the design and should remain static.