What Is Conceptual Animation and How It Works in UX Design

Animation in user interfaces has been a hot debate for several years. It’s especially active in the domain of conceptual animation for user interfaces. It offers creative experiments and pushes the limits of UI motion.

Here in Tubik Studio, we have already shared articles about UI animation and its benefits for apps and websites. Today, let’s continue the theme, considering how conceptual animation influences product success, together with a motion designer from Tubik, Kirill Yerokhin.

What Is Conceptual Animation?

Conceptual animation is a field of concept art. It is a piece of motion design created to convey a particular idea before it is incorporated into a real product. In user interface design, conceptual animation may be found in various concepts for interactions, transitions, control manipulations, and animations that mark system feedback, etc. Motion designers use a variety of tools, including Adobe After Effects, Principle, Figma, and InVision.

Why Is Conceptual Animation Needed in UI Design?

This is a kind of controversial issue today. Conceptual animation steps aside from ready-made solutions and well-tested approaches, seeking ways to go beyond limits and rules. Animation of this kind may seem unreal, needless, or impossible for technical realization.

The point is that both static design (glyphs, icons, changing color and shape of controls, or interface as a whole) and animation of UI present a way to make an application stand out from the crowd of similar applications, which sometimes look like clones.

The claim that all developers hate conceptual animation and never want to work on its implementation is not true. In design, it depends. Actually, as well as in other creative spheres where innovations are met with disbelief by some people saying it’s impossible to make. While others do their best and find new ways and approaches, letting people solve new problems.

Demand determines supply. As soon as the “market” sees a fresh design concept, animation in particular, there are those who will seek ways to make it real and use it in the real world. At this moment, the product of the designer’s thought ceases to be just a concept. Here in Tubik, we have had numerous cases when conceptual interface animations, even quite complex ones, were successfully coded by third-party developers.

Practice shows that, on the technical side of the issue, the realization of the conceptual animation is a matter of time rather than the mere existence of such a possibility.

Examples of UI Animation Concepts

Scrolling a list of items

The first example features interaction with a list of items: while the left variant just moves all the list up, the right one imitates pulling the cards with a little holdback. The second variant looks lively and adds a bit of fun to the scrolling process. Another interesting thing is that the right concept creates a visual illusion of more space between the cards, which supports the feeling of more air in the interface.

Transition from the list to the item

Here’s another example: the left option shows the basic way of transition from the list or menu to a particular item screen while the right one adds dynamics to the process.

Opening side menu

A conceptual animation can also add life and dynamics to a basic operation, such as opening a side menu. Using a gradual flow of featuring the objects, the designer makes the process look more elegant.

UI Animation Concepts in Realistic Interfaces

Conceptual animation is one of the creative stages of user interface design: a motion designer may offer different options to discuss with clients and developers. Here are some examples that Kirill worked out together with UI designers.

Finance App animation creates a stylish transition from the pie chart to the list, applying color marking

Music News App animation plays with shapes and lines in the transition from the categories screen to a list

Animation concept for the UI of the Home Budget app adds dynamics to opening the hamburger menu

Business Card UI Concept imitates the funny effect of pulling out the card from a profile avatar

Calendar app animation concept sets an elegant transition from the calendar screen to a schedule screen

One more animation adding fun and supporting visual hierarchy to interactions with the side menu

Key Benefit of UI Animation Concepts

In fact, the creation and research of something innovative starts from a concept in practically any industry or creative field. Look at the automotive industry or architecture; remember how new artistic directions emerged and developed over history. Whatever the sphere, the attitude to concepts will show two opposites, from “that’s just a fantasy that has nothing to do with real life” to “why not…” Both variants are viable. Still, for better or worse, concepts from the power that makes progress possible.

The same situation is observed in the domain of UI animation. Most animations that are taken for granted today as an integral part of our interfaces were once a kind of “unreal” concept. In the age of flat design, when shapes and colors strive for simplicity and cleanliness, animation is a proven way to make apps and solutions stand out in a tense competitive landscape.

Useful Reading

Guide to 6 Effective Types of Web Animation

How to Use Animations in Mobile Apps

Animated Logos: Why, Where, and How to Use

UI Animation: Eye-Pleasing, Problem-Solving

Animated Interactions. Motion on Purpose

UI Animation. Microinteraction for Macroresult

Interface Animation. The Force of Motion

Originally written for Tubik Blog