Motion Design for UX: Essentials (Vision at Cadabra Studio)

Motion design is complicated and interesting work. We have heard a lot about web designers, brand designers and what their responsibilities are, but motion design is something mysterious for those who never tried to make the screen move as if it was alive.

And that’s the article to get you immersed into the motion design flow and make you feel it.

What makes a good motion designer? 

As knowing how to use lancet doesn’t make you a surgeon, knowing how to use professional software doesn’t make a good motion designer. How to become a motion graphic designer? Along with some technical skills, there are skills required that might surprise you.

So, good motion designer has to:

• understand the composition and general UI/UX design rules – to integrate motion into the product effectively;

• get the solid basic knowledge of physics – motion designer is not just an artist, they need to make objects move as real ones;

• some programming skills may also be useful – it allows the automation of the processes.

All the skills mentioned are needed to become a good motion graphic designer and stay on track and make really good things. Thus, it takes a lot of talent and persistence to become a cool motion designer.

What is motion design precisely?

Motion design is a symbiosis of graphic design and dynamic graphics such as movies, video, or computer animation. But while modern graphics tend to thrill and call for emotions, motion often stays on the background.

As for what the motion designers do, we can divide the motion into two huge branches – animation and interaction design. There is also classic animation (that’s what Disney did) but it is not today’s topic.

The thing to remember is motion design is a kind of instrument to enhance the UX relying on classic animation, so it is a nice idea to remember old good Disney rules while working on a motion for a digital product. 

The difference between the animation and interaction design is on the level of an idea – things to move are different and the aim of the movement is also different.

In animation, there is one or more characters and a special environment where all of them are interacting. Characters are not necessarily people – they may be animals or even objects.

For instance, if the animation is devoted to ecological issues, the character may be either the plastic bottle or the people recycling the bottle.

What is interaction design? In interaction design, there is the hidden main hero – the user – and the user is the one to lead the process. Here everything depends on the way the user thinks, moves, and their mood. The reaction has to be adequate.

The user is interacting with the product and they have some expectations. The work of motion designer is making this interaction feel well. How motion enhances UX is the topic that is worth deeper overlook.

Interaction design vs. UX

Cooperation between UX and motion designers is very important in terms of making the interface that will be truly intuitive and clear to the user. 

The difference between UX design and interaction design is that the logic of the product is developed by a UX designer, a motion designer usually works considering the limits set by the interface design – motion is developed so that the elements could help the user go through the interface as easy as possible. 

Let’s look at one feature with motion and without. For instance, there is the feature of deleting a file on any computer or smartphone.

Without motion effects, the user just presses the button Delete file and the file disappears. Motion adds the effect of file ‘flying’ to the basket. Thus, the user understands where the photo was moved and what happened to it – the interface becomes simpler to work with.

How the motion feels

To breathe life into the UX, motion design has to be developed in accordance with some rules to make interaction look lively and lead the user to their goal without distraction. 

Motion is hard work but it also good fun. So, let’s get some fun and check out how the motion effects may influence the perception of the interface by the user by practicing some basic principles of motion design:

• For equal elements – follow the glance.
  The equal objects have to appear on the screen according to the flow of the screen and making the user’s glance move smoothly in the needed direction. 

  For example, the list of appearing cards is perceived as one flow, and the user’s glance has to move from up to down, so the cards appear in the same order. Change in the order or simultaneous appearance of the cards may confuse and distract the user.

  For the tabular order, the glance must be directed diagonally, o the appearance of cards will follow this fact – making cards appear one-by-one will create zig-zag direction and it is not the best idea.

• For subordinate elements – get the main element to the front.

  Thus, the movement will be meaningful, the user intuitively feels that information is the most important. Still, the movement here is not just pulling the object, there are some patterns.

  If the size of the card is transformed disproportionally (the shape is changed, for example, a square turns into a rectangle), the card has to be moved along the arc, not the straight line. 

  If the size is changed proportionally, then the card should move along the straight line. Unfortunately, this rule is often ignored, but look at how great the effect changes the interface.

• For moving objects – avoid intersection.

  If objects have to be replaced and their paths intersect, unfortunately, you have to move all the objects to avoid them going through one another, or rise one above the others to move it. 

  Why? Cause real objects never do this way, and motion design always follows the physics laws. 

How to get the motion flow

Sure, not being the motion designer it is hard to understand how special that work is and catch all the details that make the magic of movement inside the product. But there is still a way to make yourself a little closer to the motion.

Advice from our motion designer – choose the animated product that you really like (cartoon, commercial, promo video, whatever) and try to watch it as if you were the motion designer. 

Do not stop the video, your aim is to catch the pace of motion. Pay attention to details (everyone knows, the devil is here) and try to analyze why you like what you see, what makes that video so special to you, what maneuvers are used to make you feel those pictures alive.

We are sure, the motion will delight you once you really notice it. Motion is amazing and it is really the thing to change any digital product and make it alive. Creative motion design is what we love and what we do, and we are glad to provide you the consultation on how to get your product perfectly animated.