Material Design

Previously under “google.com/design” Material Design is now its own platform on Material.io. This site supports their latest visual guidance—from resources to some brand new tools like Gallery and Stage.

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.

— Jonathan Lee, Lead Design Manager Material Design at Google

Approach

Together with the team, I crafted 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.