SHAZAM
MOTION GRAPHICS | DIGITAL DESIGN | BRANDING
Studio: W12 Studio
Creative Direction: Mike Albers
Design: Dominic Burt
Motion Graphics: Pedro Amaral | Andy Ellis
Shazam is a mobile application which allows the user to identify, explore, purchase and share music content.
While at W12 Studios, I took part in developing the motion design language for two components of Shazam: Support and Vision.
The Vision project aimed to envision a potential future of the Shazam app with slick and fresh new look, much improved functionality, worked cross-platform and a set of new exciting features.
SHAZAM VISION
Tasked with the creation of a new product identity, we proceeded with visual and motion experimentation.
The idea was to create a sound reactive identity, a system capable of identifying the type of music and visually represent it.
For this, we developed a rig that responded to audio and volume levels, its ethereal rings would form while listening, its colors, shape and mood would vary depending on what it was listening to.
|
We also created the possibility for a user to have their own avatar, based on the user's musical ID data and through an algorithm that created its very own and unique Shazam ring.
Data such as the amount of purchases a user had, the type of music the user listened to the most, the kind of music the user searched for the most, etc. would unlock different ring styles for the user.
The following videos illustrate the graphic evolution and our motion exploration, along with a test on the ring reacting to music style and music levels.
SHAZAM RING - VISUAL PROGRESSION
This video shows the graphic evolution, creative process and explorations of the Shazam Ring
SHAZAM RING - BEHAVIOUR VARIANTS
The following video shows the behaviour of the final Shazam ring reacting and adapting to different musical styles.
TECHNICAL BREAKDOWN
As part of the collaboration with Shazam, W12 was asked to provide a full technical breakdown of the reactive ring to help the developers build a working setup in code for the app.
Below are a few of the provided Motion Guidelines. This exercised proved to be crucial for the development of the moving logo and eventually became a fundamental step in my work process as part of motion language creation and as a deliverable for clients to better understand how to make the most of their moving logo and also to better represent and communicate with their new brand.
LOGO OPENING BREAKDOWN
LIGHT RING SETUP
AUDIO RIG BEHAVIOUR
