Animation and web design

Animation and web design

There’s been an awful lot of commentary recently on animation in relation to web design. It’s definitely something that appears to have a growing number interested in it but what place does animation have in terms of usable and intuitive user interfaces? Is animation just simply a plaything or is it in actual fact an essential tool for designers in the same way that grids and colour are?

Should you bother to animate items on a web page?

It’s now easier than ever to animate items on a page as they load but many ask why bother? Although it makes things appear and feel nicer, many rarely want to spend money and commit a chunk of their budget to making things nice. What people want is a return and a sizable one at that but Apple are a prime example of just to get that return with great animation. With Apple’s main menu on an iPhone, iPad or even a Mac the menu appears letting the user know exactly where they are. The sub menu will fade in with the products sliding out from the main menu and this lets the user know instantly they’ve entered a sub menu. Large and small promos fade in and out with each one catching the users eye for a fraction of a second.  This most certainly isn’t animation for animation’s sake, this is about conversion and helping the user understand the page and just how to steer it.

What do Google think about it?

Google are another fantastic example of just what animation can do and what role motion can play. Their material design guidelines and principles are based on the fact that the perception of an objects tangible form helps us understand it more. By observing an objects motion, we can decipher whether it’s heavy, light, flexible or rigid. Google, like Apple, believe this a great consideration when designing a menu system however they were quick to point out that movement shouldn’t feel mechanical. By embracing movement principles from the real world, a digital environment can be created that’s far more rewarding to interact with. Introducing unexpected items such as menu icons that smoothly change to arrows are a great way to surprise users and grab their attention. 

Much in the same way that a designer will obsess over a colour, those concerned with user interface will usually obsess over animation even if it lasts a mere quarter of a second. The implementation of something so small will never be done without considerable thought. Things that will be considered include:

  • Does it make life easier or slow it down?
  • Does it help the website achieve their goals?
  • Does it feel natural and fun or boring?
  • Is it consistent?

Will 2015 see more websites using animation techniques?

The question on most people’s lips now is whether animation will become a prominent UI trend in 2015? Here at Wecan Media we think it most certainly will. Animation has without a doubt become more and more important in terms of UI and design across a number of different applications. There are obviously core considerations when it comes to great UI such as visual design and the functionality of it but animation has now become a key part of mobile, web and software design at the very base. We believe one reason in particular for the rise of animation in the coming year will be down to the availability of more tools to improve the production workflow and performance in browsers.

Whilst animation in design most certainly isn’t new in 2015 we think it’ll become hugely more prevalent as people become more aware of the role it can play in terms of communicating UI behaviour. As we touched upon briefly, well considered animation within UI design can help to guide users providing context. It can provide an opportunity to surprise and catch their attention as well as make applications far more enjoyable and engaging. Equally however, too much animation can always work against you by breaking up and distracting the users so a happy medium must be found.

Here are our top tips and tools when it comes to using animation:

  • People can most certainly tell the difference when it comes to mechanical movement and movement that mimics behaviour in the real world which means you must consider things like inertia, speed, bounce and velocity.
  • Whilst we do expect to see a number of new tools appear on the market in terms of animation and the creation of it, we recommend going back to basics if you’ve never tried it before. The Animators Survival Kit is a great tool for those new to animation.
  • Using Adobe After Effects is great for exploring complex animations and helping to envision how your UI will look once it’s all completed. This allows you to explore concepts prior to production saving a lot of time and money.

Animation has most certainly become an increasingly important part of the UI design experience and looks set to take 2015 by storm. If your website lacks animation entirely then there is of course the risk of it appearing a little flat, resulting in a website that lacks the ability to engage with users and catch their eye. If you want to bring your website to life and optimise your UI design but lack the ability to do it yourself then simply contact us today. Our experienced team will be able to add a finishing touch or completely revamp your website bringing it up to speed in terms of modern web design.