May 13, 2016

Motion in Web Design

Most users on the internet may not realise that animation is more than just a moving element for decoration, in fact, it an essential part of the process of communication within a website. Motion and animation are not just used for cartoons anymore, you can find animation in full-screen images, to the subtle hover effects throughout the world wide web. It is a necessity that can improve the user experience by making the digital world more consistent, responsive real and engaging: after all, the human eye is programmed to follow moving objects.

We use HTML to communicate large amounts of information, with the use of animation it helps us do this even better. Animation can be used as a tour guide through the website, it allows users to track the history of your website without getting lost, position themselves within the interface, and establish visual and spatial relationships, i.e. Improve understanding of layers, sliding tabs and zooms. Animation adds personality to the content and can win over users by helping them relate to the product and create a more pleasant and enjoyable experience of visiting your website. Animation and motion can be simple or complex, and anywhere in between.

In terms of aesthetics, if you want to evoke a playful and energetic atmosphere within your website, then large and exaggerated animations or movements will support this.

Alfreds Laundry Google Santa

Exaggerated motion and animation can create an engaging and exciting interface with endless possibilities of storytelling, entertainment, and conveying information in an interactive way. Just keep in mind that these websites take a significantly longer time to create and will increase the sites loading time.

On the other hand, using subtle and smooth motion can evoke a sleek, professional atmosphere and optimise perceived user experience. They can also make your website feel faster and more comprehensive, as well as drive the user’s attention to where you would like it to be. Subtle motion can give visual feedback to what is coming next, what has passed and actions that have been made.  This style of motion works incredibly well for corporate websites as the focus is not stolen from the content, yet pointed to it. Subtle use of motion is also kinder on your load and development time.

How the World Works Jewels
















Tips: Web animations are often saved as GIF, CSS, SVG, WegGL or video. Animation and movement shou­ld always be smooth and seamless, not mechanical or jumpy as your aim is to make the fictional world of the web more real and relatable.