We all know that cinema had neither color nor sound when it started. When sound was added to it, it was considered a huge and important development. Then color came and this was also an important development. Maybe cinema people and people never thought that every imagination and creature would come to life on the screen. Since animation and other technologies entered the cinema, everything became more attractive, colorful and dynamic.
Animations entered the world of cinema. Their arrival definitely made the cinema more attractive and gave it more possibilities for telling stories. Of course, the animations did not stay in the cinema. Animating images and inanimate elements found a wide range of applications, from logo design and advertising graphics to website and application design. Because animations attract the attention of the audience/user and make the design more attractive and impressive.
You must have entered a business website and then noticed that one of the components of the site’s logo is jumping up and down. This is an example of the use of movement in logo design, logo motions. Another important application of motion graphics or motion design is in making videos and advertising content.
If you have a sports app that rewards you when you reach daily exercise goals, that is, someone comes to your mobile screen and claps for you; Motion design is used in the design of that application. Even if an application asks you to enter a value (for example, the time you sleep at night) and when you enter that value, the app’s screen changes color and some elements of the screen change shape, motion design is still used.
The main topic of this content is dealing with one of the applications of motion design, that is, its applications in user interface design.
Table of Contents
Motion design in user interface design
Before listing the applications, let me say a little about the relationship between motion design and UI design and define the two (of course, I know that with the examples I gave in the introduction, it is somewhat clear what motion design is.) Motion graphics or design is one of the sub-branches of graphic design. Motion design is the use of special animation software to animate graphic designs. Of course, in motion design, color and sound can be added to designs and visual elements along with movement.
Motion designs can be very simple or very complex. The simplest example of motion design is the beginning and end of the credits of movies and series. When words and phrases are displayed on the screen with different fonts and gestures. Pay attention that the smallest movement in the visual elements turns them into a kind of animation or motion design.
“Motion designs are beautiful and attractive. And because of the same beauty and charm, they help to guide the user on the site and app.”
User interface design or UI design refers to the setting and arrangement of all elements of web pages and applications. For example, where the site menu should be placed on the page and how it should be placed, what the clickable buttons of the application should be and what shape and color they should be; And in general, everything through which the user interacts with the site or application and does his work is related to UI design.
The goal in designing the user interface is beauty and visual appeal while guiding the user and high usability. The goal of the UI designer is to make the user move around the app and site as easily as possible and do what they want and see what they expect.
What are the uses of motion design in UI design? (+ Sample)
You should not think that the only thing that animations (motion designs) do in the user interface is to make the space of the site or app more beautiful and attractive. Sometimes it is easy to convey a long message to the user with a simple animation. In this section, I will tell you exactly what motion design helps the user interface designer and what applications it has in UI design.
1. Helping to maintain focus and attention of the user
After all, the user on the site or application wants something to be done, for example, to register an order or send something or make a payment. All this takes time. So the user has to wait. Why not keep the user focused on the site or app while waiting with an attractive and relevant motion design? Snap has the best example of this type of motion designs. This time, when you are waiting for a driver to accept your trip, pay attention to the animated images that appear on the mobile screen.
2. Help with user migration
The user goes from one page to another on the site or app. In other words, the user is transferred from one page to another in the site or app. This transition may be very dry and soulless and boring, it may be made attractive and functional with motion design. See a very good example of motion design that shows the transition from the registration page to the log in in this link.
3. Help make Micro-interactions more interesting
All user interactions with the site or app are not the same. Some interactions are very simple and basic, like downloading a file or scrolling a page. These simple interactions are called Micro-interactions. In user interface design, every interaction is important. Therefore, time should be spent on designing micro-interactions. One of the most important applications of motion design in UI is to make these micro-interactions attractive and entertaining. Look at that colorful and animated shopping cart icon (pictured above). Definitely, that animated icon is more attractive and impressive than a small black shopping cart in the corner of a shopping site page.
4. Help improve usability
The site and application have the most and best usability that gives the user a sense of interaction. It means that the user should get a suitable and tangible reaction from the site or app for every action he performs on the site with the app. Motion designs come to the aid of the UI designer here. Pay attention to the example given for item 5 below. Every click the user makes in that application is associated with movement or color change. In fact, the app reacts to every user action.
5. Differentiating the interaction experience with the site or application
In this glamorous market, the site or app must impress the user and create a different experience for him to stay in his mind. It is for this reason that the principles of psychology, including the principles and rules of Gestalt, are also taken into account in the design of the product and the user interface. How to create this different experience and different interaction? The answer to this question is not one thing or one factor. Several factors must be present in the site or app. But the attractive and purposeful user interface is definitely one of these factors. Take a look at the app below to see how motion design has revolutionized buying plane tickets.