What is Google’s Material Design: Expanded Motion Guidelines
June 16th, 2017
Material Design is taking the Design industry by storm.
With so many people wanting to learn about this Design language from Google, we thought of summarizing it for all the aspiring designers out there.
Let’s start –
Material Design is a design language that brings designers and users together in the most magnificent platform.
Material Design is the study of what goes underneath the screen of a digital device.
It gives us the knowledge of how the surfaces inside our devices work. According to Google’s Senior Interactive Designer, Bethany Fong, inside our digital devices, there is a little bit space. This space allows every designer to create a meaningful structure.
Material Design explains us how surfaces work in the virtual world.
Not only does this design language has the classic principles of good design but also brings users closer to reality.
Why Material Design is called Material Design?
In a layman term, a material is something that moves, occupies space and has a surface. Google’s Material Design came with a similar concept that projects Material as a metaphor. By giving the design a surface and edges, the visual cues could be depicted just as it is in reality.
Think of it like using an app on your mobile. There is a glass screen between you and the app interface. Though this screen makes it handy for you to carry the device, it prevents you from actually experiencing the software and the materials it is made up from.
Material design revolves around theories in the real world. It tells us that material is hugely dependent on motion.
Material is Responsive:
Your material should be responsive. It should quickly respond to user’s touch.
Transitions of materials never keeps you waitingTransitions on mobile devices happen in about 300-350 millisecond. You see how the example on the below takes quick actions. This is something you must aim for.
That’s not it, transition depends on the screen size. If you are using an app on tablet, the transition time has a slightly longer duration (400-450 milliseconds).
However, durations and animations on the web work differently.
Since transitions happening on the web never give you the similar app-like experiences, things on the web are treated in a different manner. Though the screens are bigger, transitions take much lesser time as compared to the app.
Staggering Content in View:
Staggering a grid as they travel really looks good but it is important that you note the time frame in which the list appears on screen. Staggering should happen quickly. Each item should have a very short delay and should travel really fast, not more than 20-25 milliseconds apart.
Material is Natural
Material is inspired by the forces in the real world. This includes concepts of gravity, friction, momentum and so on.
Accounting to the laws of Physics, nothing in this world can instantly start or stop. Everything has momentum and speeds down before coming to rest.
So we can say that material in motion can be best defined in easing curves that represent acceleration and deceleration.
The arc motion of the material encourages the diagonal movement with a smooth transition effect.
Similarly, the acceleration and deceleration of material that happens on-screen should be smooth. When you see material move on-screen, it clearly shows that it is excited to pop open, yet it takes a little bit time while closing.
Material is Aware
Material is well aware of the objects it is around and also the objects within. When we see the transition of elements in view, surroundings are choreographed in such a way that it depicts relationships between the elements.
Material design created a concept that states that surfaces need space to move. To come into view, it pushes other object to make room for it.
It can either rise above it or push it to make space.
According to the Elevation Theory, material is aware that it cannot pass through other surfaces to come into view. Materials tell a really nice story which involves various elements of UI.
Material is Intentional
Every movement that material makes has a purpose. Rather than adding elements based on how they look aesthetically, material in motion has the purpose to guide you at each step. This makes sure that you don’t get lost while using an app.
Intentionally Adding A Shared Button
For example, the avatar in the collapsed card is used as a focal point that guides users with the content. Once the card expands, contents on the page change. But, the avatar in the card remains the same. The avatar is a common shared button with the sole intention of guiding users with the app.
However, it is very easy to go overboard. You might want to add extra elements that can easily confuse than give awareness.
Another example of awareness can be – Letting the users know what is about to happen before it actually happens.
For example; If you are using an app where the key interaction is to swipe surfaces away, you need to make it understandable for the user.
What do you do when the surface they are swiping is not available? You add resistance to it to signify that what they are trying to do isn’t available.
For items that are available, swiping should be smooth and interactive. They should have no resistance and should feel like it is inviting you to move around.
The basic fundamentals of Material Design brought many new concepts to life. Transitions got quick, easy and very real like. This was one process that expanded directions for designers and engineers and got them out of their UX comfort zone. It’s this mixture of form, function, and sheer pleasure that keeps our users (and us!) engaged and coming back for more.
Blog Credits: Google Material Design