Remember the time when you went a little overboard with the animation during your school presentation? You felt like a little professional designer. Animations these days have become a necessity when it comes to the designing of your website or application. If used properly, they can change the entire look of your website or mobile application or even your business presentation.
They can be used for many things like showing progress, creating a flow, emphasizing changes or to catch the user’s attention. To make sure, your animations turn out to be perfect and not annoying, Brucira brings to you 7 rules you need to take care of while creating animations.
1. Know the context
Are you creating these animations in relation to a statistic on your website? Or is it an animation that comes onto a mobile screen when that person finishes ordering something? Depending on that, your animations will change. For example, you might not want to have too much delay in between animations on your website but on a mobile application, that might just be fine.
Depending on the context, you can choose between text-only animations, text and voice animations or visuals only animations. Always keep in mind that if you’re catering to a more professional audience, adding animations to each and every thing may not be a great idea.
2. Tie the animation to your brand identity
The style and mood of your animations and their connection to the brand are important for having great interactions. Animations that match the product’s main idea and serve the needs of their target audience do far better than animations that are created without taking into account these things.
For example, if you are creating animations for your productivity tool, making use of colors that denote success, bounce effects and graphics that help focus instead of taking attention away work better. On the other hand, if you are running an app for kids or products focused on gaming, using bright colors, animated characters and more animations would work better.
3. Select a simple movement direction
Instead of trying different things that look unmatched together, try a simple movement direction for your animations. This works both for your website or mobile application and your presentations as well. Have elements either fly in from the bottom or top of the screen and stick to it. For example, a dialog box of “Subscribe” flies in from the bottom of the screen and when a user subscribes, a dialog box of “Success” follows that same movement direction. This will keep your animation style simple, similar and standard throughout your website or application.
4. Drive user’s attention to important elements
You may be using colors and position to attract the user’s attention to an element or a group of elements in your tool or website. But in addition to that, you can use animations to make that element even more significant. For example, if you are creating an animation for a statistic that says, “Our process improves your interface design by 45%.” Now, if you wish to divert more attention to the number 45, you can consider increasing its intensity in terms of size, color or even speed.
Note: Avoid doing this for all the animations otherwise you may risk annoying the users or worse, distracting them from the other elements.
5. Have a tiny delay between each animation
You can make your animation elements look like a waterfall by adding short delays to the content. The delays shouldn’t be that long. If you feel like adding delays to each element would not look good, you can batch your elements into groups. It’s important to note that you shouldn’t wait to begin the second animation after the first element is finished, instead start animating the second element after the first element has started to move for a few milliseconds. For example: Element one’s duration is 300 milliseconds. It enters at 00 milliseconds. Element two’s duration is 200 milliseconds and enters at 100 milliseconds.
6. Ease in and out of animations
The objects in the real world speed up and slow down before stopping. Think about it. Which experience is more smooth? The one where you are driving your car too fast and you slam the brake all of a sudden or the one where you gradually slow down and then stop. Having that same effect in your animations will have better acceptability amongst your users and give your animations a natural touch. How can you do this? By changing the speed of the animated object throughout the animation instead of following a linear speed.
7. Combine tiny delays and slow ending
This is a genius formula when it comes to animations. When you combine the smooth ending with those short delays between elements, the movement seems simple and yet amazing. How does this work in practice? While your second element is moving in, the first element is easing out/slowing down.
If you’ve got a product in mind that you need help with, email us at [email protected].
Check out our blog for more useful information: https://blog.brucira.com/
Follow us on social media for more design tips and tricks: Instagram | LinkedIn | Facebook | Twitter | Behance | Dribbble
