Subtle animation is used all the time in web development – and when used in the right way, instead of drawing attention to itself, it just lifts the user experience or interaction and makes the website/interface more engaging.
For example, often on a login screen when entering incorrect credentials, the form will shake almost in the way someone would shake their head to signify an incorrect answer. This helps with the usability and also adds personality to the page.
Probably the most commonly seen (and expected) animation is hover effects for buttons and links. It is commonplace for a button to animate on hover to show interaction, and it would feel odd to the user if nothing happened at all when hovering. Likewise, if you hovered over an image and it’s opacity changed, this would indicate that it’s actually a link. If nothing happened, no interactivity would be implied, even if there was a link attached to it.
Another way that animation is useful in web development, is to signify something is happening or loading, in the form of a ‘pre-loader’, rather than the user just seeing a blank screen while they wait (as in the banner image above). This is especially important for larger websites and applications that need a little more time to load in all of the required assets.
There are many ways to animate the elements on a page. The key to getting the most from the subtle animations is tailoring the easing and transitions to match the subject matter or personality that the website is trying to portray. For example, a website for a serious corporate company would have smooth and slick transitions, rather than dynamic and bouncy ones.
With the above in mind, and also with the nature of modern responsive web design, we like to get ‘in-browser’ as soon as possible during the design phase so the client is able to start browsing and interacting with the work-in-progress website in reality. This usually feels a lot different to static layout designs with the added layers of animation and provides a much better platform for feedback and development. This is a much better use of time and makes for an efficient build, without being restrained too much at the start by mockups.
Drop the studio an email today to get a bespoke project quote or for further information about any of our services.
Designer | Lead Developer