Animations
Two of the biggest web design trends predicted to take off in 2018 are micro interactions and advanced scroll triggered animations. The former have been made popular by the likes of Facebook and other social media networks and they allow users to interact with content without the need to reload the page.
The latter are designed to encourage users to keep scrolling down long web pages. The animations themselves aren’t especially new, but the ways they are being used certainly are.
Animations and Micro-interactions in 2018
Today these features are being used strategically and educationally. They are the small design elements that really make a big difference when it comes to the look and feel of your website and they can be the difference between good engagement and conversion rates and great engagement and conversion rates.
As such, it something our developers are working with more and more often and here in lies a major challenge. The most successful animations and micro interactions, whether they are scroll triggered or otherwise, are the ones that feel natural.
Beziers
So what has this got to do with Bezier Curves?
Well first things first. A Bezier curve is a parametric curve. Sure that sounds super swanky but in truth it’s really quiet simple. In mathematics, a parametric equation expresses the coordinates of the points that make up a geometric object, in our case that geometric object is a curve. That means we essentially have 4 co-ordinates that express where the start point and the end point of our curve lies on the X and Y axis of a graph.
Without getting bogged down in any more maths though; all that really matters for the purposes of this post, is that with just four co-ordinates our curve can be become a powerful tool for animating objects.
Here’s why. The co-ordinates of a Bezier curve can be used alongside easing to effect the feel of a change online and this massively influences how realistic an animation appears and actually, how well it suits the brand that’s using it.
When the realism and branding of an animation are done well, the result really can be a really powerful online experience. Consider this example of animated scrolling from Space Needle Seattle. The use of animation has allowed the web developer to display lots of information in very visual and awe inspring way, which completely suits the Space Needle because after all, it's all about the views right?
Couple this with the speed of the animation and the object movements and you have something that feels smooth, dare we even say elegant, and honestly, it really works.
Character
Our first foray into animation using cubic Beziers and Bezier curves have also demonstrated another huge advantage of clever animation. Not only can it influence the feel of an online interaction, it can also influence the perception of a change or interaction.
To put this in context. We created a simple animation of a little square block that changes colour when moving from left to right. Now that’s simple enough and not to mention visually pleasing, so we could just leave it there. However, we started experimenting with the co-ordinates of our Bezier curve and the easing we were using as well and the results were really rather interesting.
Suddenly our anonymous block suddenly appeared uncertain or maybe giddy? as the box started to move forward before retreating backwards and then bursting forwards again. The movement encouraged our human brains to associate emotion to an essentially meaningless shape, based on the animation applied to it. In other words, we personified our square block.
Why Does Personification Matter?
Essentially coupling the right movement with the right visual elements such as imagery and colours and the right speed and easing, can create character and this can ultimately give personality to brands online. This has been a huge trend in digital for some time, with many companies both little and large thinking about their brands as people and describing how they would think and feel.
The reasons for doing this are well researched too. Essentially personifying a brand with distinctive human qualities can help people form better connections with brands and ultimately this deeper more human connection can lead to more open conversations between businesses and their consumers and moreover, it can inspire brand loyalty.
And therein lies the secret of how animations can help build your brand and boost your engagement and conversion rates online. So, will you be giving animation a try on your website this year?
