Table of Contents
Top 8 Animation Best Practices
1. Object Responses
This isn’t so much about the overall video, but more about how certain objects respond when coming into contact with other objects. For example, when you sit on a sofa, you sink into the cushions a little. Whereas when you sit on a wooden bench, the bench doesn’t move. These things need to be considered, and where there is movement, this can be totally exaggerated using animation to enhance the comedy or deliver the message.
How you choose to exaggerate these object responses influences the overall tone of your animation. The more exaggerated, the more comedic. The less exaggerated, the more realistic.
You must remember when doing this that the total volume of the object must stay the same at all times, there’s just a redistribution going on.
Any movement starts with an anticipating action. Whether that’s the lifting of a hand before picking up a glass of water, or the swing of a leg before kicking a ball, there’s always a before to the action itself. So you need to incorporate this into your animations. If you animate actions without their before motions, they’d be both unrealistic and sudden.
The same concept can be applied to web and app design. For every animation you want to create for your site or app, you need the actual button, image, text or feature you want to animate. You can’t animate a button that doesn’t already exist.
This refers to the positions of characters and objects, the lighting and angles. Naturally, viewers will perceive actions performed as more important than others if they appear in front of them, are brighter or are bigger. The way this carries itself into web and app animation is through shadows and angles; drop shadows can be particularly effective for enhancing movements.
4. Follow Through and Overlapping Action
There are two concepts here. The first refers to the idea that when something in motion stops, other parts still follow through. For example, when a kite first hits the ground, the tassels might still be floating down to the ground after it. The second refers to the idea that different parts of an object don’t all move in unison, there are different movement rates for each. This needs to be factored into animation. An animal’s arms and legs move at different times, for example, but they don’t just go one after the other either.
5. Speed & Easing
The speed of animation can be controlled by the number of frames used. The more frames, the slower the action appears. The less frames, the slower the action appears. Easing makes an animated character or object change speed throughout the animation. In reality, everything accelerates and slows down before and after motion. Avoid your animated characters and objects from stopping in a jarring way through the process of easing – get them to slow down before stopping.
This can be related to both artistic animation and animation for marketing. In both contexts, the audience wants to see something appealing. Your animated characters and objects’ appeal can be anything from their hair color to eccentric shoes. More creativity is often more compelling. The bottom line is that you avoid your animation being boring.
7. Stay True to Your Brand Identity
Just because something is show stopping doesn’t mean it’s right for your brand, or suitable to portray a particular message. Just like you shouldn’t use certain colors (even if they’re electric) when they aren’t appropriate for the context, you shouldn’t use certain styles that don’t suit your brand’s pre-existing identity, or language that doesn’t suit your messaging.
8. Create Animations for Different Devices
In our digital world, people are accessing your website and app from countless different devices. It could be an iPhone, Android, iPad, tablet, laptop or PC. Animations will behave differently across devices, so you need to bear this in mind, especially with animation for marketing. Otherwise you risk your animation having the opposite effect to your intention. The device you’re designing on is not necessarily the device your users will be accessing your site/ app from, so what they see could appear differently to what you think you’re creating. You need to test your animations on different devices.
Motion Graphics: Animation for Marketing
Animation isn’t all about pure art and entertainment, as we’ve highlighted it can have a lot to do with marketing too. It is often used to deliver marketing messages, make ads that convert and enhance web and app design. Motion graphics can make a particular feature stand out, deliver a particular message, highlight your calls-to-action, indicate what action needs to come next or confirm an action has been made clearly through movement. Generally speaking it enhances the user experience of apps and websites. Unlike the other types of animation, it is nowhere near as focused on storytelling.
Also a benefit of its use in marketing is that it often costs a lot less than other animation methods.
Animation for marketing and apps can take the following formats:
- Animated logos
- Social media posts
- Explainer videos
- App store videos
- Loading pages
It’s generally recommended to avoid changing your logo as it’s how people recognise your brand, and changes can be confusing and set your brand awareness progress back. However, there’s an exception, and that’s when it comes to animation. Animated or responsive logos can increase conversion rates and make your branding feel more dynamic.
Animation is compelling and engaging, that’s clear to see. So take advantage of this and use it for your ads. You want your ads to act like magnets, drawing people in. The movement, creativity, exaggeration, communication and color benefits of animation are the perfect way to achieve this. Make your ads show stopping, that people can’t ignore.
Social Media Posts
The same applies here as above. Lots of social media revolves around the visual elements, especially platforms like Instagram and Pinterest. You can use animation to stand out from the crowds.
Explainer videos are marketing videos dedicated to explaining a product or service. We have a guide to explainer videos here. Animation is an effective tool in explainer videos because it can relay complicated messages as simply and clearly as possible, and sometimes portray things that are impossible using other video techniques such as live action. It makes explaining your product or service more engaging as live action can often prove boring in this context, especially when discussing complex details and technicalities.
An empty screen doesn’t offer any value or engagement potential, but an animated loading page certainly does. If you leave your loading page blank, you risk your web or app users abandoning altogether out of boredom. Whereas if you animate the page, you can entertain your users while simultaneously showing off your brand values and voice. You can be playful, interesting, and unique. You can be anything that draws your users in further.
Animated microinteractions are created using motion graphics. They refer to the little interactions you undertake on a website or app and can be enhanced by motion, whether that’s to highlight the action, confirm it’s been made or anything in between. Generally speaking, it improves the user experience by making it clearer and more intuitive. Not only does it improve the user experience for your customers, it also helps your marketing objectives by allowing you to draw attention to certain features you want users to engage with.
Particularly important for user experience too, animated transitions make the process of using webs and apps a lot smoother. The “swipe right” element of Tinder is a key proponent of its branding and success. Imagine how different the Tinder experience would be if you just tapped and the screen changed without any slick transition or motion required.
A transition doesn’t just have to be a swipe, especially as this is harder to emulate on a web. A transition can also be a fade, a shrink or enlargement, a blur, drop down and much more.