When we look at modern websites, some older user fear dizziness, while others enjoy the movement and vitality of the storytelling. Perhaps similar to the step from book to film, we are clearly moving away from the static website to the dynamic, interactive web experience.
We're fascinated by the possibilities that web design already offers, and show here an overview on the topic of web animations and how they can be used.
What Are Web Animations and What Are Their Benefits?
An animation is the visualization of a change that occurs over a period of time. They are particularly suitable for highlighting things, illustrating changes and outlining facts. They may differ in their implementation technique (CSS, JS, WebGL) or format (GIF, Lottie, SVG). As always, too much or overloading the page can also have negative effects.
Repetition, duration and speed of an animation are important factors to consider. In addition, motion can give elements a kind of personality. A good place to start looking at this in more detail is the "12 Principles of Animation".
Especially in microinteractions, short animations are almost always used as feedback and to be able to communicate a message more clearly. The interaction is triggered by the user (clicking, scrolling;) or by the system itself.
In general, good quality animations always serve a purpose and are a great tool to improve the usability of a page. They help to illustrate solutions to a user's problem. The user wants to get to the most important information in a playful and concise way. Waiting is a "no-go", as is having to think or read too much. Used correctly, animations are a good means of communicating with the user.
How Can Animations Be Used?
When it comes to animations, examples are a must, of course. In this section we show how animations fulfill their function in a playful way and at the same time create a pleasant user experience.
Prototyping, Handover and Implementation
To avoid doubling everyone's work, it's important in the ongoing process to discuss the benefits and effort of animations well. It's about finding the right balance between animation, dynamic interaction and static elements.
As this article shows, animation in web design is a very broad topic, although there was no mention of implementation techniques here at all.
Web animations will continue to develop strongly in the future. Where the journey is going, we can already see to some extent: While we still think in two-dimensional spaces today, in a few years we will enter the web with VR glasses and movement, animation and interaction will once again have a new meaning. We will try more and more to recreate real life (and beyond) in our digital world.
I like this idea and look forward to the future with excitement, because this trend gives us in web design the chance to constantly evolve and create even more vivid user experiences.