The use of motion effects in UI interfaces has been a hot topic of discussion for several years. How to use dynamic effects, what kind of dynamic effects are better, etc., such discussions emerge one after another. Among the various animations and effects involved in UI, conceptual animation is the most discussed topic. Experimental concept animation is the forefront of motion design, the most challenging part of development and implementation, and the most easily noticed and discussed by users after a new product is launched.
On the Tubik Studio blog, we've shared a lot of articles and content about UI animation. Regarding the influence of concept motion/animation on UI design and development, I think Kirill Yerokhin, animation designer at Tubik, has the most say.
What is concept animation?
Concept animation should be considered a branch of the concept design field. In general, concept animation is still doing animation and animation design, but it is to create something based on a specific idea, concept before the actual product is launched. When designing user interfaces, motion effects can exist in interactions, transitions, and specific control operations, and motion effects exist as a tool for state transition, interactive feedback, and visual guidance. Motion designers use a variety of tools for motion design, tools we often mention include Adobe After Effects, Principle, Figma, and InVision.
Why UI Design Needs Conceptual Motion
This is actually the most controversial topic at the moment. Many conceptual motions and existing, formed motion/animation solutions vary in steps, effects, execution, and development beyond the usual limitations and common rules. This kind of dynamic technology will feel unrealistic, unnecessary, and even considered impossible to achieve when you first come into contact with it.
The point is, UI animations are just as good as our common static elements (fonts, icons, controls, colors, and shapes) that can make a product stand out from the competition.
It's not accurate enough to say that all developers hate conceptual animation and don't want to implement it. Actually, such a thing depends on the situation. In many creative design fields, it is often said that a certain innovation or idea is impossible to achieve, but in fact, there will always be people who try their best to find new solutions and new methods.
Demand determines supply. If the "market" sees a new design concept, especially in the field of animation and motion effects, someone will find a way to implement it in an actual product. At this time, the designer's idea no longer stays on the concept. At Tubik Studio, we often propose new concept animations, which may even be extremely complex, but once the requirements are determined, there will always be third-party developers who will take over and implement them.
Practice has shown that technically, the realization of conceptual animation is almost only a matter of time and cost, and the possibility of solution and realization is actually very high.
UI concept animation design example
list scrolling
The first example shows the animation of interacting with the list. The list on the left is simply scrolling, while the list on the right obviously adds progressive animation to simulate the subtle movement of pulling cards in reality. The variant on the right looks more lively and adds fun to the scrolling interaction experience. What's even more interesting is that the variant on the right creates the visual illusion of more space between the cards during movement, which makes the entire interface feel breathable and dynamic.
Transition between listing and detail pages
In the above case, the left side is just a simple left and right switching transition, while the right side has a transition of magnification and transformation, which b2b data not only makes the directionality of the motion effect more obvious, but also more dynamic.
sidebar menu
Conceptual animations tend to try to make the most common interactions more vivid, such as common actions such as sidebar expansion.
Example of concept animation implemented in UI
Concept animation is one of the most creative stages of UI design, and motion designers offer different options and options to discuss with developers and clients. The following examples are some examples that Kinill and UI designers have implemented together.
This is a financial management application dynamic effect. It uses different colors to realize pie charts for data display. The whole effect is very fashionable.