Animations in web design – good, bad or ugly

Animations in web design - good, bad or ugly

Animated GIFs and banner ads are quick to set up with the right software, and clients will see the advantage of using them, especially if you explain how well viewers perceive them. You can incorporate these elements into UX-focused design, if you know your client intends to use them. Client communication is key to a good project outcome.


Clients expect animated web design. Some of their ideas might make you cringe, but it is part of your job to moderate the design proposals the client has given you so the finished website will achieve the desired purpose.

No designer is going to go along with multi-colored dancing headers. Yes, they were a thing 25 years ago, but expectations have changed, and every aspect of your design must serve the customer’s purpose rather than showcasing the designer’s cleverness the way dancing text used to do.

Why Animations?

Animations work. Period.

Good uses of animations include GIF sequences to explain multi-step processes.

Unique animated ads work well on some sites because visitors will not have seen elsewhere, so the ads catch their eye even though the user has become blind to the ad they have seen one hundred times before.

Animated GIFs are a great alternative to embedded videos because they use less bandwidth and do not require the visitor’s undivided attention. Mobile users react better to GIFs than video because GIFs are faster. Users are also more likely to share or to interact with the web page in other ways.

What Animations?

Ask the client about any advertising they intend to put on their pages because the ads will influence your page layout and the color palette.

Your color choice is not limited to the colors in the ads, but the ads must stand out without clashing horribly. If you are working with pink ads, then blue or grey palettes will often work, but you would need to be more careful with pink, red or green colorways.

Everyone loves a GIF, even if they loathe videos. You can use a GIF to demonstrate what a tool does or how to interact with a web page. A GIF is easier and faster than reading a long-winded text paragraph of explanation.

How Animations?

When you have completed the design project you want to be able to hand it off to the client and for the client to perform any minor updates without contacting you.

Part of your job as a designer is to make the client happy ever after, which means making site maintenance drag-and-drop simple. Simplicity means using tools the client will be able to use without taking a six-month-long total immersion course in video production.

Most of your animations will be animated banner ads and GIFs.

Resist the temptation to use your favorite software. No business owner needs to become a Photoshop® expert to produce everyday web content like banners or memes; not when there are tools that any non-designer can use without any training.

Screenshot source

The screenshot above shows how animated banner software lets your client create multiple ads at the same time, saving you hours of repetitive work.

Test animations

Neither you nor your client can say with certainty how target users will react to any design feature, including animations.

Explain the principles behind split testing and illustrate the possible results with numbers.
If you run A/B tests and you allow each to run an average of three days, you will run 120 tests in a year. If each test results in a 5% improvement in conversions, the results after one year will astound your client

1.05120 = 348.9

Which means 348.9 times more conversions compared to sticking with the original untested idea.

With numbers like those, any client can see the logic behind paying for an A/B testing tool that makes it easy to set up tests.

Limit Animations

You could put six animated banners or GIFs on every page. Resist, even if it’s the client who is pushing. Few customers that will appreciate all that busy-ness on their screens and most will recoil in horror – Gone forever.

If you have four warning lights on the dashboard, you take your car to an auto-electrician, and you expect expert advice on all aspects of your vehicle. If the radiator is leaking, you expect to be told, even though you haven’t asked, because the auto-electrician is an expert in all things related to cars.

Your client thinks of you the same way. You know everything about websites, hosting and the Internet. You know more than 99% of clients, so share your knowledge. If the client has a silly idea, say, “That’s not going to work.”

The Short Version

The design is about the client, not the creator, so resist the temptation do something just because you can.

Animated GIFs and banner ads are quick to set up with the right software, and clients will see the advantage of using them, especially if you explain how well viewers perceive them. You can incorporate these elements into UX-focused design, if you know your client intends to use them. Client communication is key to a good project outcome.

This is a guest article by Roy Salomon.