Archive for March, 2017

Use of Animation in Websites

March 3rd, 2017 by Chris Torralba

headline - website animation
The use of animation in web design is a current trend, although thankfully we haven’t returned to the days of flaming logos. Animations in websites work best when they serve a purpose and enhance the users experience. Adding animation to a website can bring a design to life, even if the motions on the page are subtle. Websites without any animation at all may run the risk of looking outdated. This blog post is going to look crazy busy, and you’d never combine so much animation in the one page, but below we describe the various ways animation can be employed to give websites that extra visual appeal and improve usability.

Attracting attention
Animations can direct the users focus to any point on the screen. As long as there are not many other competing elements on the screen, even the smallest amount of motion will grab attention. This can be used to influence what the user sees, or establish a visual hierarchy pointing them to important points on the website. Visuals like a slow fade, a box crawling in from the side, or a tile spinning to reveal more information are more preferable than the content suddenly appearing out of nowhere. In the example below animation is used to reveal the products tagline followed by a shop now call to action button.
animation to attract attention

Engaging the visitor
Animations can be used to point out possible ways for visitors to engage further with your website. The right animation in the right place can help get your message across and engage users. Animations as simple as changing the look of a button when the mouse pointer hovers over them can make your pages feel more alive and prompt visitors to select press or interact with your content. A good example of this would be an animated call to action button. Such buttons need to be displayed prominently on your website. Adding [restrained] animations make them more obvious and will let users know that they are interactive. In the example below when the mouse is hovered over the button not only changes shape and colour but produces bubbles as well.
Button hover effect

Web Forms
Animations when used correctly allow designers to produce faster, easier to use, and more productive web form experiences. Animating web forms is a great opportunity to add some subtle and interesting effects to a web page. Web forms are elements that your user will interact with and making them fun to use can enhance the experience. Because animated visuals can teach more effectively than words or static images animations can also be used to show a user how to fill out a web form, subtle animations can guide user interactions and make form filling less confusing. In the example below animation is used to let the user know when his details have been correctly processed.
Web form animation

Visual Appeal
Whilst animating for the sake of beauty can be easily overdone, making the user experience that bit more enjoyable or sophisticated will help to bring your visitor back, and help to encourage sharing of your website. Below is an example of a very subtle animation that just adds some class to the design of the image link.
animation for visual impact

What’s your favourite example of animation?

Facebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Subscribe to our monthly

Contact Point Email Newsletter

Each email newsletter is filled with technology updates and great ideas to help your business grow.

To subscribe, simply fill in your details below: