Google launched a design guideline for Android Lollipop called Material Design at the Google I/O conference on June 2014. They created a visual language for users that must unify the experience accross devices. You can read more about the subject on Google’s website.
Animations (motion, interaction & transitions) are a key part of the specificiations. Read more about them in the official specs:
“Perceiving an object’s tangible form helps us understand how to manipulate it. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system”
Motion is extremely important for modern applications but be careful to not abuse of it. It have to be subtle and must have meaning to enhance the user experience (otherwise it could have the inverse effect).
A lot of designers have already adopted the guidelines and here is a collection of some great examples of Material animations.
Instagram with Material Design
An unsolicited redesign concept of Instagram by Emmanuel Pacamalan.
Emmanuel Pacamalan: “Here my concept of how instagram would look with material design. Material design is the next step in Google’s design evolution for Android. Also, some animations transitions may be too much but it just there to showcase what can be and to showcase separation of elements.”
Google News UX and UI concept
George Kvasnikov made a fantastic UX and UI concept for the Google News platform.
I really recommend to read his research and analysis on his blog.
An animated alarm UI concept made in Adobe After Effects by Balraj Chana.
Material design concept by Ehsan Rahimi.
User profile animations by Dmytro Prudnikov.
Jovie Brett made some great animations on Dribbble, based on Material Design.
Material animations with FramerJS
Francis Cortez recreated some parts of the Google’s material design showreel in Framer (tool to prototype interaction and animation) and shared his code on GitHub.
You can read more information about his process on his blog.
- Material design in the 2014 Google I/O app
- Material design specifications
- The state of Interaction Design tools
- How Google Fails at Implementing Its Own Material Design
- Material design resources
Do you have other stunning examples or resources you want to share about Google Material design animations? Please let me now in the comment section below or on Twitter.