A standard visual identity guideline document used to just be about a brand’s logo, typeface, colours, and imagery.
Now that we are fully embedded in the digital age, companies rely on digital platforms and screens for marketing their brands. Screens are everywhere: your phone, your computer, in stores, on roadsides, at bus stops. And on screens, there is a content type that reigns supreme: video.
Animated content grabs the attention of consumers in less than 1/10th of a second. It’s no wonder that 75% of marketers are using animated videos to drive more audiences towards their brand. They’re engaging and connect with buys on a personal level.
Movement can add personality. Think about it – an object bouncing up and down may suggest youth. Compare that to an object slowly floating down the screen and you may feel more calm, or serious. What about an object zooming into the screen, and then speeding off again? Personality helps develop an emotional connection with our audience, thus influencing buying decisions.
As mentioned earlier, animated content grabs attention (Smith, K. and Abrams, R., 2018).
87% of marketers claim that using animations increases traffic to their websites with 33% of video created being animated (Wyzowl). Perhaps because people are twice as likely to share video content with their friends than any other type of content.
Assists with storytelling
Animated video content can help with brand storytelling as well as providing a way of explaining complex processes visually. 96% of people have watched an explainer video to learn more about a product or service (Wyzowl).
Improves user experience
Motion makes digital experiences more intuitive and exciting. It can also create a better user journey by allowing the reveal of information at the right time.
Increases user engagement
Motion can also drive users to take action by highlighting what it is that you want the user to do.
Take a look at our article on short form video to learn more about the importance of video content.
As mentioned above, it’s important to think about what your brand should feel like when it moves. Go back to your brand strategy – your personality, values, and target audience. Is your brand bouncy? Punchy? Energetic? Calming? Serious? Make sure your transitions and animations reflect those personality traits. A fast and bouncy movement would convey youth, fun, energy. Whereas a slow, fading, easing movement would stand for serious or classy values.
Then, work on your basic animated elements:
- Logo animations
- Kinetic typography – how does your copy move?
- Transitions – how do elements come on and off screen?
Set principles for things like how subtitles appear, or how names at the bottom of a talking head video appear on screen.
Once you have your basic motion principles nailed, you can start to think about more in depth animation styles for storytelling – what do characters look like? How do they move?
As mentioned above, including motion on your website is a great way to guide your user to what you want them to do, engage your user to hold them on your site for longer, encourage them to share the site with their friends, and also create a memorable, lasting experience in your users’ minds.
Here are some key ways that a website design agency can add motion:
Add motion to elements when a user hovers over them.
Add slight movements in the entire website to add a feeling of excitement. Animations like this should be unobtrusive – don’t let motion distract from what you want your user to actually do on your site.
Animate the page as the user scrolls with techniques like parallax which uses multiple backgrounds that move at different speeds to create a feeling of depth.
Create dynamic backgrounds that subtly animate behind your core website elements. Again, be sure to keep the balance between compelling content and distracting content. A dynamic background shouldn’t make the overall UI and UX design look heavier.
Incorporate animations to counteract loading times and avoid irritating users (check out our article on site speed to learn why this is so important). By entertaining the user while information is being loaded, you can create an illusion that loading time is shorter, as well as reassure the user that the system is still handling their request.
Add motion to key parts of your site that you want users to see. For example, sign up forms, CTAs, links to pages you want to guide them to, chat bots, promotional pop-ups.
Hard cut transitions can be too fast, clunky and frustrating for users. Animation allows you to bring in new information more subtly and softly, creating a better viewing experience.
Motion can help you present lots of images or sections of copy without interfering with the UX. Animations can also help demonstrate products and services or processes without having to add reams and reams of copy.
The world is a digital one. Which means brands should be looking to incorporate motion into their branding principles now, and using it across all of their digital touchpoints, including their website design. Motion helps brands capture the attention, hearts and minds of consumers, leading to greater user experiences, greater brand awareness, and ultimately, greater engagement and conversion.
Propeller is a website design agency and development agency. We look holistically at your brand, business and objectives to create a bespoke digital experience that encourages conversion and also looks beautiful.