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?
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.
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.
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.
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.
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.