Motion design

Since the introduction of smartphones, motion design has become a vital UX tool. When utilized right, it makes using technology feel natural, responsive, and more enjoyable.

Adding motion to user interfaces means doing a lot more than decorating. Animation is a functional element used for giving feedback to an action and helping users understand the app's hierarchy and flow of information.

When to use motion

Before adding animations to a web page or app, ensure that their goal and purpose are well-defined. When considering an animation, contemplate the following questions:

Once you worked out the purpose, think about how to visually approach solving the problem by using motion:

Animation types

Transitions

Motion design comes in to help users understand the app flow between screens, making the navigation easier. Another way to use motion design in transitions is during loading times. Why not shorten the waiting time with an interesting animation? Animations help hold users' focus while the device is downloading the necessary data.

Micro-interactions

Micro-interactions are events used to create an engaging moment with the user. Most of the time, the animation starts with a trigger (user action) that causes a reaction, letting the user know what’s happening, making the navigation inside an app or a website easier. We can divide micro-interactions into four steps:

1. Triggers — Initiates a micro-interaction

2. Rules - what happens once a micro-interaction is triggered
What happens when the user clicks this button? Are they directed to a new page? Will it add a product into their shopping cart? The same goes for system-initiated triggers.

3. Feedback - Lets people know what’s happening.
Anything a user sees, hears, or feels while a micro-interaction is happening is feedback.

4. Loops and Modes - determine the meta-rules of the micro-interaction.
What happens to a micro-interaction when conditions change?

Micro-interactions have to be unobtrusive, brief and subtle.

Superfluous animations

Surely, animations can also be simply decorative – as long as they don’t negatively affect user experience. These animations can create a positive experience for the user on a page that's inherently negative (empty states, onboarding flow).

Interaction styleguide

We've created this interaction styleguide to help designers (and devs) define and point out places in the app or website where these interactions occur.

You can also use some of our defaults for loading states, pressed states, hover states etc.

The tools

Principle

Principle — ease of creating animated flow from different applications or web screens through predefined animations allows motion designers to quickly and easily create an animated prototype.

Another big advantage of this software is the easy way of importing screens from the other design software, such as Sketch and Figma.

🔗 Principle: Documentation
🔗 Principle: Tutorials

After Effects

Adobe After Effects has always been the most widely used animation tool. Being a more complex tool than Principle, more oriented towards explanatory videos and long-term animations, it is emerging as an essential interface animation tool.

While Principle allows us to create a fast flow and prototypes to present the main interactions of an application, After Effects lets us explore the creation of more complex effects and interactions.

One of the main reasons for the popularity of this software among motion designers is the Bodymovin plugin, which allows the export of more complex shape animations to code, making it easier for developers to implement them.

Lottie

Lottie renders animations exported from After Effects through the bodymovin plugin. This makes integrating animated assets in apps and websites quick and easy. There's a step by step tutorial that can be found on Design Islands.

Although some After Effects features are not yet supported, this library is growing, allowing for the export of more complex shapes, masks, trim paths, solids, and alpha matte effects.

The community is continuously growing – check out more great examples already created by the Lottie community.

📚 Recommended reading