Pitchfork + Daft Punk

Pitchfork • Daft Punk

Pitchfork’s cover story on music duo Daft Punk came post-SnowFall in 2013.

An online music publication, Pitchfork in large part led the hipster music revolution. Based out of Chicago, Pitchfork targets young audiophiles looking for the next new undiscovered hit. Its Daft Punk cover article, released just before their album drop, used an HTML5  layout to create a new artist interview experience.

The user lands on a static video that fills the entire frame and fire flames moving blowing across the image. The hand-drawn headline treatment, “Machines for Life” sets an immediate raw, edgy tone for the story. There is an opaque full-screen icon that can allow the user a “dynamic” view rather than standard. As you scroll down, the byline is followed by a blown-up lead written in white type. The lead is where, if you are not already familiar with Daft Punk, the subjects of the story are introduced in a simple, but powerful way. The video and flames continue, giving the very futuristic feel the band, and the article, is all about.

Scrolling down, the article begins, with a unique fade-in on a silhouette on the left-hand side. The story is broken into easily digestible paragraphs, with subhead type guiding the reader through new sections. The scrolling effectively allows different story elements to fade in – photos, pull quotes, etc.

A bulk of the story is visually divided into two columns – art on one side, text on the other –  which provides a beautiful contrast reminiscent of a print magazine reading experience. Color also indicates different story sections, and parallax scrolling allows for timing of elements to flow smoothly.

A unique feature of storytelling Pitchfork utilized is a parallax pull quote on top of a photo that swipes across horizontally. The digitized type adds to the futuristic feel of the story. The art is incorporated into the article beautifully. After scrolling through the article, you hardly realize that the only photos are simply of the Daft Punk in their suits and signature helmets. Through this article style, Pitchfork successfully made the art interesting and unique, advancing the story through storytelling elements like timing, pacing, color, and directionality.

All-in-all, I believe this is a successful use of multimedia reporting. The web design is content driven, reflecting the story through design elements, originality, and futuristic elements. It engages the article’s target audience and also reflects the subjects of the story. The only other element that could have been added would be some sort of audio, perhaps an instrumental version of their music. However, I understand when sounds start playing, it can be distracting from the content on the page and frustrate the visitor.

Kerri Williams Voyles
Advertisements

One thought on “Pitchfork + Daft Punk

  1. Good find, Kerri. This is really neat.

    It makes me want to read a story about a band I’m otherwise indifferent about. You mention that Pitchfork is aimed at young music listeners, and I think this layout caters to that audience. It’s flashy and vibrant — drawing in the type of crowd that might not have possess enough patience to make it through a New Yorker article.

    The moving flames can be a bit distracting, but I think that flair is consistent with the type music Daft Punk plays. The changing background colors give the reader a nice cue that they’re progressing through the story.

    One element you didn’t mention, Kerri, is the full-screen option in the top-right corner. We’re often presented this with videos, but not with articles. I think it’s an effective way to keep a reader in a story. You don’t realize how many tabs and bookmarks clutter the top of your web browser until you go full screen on a story like this. And then you feel like a part of the story, not tempted to click elsewhere.

    -Mark

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s