To animate or not to animate? When you create a website, that’s always the question. Proponents of animation in web design will tell you that it injects a sense of motion, generating a dynamic and flowing user experience. On top of that, animation has been a major web design trend over the last years, which means that your visitors will somehow expect to see them on your pages. The opponents, on the other hand, will argue that animation is distracting and can seem unprofessional to many viewers.

So who is right in this debate? Well, both sides are. The truth is that animations can be a wonderful addition to a website’s look and feel, but they have to be worked in the right way to fit your broader goals. Careless integration of animations into your web design scheme can be a real eyesore—and no one wants that! To help you see right from wrong, let’s walk together through the dos and don’ts of animation in web design, when it comes to learning how to make a website.

Know the basics of animation

First, remember that animations come in many shapes and forms. They can be as subtle as a slight motion of a button, or they can appear as spectacular as a fully animated background. Animation can be set up as interactive reactions to your visitors’ behavior (like objects being revealed when scrolling), or can be independent of visitors’ actions altogether. It can be applied to small elements, like an arrow, or to large ones like a video background that takes up the entire screen. Understanding the full spectrum of the capabilities of animation will help you use them in a more strategic way.

At Wix, when our designers create templates and websites, they divide animations into three different categories:

• Micro interactions: they are used to make small interactions (like clicking a button) quick and clear for the user. This can be achieved by using hover box effects.

• Transitions and page behavior: to ease the navigation from one point to another and switching between pages.
  

• Delights and decorative: this gives some pizazz to your layout like parallax scrolling.

Want to read more? Here’s a guide on using animation and illustration on web design.

Moderation is a strength, not a weakness

When it comes to animation, like all good things in life (including ice cream and watching Breaking Bad), moderation is key. It is absolutely vital that you restrain yourself from blasting the screen with an overdose of animation. For one, you don’t want to make your site too heavy and overburden its performance. In addition, you don’t want to distract visitors with too much action. Keeping things light will make sure that your visitors are enjoying a smooth browsing experience and are following your website’s flow.

One task and one task only

Another terrific guideline for maintaining a healthy relationship with animation is to use it only when you can justify it with a defined purpose. In other words, animations needs to perform a task, for example:

• Guiding the site’s movement by showing visitors when to scroll and where to click.
  

• Supporting your storytelling by gradually revealing items.
  

• Visualizing your product’s or service’s impact
  

• Breaking the site’s static scroll with some motion.
  

• Creating a particular atmosphere on websites that are uniquely suited for animated content, for instance, an online store for children’s clothing.

Can you justify the use of animation with one of these uses? Great! Then you’re all set! (just don’t forget about moderation).

What should be animated (and what shouldn’t!)

Some common website elements work particularly well with animations, while others really don’t. Focus your animation energy on the former group:

• Things that trigger a behavior (like navigation buttons, CTAs, or linked images)
  

• Elements that give directionality (arrows, background scrolling)
  

• Loading bars
  

• Elements that are meant to draw attention (new messages icon, lightboxes, complete order button).

The cases in which you don’t want to use animations are the ones when the animated effect will somehow harm the element’s functionality. For instance, you shouldn’t add animation to text paragraphs because it will make reading them much harder. You also don’t want to add animations to fields where visitors enter their own content (like a contact form or comments), because it would distract them from completing the task.

Content made simple

One excellent strategy for integrating animation in web design is to use it as a tool for clarification or simplification of content. Let’s say you want to explain to your site visitors how your packing and moving company works. You could describe the full process in a couple of paragraphs, you can create a table with bullet points, or you can simplify it by using just a few visuals that animate the key steps. Conveying information through this form of animation is called onboarding. It’s a design technique that usually combines simple text with animated visuals, creating an intuitive and engaging method for walking your audience through your product’s flow. It’s both beautiful and useful, which is the magic combo for all designers.

The audience matters

It’s always important to be aware and sensitive to your target audience, and it’s especially significant when animation is involved. Take into account their aesthetic preferences, their reasons for visiting your website, as well as their technical savviness and available software.

To exaggerate a bit (just a bit): If your target audience is really into monochromatic color schemes; or if visitors are interested in your site for legal advice; or if you suspect many of them will be accessing your site through an old browser version on an outdated operating system – then you can assume that animations are not the right choice in your case.