Right now, you’re looking at the redesign we’ve been sweating over for months, created by our incomparable design partners at Simple.Honest.Work. And you’re probably wondering, “What was wrong with the previous design? You’ve barely had it for a year!”
True, many people had grown to love our previous design–which was also created by Simple.Honest.Work. But there were some profound problems with it. While it was great at showing off big, crisp images, we had no sidebars pointing to highlights from our archives. And the process of clicking through to find stories from previous “issues,” was a bit clunky. Our original idea was that the website would be less like a blog and more like a bonafide magazine section. And with that conceit, some of the metaphors we were aiming for, such as a “spine” of color-coded bars pointing to previous issues just like magazine spines on a shelf, could have worked better.
So what you see before you is a direct attempt to address those basic problems of functionality, while at the same time doubling down on what you come to expect from Co.Design–that is, big, flashy images that get you inspired. (Not to mention the interesting stories that keep you informed, of course.) That’s why the top-most images on each article and homepage are even larger, and why we’ve created an entirely new slideshow system. As for functionality, we’ve replaced our old system of paginated content with an infinite scroll. Now let’s get into some details!
Our logo has changed. Previously, the “Co” was a direct descendant of the “Co” you find in the Fast Company logo. It made sense, to create a parent/child relationship between this site and the mothership. But since that original logo was created, we’ve launched two more spin-off sites: Co.Create and Co.Exist. We couldn’t keep up that use of the “Co” without making the logos for each of the sites look hopelessly similar. So we had to ditch it.
Instead, we went with something that we created which is meant to show that the various sites all come from the same family, but each follow a different voice and subject matter. It’s a dead simple logo, we’ll admit. Some people have already told us they don’t like it (Thanks, Nicole!). But we had to keep it very, very simple because it needs to be recognizable at the thumbnail size on Twitter. That design criteria made creating a logo much harder, but the fact is that Twitter is the single most important contributor to our traffic–and the visual noise you see in your Twitter feed creates a fiercely competitive atmosphere.
The typeface that you see in the logo is actually the same typeface you see in the headline and subheds: FC Zizou, designed by the unbelievably talented Christian Schwartz. Christian originally designed that face for the magazine, and the family is used throughout the print edition. To maintain something of a parent/child relationship, he adapted it for use on the web, along with another custom font we use, FC Kaiser, which you will see in the comments (more on that in a second).
The point of all this is to make the website feel like a piece of the magazine–it shares a similar design language. Those details run throughout the design you see here. The cuts in the images are a central feature of the magazine. So are the editor’s notes (see above) and our pull-quotes (also see above). Open up the print edition, and you can see a direct line of descent. Compare them side by side, and I think you’ll agree that Simple.Honest.Work did a phenomenal job capturing the spirit of print redesign created by our magazine’s creative team, led by Florian Bachleda.
One problem: The comments aren’t quite styled right. The fonts are wrong, and they’re too big. When that problem is corrected, you’ll see a mixture of FC’s signature fonts. That’s because we wanted to metaphorically give you a piece of the website’s voice. And we wanted to show off the comments as beautifully as we could, so that they could really feel like a valued contribution to the site, rather than something relegated just to the bottom.
So those are the main points. We hope you like it, and if you’ve got any issues with the site’s functionality or you see any bugs, there’s a nice new feedback button on your right, in red. (Cool, right?!)