Congratulations to Apple for winning Site of the Month 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 the AirPods Pro 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 a 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, the site uses light and shadow, with strong blacks and whites also serving to create a bold and graphic visual language.
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.
A tool for displaying sound and noise animations was built using WebGL
Company info: Apple
Thanks to everyone in the web design community who took the time to vote and tweet: @shcheglakova, you've won a free year's Pro Plan in our directory for designers, DM us on Twitter to receive your prize!