Animation in Web Design: Why and When to Use

The word “Animation” derives from an ancient Latin word “Anima” what means “Soul.” Attempts of breathing in life into static artificial objects appeared thousands and thousands years ago when Pygmalion tried to wake up his creation – a statue of charming Galatei.

Today animation became ingrained in web design and seems to be a great addition to many website elements. Does it bring more life into the design or it may sometimes ruin it? Let’s find out what benefits animation can bring to your website and what are the cases when it’s better to be avoided.

How Animation Appeared in Web Design

Animation appeared on the Web long time ago. First there were tiny .gif files with various moving pictures and video clips. Those were dark ages with tons of flashing cards, dancing cats and other stuff we’d prefer to never see.

In those early days, no one considered animation as means of improving website’s usability. It was mostly used for decoration or just for fun. Today, you can use animation effects to improve your website navigation and use.

Not so long ago, all animated elements and effects on websites were created with the help of FLASH technology. Of course, it was a revolutionary technology for that time even though it was very heavy and increased website loading time greatly.

Today, animations are created with the use of more lightweight JavaScript and CSS coding that help to add moving elements to the site without overloading it. And, what is more important, animations today are used to improve UX, not just for fun. It is an outstanding tool for web designers that may help in making website better and easier to use. Like in the following cases:

Usability Improvement with Animation

In many cases animation effects are used for attracting user’s attention to important details and help him/her to make the right decision about clickability of an element, among other things.

Thus, many websites use shaking effect for log in/sign in forms to show their users that something was wrong and the info was input incorrectly, e.g. incorrect password. This tradition mimics human shaking head saying “no.”

There are many other ways of using animation to improve the UX. It can be used in navigation to set apart categories from subcategories; Or within a multi-choice, when all elements fade out except the chosen one.

Etechevent Website with Animated Elements

Animations can be used to guide users around the website and even make them buy. Adding interactive elements and drawing users’ attention to them with the help of animation effects can help business websites improve their conversions and ROI.

Storytelling-based website can also benefit from the inclusion of animation. It can help to show users what the next step should be or how to choose where to go on the website.

Interactive Apps Website

Use of Animation in Material Design

Animation in web design is a motion that is proven to be extremely useful if not used in only decorative way. UI and UX designers now often use animation to improve their workflow. Even Google understands the importance of motion for usability. That’s how its Material design appeared.

Material design becomes more and more trendy and today it is used in various apps and website designs. The secret of its popularity is its high attention to how the object or element is perceived; how motion can tell users more about this element and how to use it.

In its Guidelines to Material Design Google states that motion can tell users that an object is light, heavy, flexible, and even big or small. Animations should be used to provide users with better understanding of the object’s nature and thus, how it can and should be used within a design. “Motion in material design should embrace the familiarity and real-world behavior of physical objects, without sacrificing elegance, simplicity, and beauty.”

Google goes further with its animations and recommends using moving elements that change their speed and duration depending on what goal or effect you wish to get. Thus, Google introduces incoming and outgoing elements that are appear on the screen when they should attract attention, or removed from the screen when they are no longer needed.

Tips for Animation Use on Websites

When implementing animations to your website you should carefully consider all of its pitfalls too. Animated elements can still hurt website’s performance and UX.

First, you should rethink using animations if they slow your website’s loading speed and the overall performance. It can be revealed with a simple comparison of your website with animation and a heavyweight PC game performance. If the game runs more smoothly on a desktop than the website – it must be the reason to reconsider the use of animations.

The Happy Forecast Website

Make use of CSS when creating animations for your website. Jquery is perfect and used in many projects, but it can really slow your website’s performance. CSS code allows creating subtle animations that will look nice on any device without overloading the design and making it perform great.

Make sure your animations are responsive. Responsive website is a must-have if you wish to succeed. But if it performs and looks great only on a desktop screen, you may lose the battle for your users. There are many tools that allow creating responsive animations (like Adobe After Effects or Invision) and website builders (like Webflow or MotoCMS) that include responsive animate effects into their workflow. They offer various types of animation that can be used within a website to improve its usability and design:

Fade in (left, right, top, bottom);
Bounce in;
Rotate (left, right, top, bottom);
Slide in (left, right, top, bottom);
Flash and Pulse;
Wobbling and Jello-like;
Swinging etc.

Animations should draw attention… but not too much. Make sure motion isn’t too time-consuming and doesn’t last too long on the screen. This is especially the case if we are talking about elements users should interact with often. One or two times it might be fun, but with a frequent use it may become really frustrating.

Laerepenger Website with Subtle Animation

Start with the use of small elements with motion on the website. Actually, animation is the means to a goal, not the goal itself. You shouldn’t include it wherever you want to. The use must be justified.

It’s better to include animation in the UI elements or the objects users interact with the most, like navigation menus or subscription forms. And think before adding bouncing field or sliding images: how will it affect the user experience, will it improve the interaction with the website?

Animations are great for making a website design unforgettable. They are still widely used in website design despite various considerations with loading speed or unresponsiveness. But the main thing you should remember when introducing animated elements to your website is their impact on usability. It’s up to you – decide where and in what amount to integrate motion into your design. Here is a short roundup of the websites that use animations straight to the point: