Responses by Niccolò Miranda, creative director and interactive designer; and Marius Ballot, creative developer.
Background: Chiara Luzzana is an artistic sound designer. We showcased her incredible work through a 3-D interactive music experience website portfolio. Based on the art direction, we used a sound narrative that could make the user perceive the ethereal nature of her work through a consistent visual design and microinteractions.
Design core: The backbone of the art direction revolves around a 3-D sphere with a distinctive character representing the multiform audio spectrum of sound waves. The object detects the music soundtrack and reacts accordingly.
Since the portfolio is based on sound, we thought it would be interesting to design a work page based on a musical instrument and play with it. Therefore, each column of the work page is the key of a piano that evokes a note by hovering on an elastic line, which forms a pleasant symphony accordingly to the main soundtrack.
A type-driven approach also played a key role on the whole site. The fonts Roslindale Condensed and Ayer were fundamental in finding the right balance in the UI design.
Challenges: Although it might seem obvious, the syncing of audio and fading between embed video, analog dots and background music on the whole site, especially on the case studies. In fact, it was time consuming to get the analog dots from the musical score (via Lottie) started and simultaneously fade the background music out—or the videos themselves.
We certainly put a lot of effort into the 3-D sphere of the homepage created with three.js. Initially, the idea was to have different shades of color that could be scaled accordingly to a noise variable. But to make everything more consistent with the art direction, we decided to use a single color with shading and light for depth.
New lessons: Having no experience with sound development, it was overwhelming sometimes to make all the features consistent across all devices. Figuring out how to make sound compatible across all browsers—especially Safari, which isn’t the most accessible browser for audio—took a fair amount of time to debug.
Navigation structure: The fixed navigation frame is composed of a sound toggle—which allows you to turn the sound on and off, and changes in individual case studies—and an animated burger trigger, and it’s placed on the top-right corner of the page. Through a animated curve transition, a minimal menu appears, enabling you to navigate through the main pages. Scrolling down on the case studies, the elements come out with different timing and at different speeds thanks to the Locomotive Virtual Scroll.
Special navigation features: Making the experience more fun, we added an Easter egg to the landing page that literally takes you from light to dark to look upside down at the ethereal through an hidden trigger.
Technology: The key idea was to build an editable, interactive website for the client. For that reason, we used the Webflow CMS. When we got started, we used Figma alongside After Effects and Cinema 4D to create interactive prototypes. We learned a lot to bring the sound features alongside WebGL, three.js and Lottie.