Animation in user interfaces has been a hot topic of debate for several years now. It is particularly active in the field of conceptual animation for user interfaces, providing creative experimentation and pushing the boundaries of UI design.

Here at Tubik we’ve shared an article about UI dynamics and its benefits for applications and websites. Today, let’s continue this theme and see how conceptual animation can affect the success or failure of a product through the work of Kirill Yerokhin, motion designer at Tubik.

What is conceptual animation?

Conceptual animation, a field of concept art, is a dynamic design created to convey a specific idea before putting it into a real product. In user interface design, we apply conceptual animation to all kinds of concept expression, such as interaction form, transition mode, control operation, system feedback animation mark, etc. Motion designers use tools such as Adobe After Effects, Principle, Figma, and InVision to create conceptual animations.

Why do YOU need conceptual animation in UI design?

To this day, it remains a controversial issue. Conceptual animations that transcend existing solutions and proven methods constantly challenge existing rules. Such animations may seem unreal, unnecessary, or even impossible to technical implementations.

And whether it’s static design (including glyphs, ICONS, changing the color and shape of controls or the entire interface) or UI animation, the elements that can make an application stand out sometimes look so similar as to be clones.

However, it is not true that “all developers hate conceptual animation and don’t want to implement it”. In design, it depends on the situation. In fact, in any creative field, there are those who think innovation is impossible. Others try their best to find new ways to help people solve new problems.

Demand determines supply. As soon as the “market” sees a brand new design concept, especially animation, someone will look for ways to implement it and use it in the real world. The designer’s product is no longer just a concept. In many of Tubik’s cases, quite complex conceptual interface animations were successfully coded by third-party developers.

Practice shows that in terms of technology, the implementation of concept animation is only a matter of time, not a question of implementability.

Examples of UI animation concepts

Scroll list of items

The first example shows the interaction of lists: the animation on the left simply moves the entire list up, and the animation on the right adds a drag effect on the small card. Obviously the animation on the right looks more lively and adds some fun to the scrolling process. More interestingly, the conceptual animation on the right creates the illusion of a wider space between the cards, which makes the interface appear to have more white space.

Jump from a list to a specific item

Here’s another example: The left side is a basic form of transition from a list or menu to a specific project interface, while the right side is a conceptual animation that makes the interface jump more vivid.

Side menu

Conceptual animations can also bring basic actions to life, such as opening side pull menus. The process is much more elegant when the designer uses smooth progressive animations to show menu items one by one.

UI animation concept design in real interface

Conceptual animation is one of the creative stages of user interface design: animation designers may offer different animation options in discussions with customers and developers. Here are some examples of what Kirill did with the UI designer.

  • Financial apps: Create a stylish shift from pie charts to App lists with color markers

  • Music info App: Play with shapes and lines in the category screen to list screen jump animation

  • Family Ledger App: Dynamically opens burger menu

  • Card folder interface: Interesting effect of pulling card from head

  • Calendar App: An elegant transition from calendar interface to scheduling interface

  • In this side-pull menu interaction, motion effects not only add to the fun, but also enhance the visual hierarchy

Key benefits of UI animation concept design

In fact, in all walks of life, especially in the creative field, innovation almost always starts with conceptual design. If we look at the automobile industry or the construction industry, we can see how new trends have been born and developed throughout history. No matter what the field, there are two opposing attitudes towards conceptual design: “It’s just a fantasy that has nothing to do with real life” and “Why not…” There is nothing wrong with either view. However, whether good or bad, influential concept design has helped us to go further on the road of innovation.

A similar situation naturally exists in the realm of UI animation. Many of the dynamic effects that we consider necessary for systems today were considered “unreal” concepts not long ago. In this era of flat design, when shapes and colors are moving toward minimalist, dry designs, animation is an effective way to differentiate applications and solutions in the face of fierce competition.

The original address: https://uxplanet.org/animation-in-ui-design-from-concept-to-reality-85c49907b19d

Translation: Melon

Proofreading: leglars

By Tubik Studio

Micro interactive translation team translation, if there is a question please correct!

Some dynamic effects in the article are too large to show, you can see the original link

, End,

Micro-interaction ∣ Detail design makes for great products

Long press, identify the QR code, add attention

Share the article and let more people know about microinteraction