Inside the Redesign: New Republic’s New Website Design

Drop caps. Pull quotes. Footnotes. They’re old standbys in print magazine design, but something of a rarity on the web. But on The New Republic’s redesigned website these design elements feel right at home in the digital world.

The stunning new site is just one piece of a new approach for this nearly 100-year-old print magazine. Chris Hughes, a Facebook co-founder, bought the publication last year, and the print magazine, website redesign and a tablet app re-launched in late January.

New Republic_Home1

The New Republic isn’t the only one undergoing a redesign. Don’t miss an in-depth look at the SFMOMA redesign at HOW Design Live presented by Jennifer Sonderby, Design Director, San Francisco Museum of Modern Art. Visit HOW Design Live for more information.

Designing the Reading Experience

A magazine known for long-form journalism—often on serious political topics—might not seem like a natural fit online. But the magazine’s creative director Dirk Barnett worked closely with digital shop Hard Candy Shell to make sure the print and online publications felt like siblings.

“There’s a common language, there’s a common set of visual elements and a visual language, but it’s not exactly the same as far as the design,” says Kevin Kearney, CEO and founder at Hard Candy Shell. A lot of the cues for those pull quotes and drop caps came directly from what Barnett was doing in print. He’d send over sketches of elements that the Hard Candy team would incorporate right away into the website redesign.

New Republic_Story

“Part of our goal was to make the flow and overall expression of a magazine feel more digitally native,” says Ryan McManus, creative director at Hard Candy Shell. “A lot of that comes through on the home page where it’s less about cramming 50 stories in and more about creating a sense of what you want to read for the day.”

The home page feels more like an alt-weekly cover than the million-things-to-click on approach taken by news sites like CNN. This restraint comes through on every page of The New Republic website design. There’s little to distract you from digging deep and enjoying the long-form content.

“It was a very reductive approach in a lot of ways, making sure that we didn’t junk things up with bells and whistles or distractions or all kinds of modules that detract from that reading experience,” Kearney says.

A Better User Experience Design

But a few well-chosen digital features do enhance the user experience. A red progress bar at the top of the page lets you know if you have time to finish a story before your boss gets back from lunch. You can change the type size instead of reaching for you glasses or simply put on your headphones and click the audio version. And if you highlight a compelling quote, a box pops up that allows you share it on social media.

NewRepublic_PullQuote-Footnote

Subtle calls to subscribe and a list of “read this next” at the end of articles keep users engaged with the brand. The total experience hits one of the overarching goals for the project: Everything is equal. What you get in print should be just as good as what you get in digital and vice versa.

chrisconverse-200As the designers pointed out to us, some of the site’s elements might have been difficult to pull off in the past. “We can finally treat content in a way that lives up to the work that gets put into creating it,” Kearney says. “I think that’s what’s exciting to us about what you can do on the web right now.”

More Resources for Digital Designers

COMMENT