17 May 2017
Animation in UI design
Lately we’ve been focussing on adding more animations to our interfaces.
Thanks to technical advances such as hardware accelerated CSS animations creating animations that run smoothly across the board is now realistic.
But first, why animate at all? There’s two main reasons. Animation can add a touch of delight in an otherwise “boring” interface. It can also help to draw attention to certain aspects of the UI. If something moves it’s more likely to be noticed.
In this post I want to highlight some examples that we created. First up is a success animation that is used after entering a form’s details:
Here’s an older animation that can be used to make a the background of a website more lively, for example a login form.
And here’s another example that shows a screen where a user is waiting for some external activity to happen:
If you’ve ever been to a concert that uses Ticketmatic to scan your tickets, a variant of this animation is used on the scanners while idle.
What all of these animations have in common is that purely work using CSS, without any external libraries. This keeps the file sizes light and avoids external dependencies.
We have experimented with libraries like GSAP but up until now we haven’t needed extensive libraries.
We are looking forward to experimenting with animation to make our interfaces more attractive.