Examples and functions

Animations in Web Design

When it comes to animations on the web, there's a fine line between stunning presentation and dizzying impression. In this article, we show some examples of how web animations can be used well, and what functions they serve.

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.

1. Communication of Functionality #

Animations can communicate the functionality of a website. They serve to draw attention to important things and thus support the understanding of a website. They call for action, indicate next steps or give feedback on user interactions. We applied an example of this during the website relaunch of our client RedOps:

Source: www.redops.at/kontakt

2. Highlighting Changes and Connections #

Animations illustrate changes and states of a page. Animations that visualize the transition von one state to the next and visualizations that show the progress of an application help to provide spatial as well as temporal orientation. For example, when opening a mobile navigation or changing from one page to the next.

Source: www.moremedia.at

3. Storytelling #

Animations can support the storytelling of a page by visualizing steps of a complex process, ideas, or a concept, thereby communicating more effectively.

Source: www.postevand.com

4. Decoration, Entertainment and to Promote Engagement #

Animation can increase the user:s emotional relationship with the website. They can positively influence the mood and keep the visitor on the site longer. They add a personal touch to the design and make the moment more entertaining.

Source: en.manayerbamate.com

5. Strengthening the Brand Experience #

Animations can be a way to strengthen the brand experience. This allows information about the company to be told in an understandable and lively way. The identity of the brand can be reflected in the web design. How and which things move can be part of a corporate identity.

Quelle: kmbch.webflow.io

Prototyping, Handover and Implementation #

Once the conceptual phase has been completed, it's time to visualize and later implement the web animations. Since AdobeXD has its limits in the area of animation, other tools such as Framer, InVision or Adobe After Effects have to help out. The static design will now be put into motion. In the end, however, it only serves as a preview for the developer. Taking into account scalability, browser support, loading speed and accessibility, the Developer:in now determines the best implementation technique. In addition to CSS and JavaScript, there are numerous libraries (GreenSock, Three.js;) for integrating animations into the web.

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.

Outlook #

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.