Bringing animation into the mix

2017 was an emotional roller-coaster, Donald Trump came into power, Walkers Prawn Cocktail flavoured crisps were nearly erased from history, and Big Shaq’s ‘Man’s Not Hot’ was forced upon our bleeding ears for a number of months – thankfully that’s slowly dying, but what seems to be sticking around is the popularity of user interaction & animation, specifically in web design (which I’m sure a lot of you don’t care about, but this is my blog post and you’re already reading, so who’s the real winner here?)

We’ve been very busy in the studio, creating a large amount of websites for our beautiful clients, which test the boundaries in how design can play a massive part in a companies success, and something that always pops up into my mind when a new brief comes into the studio, is the initial reaction a user has towards a website when they first open the home-page. It’s pretty common knowledge to develop a layout that creates a clear navigation you want the user to take, by adding big call to actions, bright buttons etc. But what really stands out to me is not so much the visual aspects of a design (which we’ve already nailed, if I do say so myself!) but how the page loads, how the content animates in, the whole interactivity and experience from the first page you land on, right through to the last (hopefully the contact page!)

For example, loading screens used to be seen as a decoy while the server attempts to load all of the scrambles of imagery and content from behind the scenes, and although it can still be used in that way, the design, transitions & animation applied to something like a loading screen, can be seen as more of a welcoming experience that becomes part of the core brand messaging, and can give your business an unforgettable first impression, and let’s face it, people these days have the attention span of a damp sock, so to stop them from instantly clicking off your site before the page even loads is a massive win for anyone.

On top of that, the way a logo comes into a page, the way a burger menu can be clicked, which then triggers a beautifully timed menu to animate in, this is all part of the user experience and in my opinion should be taken as seriously as the design and navigation of a website.

A good example of this can be taken from Mono Architects – The clean, simple design mixed with the smooth, sophisticated transitions from page to page makes the site instantly more memorable while also remaining completely user-friendly, which if done correctly can enhance any design, morphing it into one beautiful piece of art.

This is also a great example of balance. Some sites take animated elements and transitions and use them in a way that can leaves a negative impression of a website, to the point where the user navigation is as unclear as the future of the NHS, and can lead to a site that is extremely frustrating to use.

Thinking about your target audience, what you want a user to do, what you want to achieve, your websites loading time etc. is crucial and should be considered before applying any transitions to a site – there’s no point in transitioning from page to page with a massive wave of water and flashing lights if your demographic is Neil from Hull who’s a 56 year old carpenter with epilepsy, so think about where your site fits in and what level of animation is suited.

Another example of this can be taken from Classes Abroad – this is a perfect example of the correct way to use animation, loading screens and transitions – the design fits perfectly with the demographic, and so does the interactive elements that are used. Even when applied to something as boring as a globe icon you see every day, including some animation into the mix brings it to life and gives the whole site a breath of fresh air.

Interactivity and animation is something that is becoming standard practice, and I really do believe it should be taken as seriously as the design and usability of any website – this is something we’ve been applying to our own sites over the last few months, and will continue to develop even further over the next year. *Insert project name drop here*

I’m looking forward to seeing where 2018 will take us in terms of web design and development, and you can guarantee I’ll be forcing my opinions on everyone in the studio, as I have been for the last 2 and a half years!

– King Tom III