We’re finally getting to a stage where brands are recognising the power of web animation. We’ve already gathered together the best CSS animation examples and shown you how to code them, but in this article we’re going to share some top tips for getting more from motion in your UI design projects.
Lisi Linhart is a creative developer who specialises in creating interactive, moving things on the web (see the colour-changing whale above in action). At Pixel Pioneers, she took to the stage to explain to the audience how to keep animations performant across browsers, and showcase the different animation options we have on the web today. We caught up with her afterwards to hear some more top tips.
DO keep things consistent with design systems
“Consistency is getting more important, and having an overall view of all your animations is also important,” Linhart summarises. UI Design Company Chennai
DON’T include animations for the sake of it
“Figuring out what goal an animation has and if it is actually useful is very important, instead of just building an animation to have an animation.”
Design systems can be beneficial in this regard, too. When you decide the different types of motion, they are linked to the different purposes within the interface.
DO consider different Devices
Contingent upon the job movement is going to play in your item, you can present various methodologies dependent on gadget utilized. For work area encounters you could add impacts that respond to mouse occasions, for instance, while a versatile encounter may have activitys activated by the development of the device.
DON’T force animations on users
DO pay attention to existing mental models
There are certain mental models, based on real-world physics, that dictate how we expect objects to behave and how we react to certain movements.
A good place to start is with the classic 12 principles of animation.
DON’T forget your audience
While lots of bouncy motion might help keep a young audience engaged and excited by your product, an older audience might find it distracting and off-putting as they try to absorb the content at their own pace.
DO stick to Transform and Opacity
Of these, CSS Transform and Opacity are the most performant. Bear this knowledge in mind when designing your UI animations, for smooth and user-friendly experiences.
DON’T make animations too long
Getting the timing of your animations right is all-important. “So keeping the animations short in interfaces is important.”
There’s a caveat though: if you’re animating a transition, you\go for a slower animation, so as not to attract unnecessary attention.
Article Source : CreativeBlog