Take 5

Publication & Web Design

Jazz has a vibrant and fascinating history that has influenced much of the music we’re listening to today. Unfortunately, Jazz is often associated with stuffy old men, hotel lounges, and Kenny G elevator music. In addition, it’s largely overlooked and forgotten by younger generations. It doesn’t help that many of the popular jazz magazines seem visually outdated and aren’t an accurate depiction of the vibrant, improvisational, collaborative, and dynamic nature of Jazz today. So how do you change the perception of an entire genre of music so it appeals to a younger demographic?

In our quarter long class on publication design, I created Take 5, a quarterly magazine devoted to the state of jazz music today and its intersection with other genres, cultures, and arts. Jazz has influenced almost every genre of popular music that we listen to today, including R&B, Hip-Hop, Gospel, and Country, so Take 5 aims to a new audience to the ways it is unknowingly shaping their culture.

  • ClientSchool Project
  • Timeline11 Weeks
  • RolesLayout, Typography, Art Direction, Front-end Development, UX Design, Photo Editing
  • ToolsAdobe InDesign, Adobe Photoshop, Adobe Illustrator
  • CollaboratorsN/A
Problem

Print and Digital are vastly different mediums with their own strengths and weaknesses. Though nothing beats the physical feeling of holding a magazine in your hands, print design lacks the dynamic experience of digital platforms like video and audio. This poses a challenge: how do you translate the physical experience of reading a magazine into a visually similar but interactively different web experience?

User Personas

Though Take 5 primarily targets a younger generation of music enthusiast, the ultimate goal is to attract a wide range of readers, from casual music enthusiasts to professional musicians. Whether you’re “old school” or in school, there’s something for you to learn in Take 5.

Logo

The magazine’s name is a play-off of the famous jazz song “Take Five” by Dave Brubeck. It also implies that readers should take a break from whatever they’re doing and read the magazine. The masthead connects two typefaces, a serif display font, Majesti Banner, and the sans serif font, Circular, which is symbolic of how Jazz’s history is shaping and evolving a new generation of music. The smaller sans serif letters are lined across the bigger type, almost appearing as if they are small notes on a sheet of music. Differing in color, size, shape, disposition, and layered on top of each other, the masthead aims to mimic the dynamic, collaborative, and improvisational nature of jazz itself.

Take 5 Logo
Design System

Part of connecting with the magazine’s core demographic means sourcing content from a wide variety of genres, musicians, and mediums, to illustrate how they connect with Jazz. Aside from more traditional topics, such as an interview with Esperanza Spalding and a look back at the work of Thelonious Monk, I sourced several articles on topics that break the mold of what might normally appear in a Jazz magazine. Articles about a poster designer in Switzerland, an underground DJ club in L.A., Kendrick Lamar, and Lisa Simpson, each target a different audience and tie them back to the magazine’s central theme. With such unique content, I wanted each article to shine with its own personality while simultaneously contributing to the magazine as a whole, much like individual musicians in a band. This is accomplished through the magazine’s layout. Though the print articles may differ in color, imagery, and typography, each one starts with a hero image in the left and the content on the right in a double-column treatment. When pulling this layout onto the digital platform, I kept the unique traits from the print article in the hero image, title, and the pull quotes, while changing the text to a single column layout as you move down the page.

Take 5 Magazine Sun Ra
Take 5 Magazine Sunu Ra
Take 5 Magazine Article
Take 5 Magazine Article
Take 5 Magazine Selmer Mark VII
Interactive

It seems strange to read about music without having the context of what it sounds like. But how do you create a seamless audio experience that works alongside the written content? While audio and video can easily be integrated into a digital platform, the printed medium is lacking in this experience. With over 70 million paid subscribers, Spotify was the solution, specifically, Spotify codes. By integrating Spotify Codes into each article, readers can easily scan the code with their Spotify app, and queue up a tailored playlist for the article they’re reading. This creates a more dynamic reading experience. I strategically placed the codes at naturally occurring pause within the content so they don’t detract from the articles.

Website

As an extension of the brand, I created a website for users to browse limited articles, subscribe to the magazine, and purchase issues. Translating articles from print to web posed an interesting challenge. While the print articles made use of dynamic imagery and typography, those design choices couldn’t always be practically carried over into a user friendly digital design. As a result, I brought the unique character from each article into the page header and pull quotes while keeping the text and body layout more uniform. After establishing the user flow and visual direction of the site, I began developing the site using css grid and flexbox. Using a gridded overlapping structure, an unconventional navigation bar, and striking hover states helped connect the experience of the website to the dynamic design of the magazine.

Take 5 Website
Take 5 Website