After the presentation of Material design this year, we couldn`t wait to see the new guidelines from Google. Animations became essential for screen designers, and Google gave us a preview where this trend is going to.
At Five, our design team always tries to illustrate interactions to developers and clients. It helps us with testing and visualizing the final layout.
In the near future, the advances in device capabilities will allow us to use more complex animations. So it`s essential for us to challenge developers to look ahead and start thinking how to make more complex animations.
We love to experiment and after looking at what Google suggested, we started to wonder where this could take us.
We made four different types of animations, and we could determine some rules for each material. In the tradition of Android, we named the materials by candy names – Bubble Gum, Marshmallow, Jawbreaker and Jelly – each one had a distinct behavior that reflected the name.
Paper is just the wrapping around the candy
We wanted to start with something simple, and yet show the behavior we wanted to have. So we started with different shapes and determined some rules.
Bubble Gum material – outwards animations.
Marshmallow material – imploding animations and softer reaction.
Jawbreaker material – subtle bouncy animations.
Jelly material – subtle bouncy animations.
Sweet and sticky
In the real world objects have weight, so they have different acceleration times. Also, they have a different consistency – that`s why various types of surfaces respond differently. We tried to see how it would feel under the finger and to appear tangible.
This shows how complex it is to make these animations and how some of these materials would be hard to realise in real life.
With enough time, we could get this come to life, and hopefully it will inspire developers to try and emulate this animation.
It`s always hard when it comes transferring physical motion into digital, especially when we have to use 2D graphics. Some developers look it as an unnecessary hassle, and others view it as a challenge.
We took these materials and to see how they behave with other components, like menu drawer, sliders, drop downs, checkboxes and radio buttons. Some animations are subtle, but each one uses the principles we determined.
The main point of this exercise was to give more appeal to the interactions so they would encourage users to engage the interface.
Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation. – Walt Disney
Design in motion
We determined that you could bring a certain tone to apps with copy and design, now we have a third element to keep in mind. We used each of the materials on different interfaces, so we determined the transitions between screens and also the icon animations.
Here is an example of a player app that uses the contracting motion of marshmallow. We can see here that sometimes all the transfers should happen quickly.
Another way to open an article, this way we have a fast animation, and adds meaning to the transition.
For the jelly example we made a concept for a messaging app, that would use characters rather than boring comic clouds.
It encourages deeper exploration of the app: what will happen if I touch this? And then this? – Google
The abuse of motion effects can spoil the experience, so be careful with the amount and intensity you use in your apps. The transitions should be done well and run smoothly so if you cannot afford the time for polishing them, don`t do them at all.
In the icon animation you can see perfectly how the materials behave. For the Bubble gum animation of the icon we determined we wouldn`t use it. Because it uses too much motion to transfer from one point to another.
Don`t do animations just because you think they are cool, try to find a meaning to why you should do the animations and transitions, don`t abuse the layout with them.
As we start animating layouts, we still have to find out the right amount so the app doesn`t look like a cartoon. I`ll talk about animations and the use of it in a post later on, but keep in mind that these effects should be subtle and used when we want to promote some actions or content.
Be sure you check the project on our Dribble account.