How can motion graphics bring your brand to life?

It’s true what they say: a picture paints a thousand words. But what about when those pictures are in quick succession – perhaps 30 or 60 frames per second? In case you haven’t guessed we’re talking about animation. Or more specifically, motion graphics

Take a little look around orangerycreative.com or watch our showreel and you’ll see flourishes of motion, animated icons and subtle interactions. Our site (and many of our clients’ too) is a great portfolio to demonstrate our approach to motion. In our view, it should be subtle, straightforward and unobtrusive – enhancing the user experience but not interfering with their ability to navigate a page or find information.

Our studio team have developed this ‘house style’ through a combination of their own skills and an appreciation of what thoughtfully considered motion can add to an experience. Before motion, websites were static and any moving parts were found in the way of videos or even animated gifs. As design thinking has evolved and web development has become more powerful, bandwidth-hungry videos and grainy gifs are generally discouraged in favour of interactive and kinetic UI elements.

Exit through the gift shop

In e-commerce, motion offers signposts and prompts to users as they browse online stores, indicating that stock is low, that there’s a special offer to be had, or that somebody else is looking at the same item as you (always find that a bit creepy). These are often subtle elements and won’t be particularly jarring or obtrusive. After all, if an e-commerce website does start bombarding users with more movement than a jelly on a trampoline, they will likely click their way back to Google and go somewhere else.

The Mac daddy

An instantly recognisable use of motion is Apple’s product page. For a website that was actually pretty behind the times no less than five years ago, it’s incredible to see the complexity and depth in any one of Apple’s Mac or iDevice pages today. Products glide and slide up the screen, accessories tumble down, whilst stats and specs count higher or lower in bold, vivid colours.

You could argue that it’s a little too much, especially when viewing the site from a mobile device. But it’s safe to say that Apple has quickly and firmly set a new benchmark, mimicked by the likes of Google and Samsung in their own online stores.

Motion graphics for good

Stepping away from the web, we are seeing mobile applications increasingly using motion to convey information, particularly in the finance sector. With the proliferation of neobanks helping a new generation to understand their money, interactive and animated UIs add fun and functionality to users’ screens. Something as simple as sending money or checking budgets is an endorphin-inducing flurry of shape and colour.

And this is there with good intent. Brands such as Monzo are doing their homework, looking deep into the science of the user experience. So it’s not unsurprising to see users turning their backs on the slow and static banking apps of yesteryear in favour of something more emotive.

Motion graphics for promotion

Video in just about any form or field can benefit from motion, and it’s rare to turn on the TV or watch an online video without seeing some kind of bug, sting or ident with the intent of conveying information or reinforcing a channel’s brand (or a brand’s channel).

In its simplest form, this would be an animated logo used as an introduction to a YouTube clip or a video podcast. For more complex forms, this might be news channels breaking down complex information such as election results or weather developments. In both cases, to allow viewers to easily understand what’s being displayed, the motion is often oversized and brightly coloured.

Reasons to be cheerful

We think motion is fun and fundamental. Without it, websites are static, videos are boring, and applications aren’t a joy to use. Here are more reasons why we use motion, and why you should consider it for your next project too:

• Motion can help users who aren’t as digitally savvy to find their way through applications and websites – typically with subtle hints or useful nudges
• Motion is agnostic – it transcends culture and languages and is universally understood and recognised
• Motion is lightweight – modern web technologies such as JavaScript, React and even good old CSS is used to build motion.
• Motion can reinforce a brand. Opening and closing a piece with strong idents or title cards can vastly improve a video
• Motion can increase dwell time. That’s how much time users spend on your page. Remember, we are fickle beings – if a website is engaging, interesting and interactive, users may stick around for longer
• Motion adds an extra dimension. Websites have never been more functional, but users need to know what’s happening. If something is uploading, downloading, sending or buffering, motion can convey that and show progress

This all sounds great, but there must be a drawback?

As a moveable component, motion UI does pose accessibility issues. Users who cannot see or who have visual impairment may find their experience hampered by excessive animation. It can also be difficult to convey what’s happening on-screen through alternative text or visual descriptions.

How we use motion graphics
With our clients

Dunlop Tennis

We work with Dunlop Tennis to produce online films, many of which are high speed and high action. The fast pace of these videos combined with expectations from sports fans is a perfect case for motion. We’ve created a number of idents, transitions and intros for Dunlop by utilising their vivid colour palette and impactful fonts alongside clever masking of their existing footage. The result is a lively and exciting motion style that really hypes up viewers before taking them into the action.

Station 10

Our work with Station10 is a great example of a website using motion to enhance pages and add an additional dimension to the brand. Animations react to the user’s scroll, whilst ‘on load’ animations mean that images and text gracefully fade in as users progress down a page. A particular favourite of ours is the bespoke icons that load piece-by-piece.

QIPCO British Champions Series – Hall of Fame

Sometimes all you need is something subtle. Our work on the BCS website added motion to the CGI medal – a standalone graphic that forms the entire background to the website. Much like the Apple example that we gave earlier, the user’s scroll movement triggers the animation. We paid careful attention to the content layout, leaving distinct gaps for the primary light reflections to, forgive the pun, shine through.

Getting emotional about motion graphics?

We can’t blame you. If your website is looking a little tired, if your short film needs an identity, or perhaps your audience needs re-engaging with something completely off the wall, give us a shout. We’d love to talk to you more about bringing your brand to life.