Pitchfork's creative director discusses the design of Cover Stories

The creative process behind the music site's innovative, elegant layouts for in-depth interviews with the likes of Daft Punk, Bat for Lashes and Savages.

Hip music website Pitchfork has debuted a new type of article layout that eschews the everything-shouting-at-once approach of many editorial sites in favour of elegantly simple scrolling responsive layouts more in keeping with a Sunday supplement – although with video and animation used alongside photos and illustration. It's a form that feels more natural for reading longer features, especially on a tablet – and is a form that after the popularity of the similarly artfuly laid-out Snow Fall story on the New York Times site, many have predicted as the future of long-form journalism on the web

We caught up with the site’s creative director Michael Renaud to find how these Cover Stories are designed.

We also discussed Advance, a way of presenting pre-launch album streams that aims to replicate the experience popular with previous generations of music fans of listening to an LP while staring at the sleeve artwork. Advance provides a series of abstract animations or still artworks on screen, so that listeners can focus on the music in similar fashion.

DA: What was it about traditional online layouts that you wanted to improve on?

MR: "The Cover Stories are how we explore the possibilities of presenting our features. Our editorial staff has been producing some amazing work, and we felt like it deserved to be highlighted.

"We're trying to build something that feels like you're a little more invested in the story. Most people are fully on board with consuming their media exclusively through digital means, which I think makes a 'print feel' even more special: like it's a luxury – which is funny when you consider how luxurious it is to be able to have what we have with the Internet.

"There's something about just sitting with a magazine that feels a little bit more special than it did five or 10 years ago – like you're treating yourself. Even though the tactile nature of a magazine is impossible to reproduce on screen, releasing the way people have been traditionally presented with sidebars of secondary content online while reading a long form piece is kind of an easy way to make that content feel more special."

DA: Is the aim to create a custom layout for each Cover Story or provide a template that content pours into from set fields in your CMS?

MR: "Right now we're creating a custom layout for each story. We do this so we can test out new ideas without too many guidelines and restrictions, but also so each story is art directed in a way that suits the band and story in tone.

"Editorially-driven websites today should be improving and changing on a regular basis. Gone are the days of redesigning a site and leaving it be for three years."

Michael Renaud, creative director, Pitchfork

"There are so many interesting advancements being made in web technology and how we process them, and we want to be exploring those things as they happen. Although we try to be conscious of user fatigue with too many changes, and maintaining a consistent brand identity, we're also trying to be conscious of just doing the best we can to give our readers a good experience. A more robust and design-minded CMS is another issue."

DA: Tell us a bit about the design and layout process for Cover Stories

MR: "It usually starts with the pitch from the writer. Once we know we're doing one, we focus on the story's concept and decide on the visuals that will best complement it. While the writer works on the piece, we'll be scheduling photo/video shoots or having illustrators start on a brief.

"When the first draft comes in, we'll then give it a storyboard in InDesign, and then our development team begins working on it. Editorial will typically have a final look and make any necessary changes once it's about 80-90 per cent together on a staging site."

DA: Tell us about the concept behind Advance.

MR: "Advance is our platform for streaming albums before their release date. It was born from the idea of enjoying an album in real life and experiencing the packaging alongside it. So we provide a blank canvas in the browser as an opportunity for artists to submit whatever imagery they'd like as a companion to the album.

"Although we have links to buy the album, and pop-out modules for track listings and descriptions, the focus is on the images and videos submitted by the artist. This process is led by our technical director Matt Dennewitz and editor Brandon Stosuy.

"It's been fun watching what comes in – I think we all originally expected that most artists would be contributing just the album artwork, but most go the extra mile in creating custom GIFs, little notes to the readers, artwork form one of the band members, etc. It's really fun."

DA: What was the biggest technical challenge when creating these sections, and how did you overcome them?

MR: "Our biggest technical challenge has just been optimizing this for every screen size and browser type. In the end, we've conceded that this is meant to be experienced on a desktop or laptop. There are still limitations with tablets when it comes to the animation, but we're trying our best to optimize that environment as best we can with the resources we have.

"For mobile, we don't even bother. It's just too small for this type of execution to even make sense. If I'm reading this story on a screen that small, I just want nothing more than dark type on a light background anyways."

DA: In general, with projects like this how do you balance simple, elegant design with commercial imperatives?

MR: "We put our readers before commercial imperatives, which usually informs how ads and additional UI elements become integrated. We'd like to have it happen organically so it makes sense and feels like it belongs with the content.

"Innovative and transparent advertising executions are a priority for us, and we're not looking to shoehorn those things in."

DA: How do you intend to build new feature types based on what you've created?

MR: "Although we have various plans in the works, we're also trying to stay flexible and agile. So for now, not sure."

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...