AirPods Pro wins Site of the Month January 2020!

Congratulations to Apple for winning the best site of January for AirPods Pro. Thanks for all the votes and tweets – the lucky winner of the free year in our Professional Design Directory can be found at the end of the article!

The goal of our site is to give the audience a feeling of having experienced AirPods Pro before ever putting them in their ears. To have the site mirror the effortless feel of the product, we strove to create a fluid, uninterrupted flow that balances the technology of a Pro Product with the simple, magical user experience.

A feeling of having experienced AirPods Pro before ever putting them in their ears.

The story is told through one continuous movement that passes through a fixed-frame, activated on scroll, and following a linear narrative of how the viewer would experience AirPods Pro in person — from the initial fit through exploring the features. The key product feature is the ability to easily switch between noise cancellation and Transparency mode, which allows you to continue focusing on what you are listening to while also staying connected to the world around you. To represent this duality throughout, we utilize light and shadow, with strong blacks and whites also serving to create a bold and graphic visual language.

A tool for displaying sound and noise animations was built using WebGL

Early exploration showed scrubbable video wouldn’t work for all browsers or devices. Instead, we created 1600 still images out of video animation, with a loading strategy to progressively enhance the animation frame rate, smoothing playback as more assets are loaded. A prototype tool for displaying sound and noise animations was built using WebGL, with configurations saved as detailed texture images that could easily be imported into the final build.

Company info: Apple