Material Design
Previously under “google.com/design”, Material Design is now its own platform. This site supports their latest visual guidance—from resources to some brand new tools like Gallery and Stage.
Solution
Together with the team at Material Design, I project managed the Material Design official launch video, which involved refining the script, animating the graphics, and choreographing the many team members.
Ask
Create the official launch video for the newly designed Material Design website that articulates the design process and how Google’s new suite of tools can help aid and keep you in control of this never ending process.
“Sander brings professionalism and a high degree of technical motion expertise to our projects. His attention to detail and enthusiastic work ethic have made him a repeat collaborator and I look forward to working with him again soon.”
Stage is a design tool to build interactive experiences — Design by The Rivalry
Approach
I helped craft several versions of the script until we arrived at a final version that touched upon how the new tools and resources help with each step in the tedious, never-ending design process.
Script writing, particularly when explaining technical challenges, requires a lot of finessing, as it’s easy to bring in more complex terms and technical jargon, which can stray away from a more “human” feel.
I try to imagine myself sitting across the table with a good friend and ask as to whether certain words or phrases would be odd. For instance:
A sentence which read as follows:
“Components and patterns that are realized through implementation.”
Instead, we went with a more human-sounding sentence:
“A shared language made up of elements that speak to each other clearly.”
Being able to communicate complex topics clearly and simply via words may very well be the most difficult aspect of any project..
Gallery is a new tool that makes it easy to manage design iterations and get feedback — Design by The Rivalry
Components is a resource with modular and customizable UI components to create apps with — Design by The Rivalry
Once the script was locked, I began collaboration with the design team from The Rivalry and worked with them closely to make sure the design was right for the animation and had “room to move”. We also explored alternative scenes to provide options to the team so they could choose the best outcome.
Remixer allows designers and developers to make quick live changes to apps — Design by The Rivalry
Audio design was done by Antfood who has developed a “signature sound” for many of the Google animations.
I consider voiceover another instrument in the music, so it was important to me that the voice would stand out from the music but also that the voice, music and animation would be harmonized.
Occasionally you hear voiceovers that are well-performed, but are divorced from the subject matter. This made it important for us to choose the right authentic voice, so we ultimately went with Corinne Onetto from the Material Design team to do the voiceover. I worked closely with Corinne to get the tempo and intonation precisely in harmony with the moving shapes.
The video is featured on the top of the new Material.io website.
You can learn more about the new tools and resources in the article: Design is never done.
Services
Creative Direction, Script Writing, Animation Direction, Voice Over Guidance.
Credits
Voice Over: Corinne Onetto
Design: The Rivalry
Final Copywriting: Amber Bravo
Music and Sound Design: Antfood