Motion design enhances software by guiding user attention and adding personality. UI animation makes products responsive and demonstrates craftsmanship. To create good CSS UI animation, animate opacity and transform properties, use fast and independent animations, and apply custom easings.
Learning about motion in user interface is an interesting adventure for me. Because I am always interested in motion graphics and I’m an appreciator of good animations, it’s natural to add juiciness in a visual design using motion. Although our agency hasn’t been involved much in motion design, we have a vision for the future of it.
Motion design is now more of a required skill for interaction designers. It was Google’s implicit announcement that motion design is now a huge, required component for creating great software for mobile, desktop and wearable devices.
Why does motion matter so much to design?
I love this line from Google’s material design principles that concludes of meaningful transactions:
Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.
It says about the fact that animation can be used to support information design and also create personality that a brand holds. Just like a movie director, UI animator can guide the viewers/users to look at the things in a pre-arranged order, adding another dimension to visual design. For example, Paper Makes use of a scale overshoot through out the app, making users easy to navigate while giving it a clear and distinct character.
UI animation can also be used to make the product feel more responsive.
For example, this micro-interaction of liking on Facebook. When you hover over all the like options, the one expression that you hover over pops out to you, just like leaning their face towards you. When you hover away from them, they get back to normal size. This simple hover-over animation offers FB users effective feedback on what they’re choosing.
While transition plays a huge part in UI animations, animated icons can add to the craftsmanship feeling of a product. Examples here are from Material design.-- Delightful details and designer Jovie Brette.
Benjamin De cock, An interaction designer who works at Stripe and presented at CSSConf Australia in 2015 spoke about the four principles of good CSS UI animation, which I think could be a good share.
Animate exclusively opacity and transform properties (Or avoid animating expensive properties)
Keep animations fast (usually around 300ms)
Animate things independently (users can’t capture all the changes that happen altogether)
Always use custom easings (In general this is the dividing line of a great/mediocre design)
There might be still a long way to go on the journey of bringing motion in our everyday design work. However, never stop learning.
