Designing the best way to show off a new product, tell a story, or just create something fun for people to engage with is the best part of my job. Over time, I’ve built up knowledge in a lot of different areas, but one of my favourite aspects of design is animation.
Animation doesn’t always mean cartoons and drawn characters – we use the term a little more widely to mean anything that breathes life into an otherwise static image.
Even the simplest animations can easily elevate a design and I’ve spent a bit of time thinking over a few of my favourites recently. So, now I’m sharing 4 of my favourite design animations and what I believe they bring to the design.
‘Staging’ – Miller & Carter
As one of the brands we create social media for, I’ve come to understand that Miller & Carter animations don’t need to be over the top. In fact, I’d say they work best when kept simple.
On the left, a static version of the logo, and on the right, we have a simple fade and scale animation. The slow fade in and out and gradual scale is completely on-brand with the simple elegance and premium touch of Miller & Carter, plus it’s an easy effect to achieve.
For any animation students out there, this is a little nod to the one of the 12 principles of animation, known as “Staging”. Staging is the presentation of any idea so that it is completely and unmistakably clear. It helps generate mood, controls focus, and centres attention to important elements in the scene.
In this case, we’re highlighting the brand to increase brand awareness and recall.
Special Effect: Rain on the window – Stonehouse Pizza and Carvery
This animation was created for Stonehouse Pizza and Carveries, another brand we do social media creation for. Using an animated rain and shine effect, we were able to make a cocktail promotion message much more eye-catching.
Not only that, but it builds a sense of suspense while waiting for the reveal and brings in emotion as rains changes to sun, making the cocktails seem like something that will create happier, sunnier times – even if the real message is that they can be enjoyed whenever the mood strikes.
Secondary Actions – Stonehouse Pizza and Carvery
Another Stonehouse example here, and one with a few aspects to get your teeth into. Technically speaking, there’s a fair bit happening here, with several aspects being controlled at once.
If we go back to the 12 principles of animation, the principle being used here is “Secondary Action”. In real life, things don’t stay still when an action is being applied to them. So, with each new layer, layers underneath bounce as something lands on top of them. However, heavier items, such as the burger, weigh down on the ingredients underneath just like in real life, meaning that they don’t move again.
Like I said, it all looks simple to the eye, but to make sure that an animation feels natural, real-life principles must be applied.
Split-screen – Celia
Here’s an animation for Celia, a coeliac-friendly beer from Carlsberg, in which we were promoting two of their beers. Splitting the screen allows us to showcase both beers while giving them the same level of importance in the scene.
Then, by keeping them both in the centre as we switch the perspective means that we don’t confuse the viewer by moving all over the screen. Timing is also important in this sort of animation – you can’t be too fast or your message could be lost in speed, but you don’t want to be too slow and risk losing their interest.
So, by keeping the transitions sharp, you garner interest while allowing the product to have time to speak for itself.
Fun fact for lovers of animation… There’s another principle at play here: Anticipation. It’s only small, but that slight movement before the transition gives the viewer that moment to prepare for motion. Plus, adding a little bounce to the logos gives them a friendly, approachable personality. It’s the little things.
See how much impact animations can have on designs? From small effects to bigger animated designs, they can really change the way that people perceive a brand or product, and help people to notice brands among everything else happening around us.