Responses by Mathis Biabany, creative developer; and Olivier Ouendeno, designer. 
 
Background: 4 Miles is a project dedicated to the music of jazz legend Miles Davis, an introduction to his musical universe through four albums from his discography. The target audience of this project is both fans of Miles Davis and people who don’t know anything about jazz. Since we were targeting a broad audience, we focused on creating a cultural yet playful musical website.

Design core: We had a certain ambition in both aesthetics and animated assets. The typographic animations and the animated vector discs are the main elements of the design. We wanted to relate the main typeface to music yet have it be simple and accessible, which is why we chose ITC Avant Garde Gothic; it has been used on a lot of album covers, including jazz ones. Each album page comes with its own color universe, sometimes related to the name of the album—for example, shades of blue for the album Kind of Blue—and sometimes to a specific mood brought by its sound.

Navigation structure: We thought of the site as a vectorial and minimalist turntable. The center of the vectorial record serves as a main call to action, to begin the experience and discover each album. It comes with a special attention to global “rhythm.” A classic turntable being a kind of “slow” device, the navigation is purposefully slow—for example, the transitions between the tracks or the records. The challenge here was to strike a balance between a slow, quiet website and one that wasn’t boring or soporific.

Favorite details: First, the use of the typography. Second, the harmony between the letters, animation and sound. The introduction of the website, for example, is an apparition of the name Miles Davis, letter by letter, synchronized with the first notes of one of his most famous compositions “So What.” Beside that, the sound design was really pleasant to make; between each album or track, a discreet crackling is used as a sound transition, evoking old turntables. All tracks begin with a little crackling sound, mimicking the stylus touching the record. It creates a mix between a contemporary digital interface and an old, warm vinyl universe.

Challenges: Unexpectedly, the most complex aspect proved to be the content. First, the choice of albums was the object of hesitation and change, since it was important to pick only four of all the hundreds of albums in Miles Davis’s discography. The final choice was driven by both the influence and success of the records, and the wish to have representative albums of various famous jazz periods: cool jazz, modal jazz and jazz fusion, among others.

Concerning the editorial part, it had to be rich and accessible for everyone—including people who don’t know anything about jazz—and yet not too long, so the website would not lose its recreational aspect. For our sources, we used a broad bibliography from articles to documentaries to books to interview to album reviews—and even comic books.

Technology: JavaScript, GSAP and some JSON files.