Since its appearance in 2014, Google’s Material Design language has set up the way designers view and build interfaces for years ahead.
At first glance, it seems that Material Design is just a new graphical way to provide more vibrant colors and shadows. Actually, it‘s a new approach to developing different kinds of software products and their functionality. Material Design provides an extensive library of design patterns and guidelines that work for any medium. Originally used mainly for Android apps and Google products, its principles have quickly found their way to iOS and web design.
One of the many highlights of Google’s design language is the new approaches to animations and transitions. In this article, we’re going to provide you with some tips on these aspects of Material Design based on our team’s own experience.
What is Material Design
Material Design is a new approach to user interaction with the program elements. It has originated from information cards from the Google Now service. Google developers have come to the conclusion that elements must have physical properties - thickness, shadow, speed, so a user could have an impression of interacting with real tangible objects. Paper is the basis of the material. Take its physical properties, add bright colors, spectacular animations, minimalism and you’ll get Material Design.
The principles of Material Design
The material has not only physical properties. It can change size and color, be split into parts or merge into a solid sheet. Animation in Material Design is a very important part of the concept. It takes into account the physical properties of objects, their acceleration, and deceleration, the inertia. The movement of objects is smooth and convenient for visual perception. However, it should be used only when it’s needed, without overloading the content. Due to this, the design does not return to complicated skeuomorphism, and, at the same time, it is not as simple as a flat design.
Here, we gathered ten main principles that help you understand how to create truly meaningful transitions and animations using material motion.
10 main principles of animation in Material Design
1. Everything in the interface must follow a certain logic.
The quality of our ux/ui design services within an app mainly depends on how the user flow is designed. Material Design promotes the idea to make the user flow as seamless and natural as possible.
The material can change shapes and each object can move independently during the transitions between screens. For example, pop-up windows and buttons appear from the button that the user clicks, not in the middle of the screen, or one screen can smoothly transit into another while preserving some elements from previous one, yet reshaping them.
Our fitness tracking app concept. We wanted to deliver screen transitions in the most logical and natural way.
2. All objects must respond to touch with animation.
According to the Material Design guidelines, all interactive material objects must respond to users’ touch in one way or another.
Thus, the effect of ripples radially spreading on the interactive surface is the most common interaction animation in Material Design. Another material reaction to a user’s tap is bouncing and hovering effects on an object a user interacts with.
Having all micro-interactions in an app to provide visual feedback to users’ actions makes the UX more immersive and enjoyable.
Ripples and hovering effects as the response to an interaction. Source: android-developers.googleblog.com
3. Use icon animations.
It’s a relatively new but very promising concept. Users do not pay attention to these details, but the general perception of the application becomes easier.
Some icons like a hamburger menu or back button can morph as the button's function changes, others can appear from the context buttons with the circular reveal effect. Here’s an example of how it can be done:
Our chat app concept uses card layout and different icon animations
4. While the elements are separated, the selected object is visually lifted.
The Material Design concept provides great possibilities to create a feeling of a space consisting of physical objects on the other side of the screen. Use shadows and animations to achieve this sense of space and visually lift the object you want to highlight - make it hover above other material objects.
5. All the elements must move in a coordinated manner and in the general direction.
Chaotic motion and object's’ appearance on a screen distracts and confuses a user complicating their perception of the objects. Also, it’s better not to stagger objects letting the next to appear before the animation of the previous one isn’t even finished.
An example of animation in Material Design by Balraj Chana features transitions with a number of gradually animated elements that appear in one general direction.
6. Before you create a transition, it’s important to understand what information needs emphasis.
So you could compose both objects’ layout and the way they appear on the screen during the transitions. This will allow you to combine pages visually without a sharp movement and create the most intuitive user flow.
7. Transitions between pages should be smooth and contain common elements.
To make the user flow feel even more seamless, you can move some elements from screen to screen, so that a user doesn’t get lost and knows where they are.
A login screen for our To-Do Manager app. The app icon present on both screens ensures the consistent transition from one screen to another.
8. Acceleration and deceleration of the objects should be smooth.
To make transitions comprehensible for users, ensure all motions are smooth and as close to reality as possible. As Material Design aims to replicate the physics of the natural world, the smoothness of motions can be emphasized by the inertia during acceleration and deceleration of animated objects.
9. Each material object can have its own timing.
There is no need to animate objects simultaneously, it’s more natural if they appear one by one, so a user could look through the objects gradually. When objects appear on the screen all at once, it’s overwhelming and eliminates a clear focus.
10. Duration is important.
While Material Design makes it possible to create smooth transitions, it’s important to find the ideal duration for each animation. Too slow animations are distracting and will harm the user flow. In the same time, too quick transitions can be confusing. A designer’s challenge here is to find the perfect balance between speed and clarity of transitions.
Material Design animations by Jelio Dimitrov
The animation is the very core concept of Material Design. It’s not just a trend, but a necessary component which simplifies the navigation, improves the user experience, and, ultimately, breaths life into a product.
Want us to help you design your mobile app or website? Contact us and let's discuss your ideal product!
