KREATIK LOVES – Micro Animations – why do they matter?

Well-designed websites are a visual statement that we care about our users and want their experience with our site to be pleasant and intuitive. Such websites or applications are more likely to be remembered and appreciated by their visitors or professional communities.

  1. Micro animations improve the navigation of a website or application.
  2. They make it easier for users to interact with the page.
  3. Provide users with immediate and relevant feedback on the action performed.
  4. They give clues to users, allowing them to explore content easier.
  5. Attract attention focusing on the most important actions – e.g. show whether a given element is active.
  6. They evoke positive emotions in the user and give satisfaction while “playing” with them.

In short – motion and emotion <3 That’s why we love them and share with you some of the many examples worth attention. Enjoy!

source: https://dribbble.com/letsgorally

Let’s go rally has prepared a great example of an engaging scrolling animation combined with a color code assigned to a particular section. Thanks to this treatment minimalistic design of the site comes to life and the user is easily guided through the content.

source: https://dribbble.com/outcrowd

This example shows how we can use code to make illustrations on our website dynamic and interesting. Adding movement focuses the user’s attention on the elements that are important to us and enriches the graphics that are consistent with our brand.

source:https://dribbble.com/nathanriley
source: https://dribbble.com/RuslanSiiz
source: https://dribbble.com/ui_migulko

The following examples show how a micro animation can add variety to our website when scrolling. Loading new content in an attractive way encourages to get to know them better and is the “wow effect” which, without being fully aware of it, we so willingly look for on browsed pages. As you can see there are many possibilities and we are limited only by our imagination.

source: https://dribbble.com/cuberto

Pricing – can be a template section showing the differences between the available options, or a crazy experience, a journey influenced by our choice. Cuberto in this case has done it with flair, which will definitely be remembered positively by the user, who will form a very positive relationship with this section.

source: https://dribbble.com/cuberto

Another example from Cuberto bringing a smile to the user’s face. “Sticky blobs” encourage users to dig through the application’s functionalities. Thanks to that, the whole thing seems to be as friendly as possible, and it is fun to simply play with it. You can show it to a friend, share and accidentally create a viral. Fame is guaranteed.

source: https://dribbble.com/cuberto

And another one. Because this effect really is pleasing to the eye.^^

source https://dribbble.com/ui_migulko

This example shows how engaging an application with minimalistic design can be. Micro animations focus the user’s attention on important elements of the interface, compensating for its minimalistic style.

21.12.2021

UI Team

See also
How to create a phenomenal learning app – a comparison of self-study tools

In a world where time is limited, and the need for competence development and knowledge acquisition is constantly increasing, we are looking for tools that can easily and quickly assist us in this process. We know from experience that we […]

Read
UX helps cross-culture business – how big companies design for a global audience.

The benefits of a user-centered approach are increasingly recognized and constitute the basis of the product design process. When talking about global brands that offer their products all over the world to users who speak different languages and come from […]

Read
UI/UX trends in 2021. Part 2.

For us, design is not only pretty graphics, but more importantly useful features in aesthetic forms. Out of great passion for design, we created a compilation of UI/UX trends that reign in 2021. In the second part, we present only […]

Read
Price your project