Motion design
Last modified on Mon 29 Jul 2024

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).

The workflow

Step by step guide

  1. Before diving into the motion part, figure out the time and budget constraints:
  1. The Project Designer discusses the animation and works out concept ideas together with a Motion Designer.
  2. Motion Designer creates an estimate and a brief direction description. When figuring out an estimate, make sure to include:
  1. An estimate is sent off to the PM.
  2. When the PM gives the green light, we schedule it via Operations.
  3. The Project Designer or PM creates a task stating the estimated hours and due date.
  4. The Project Designer prepares assets and hands them over to the Motion Designer. Upload or link assets in task.
  5. Motion Designer gets to work! ✨
  6. 🎯 1st check-in point: Draft - The first draft needs to be reviewed early on in the process, so we’re sure we’re on the right track. Keep in mind that motion iterations take longer than those in static design. Include devs in this step also, so we make sure our idea is feasible and won’t run into issues in development or under-estimate the needed effort.
  7. Motion Designer continues working.
  8. 🎯 2nd check-in point: Polishing
  9. Motion Designer works on final touches hands it off to developers via Productive tasks. The final versions need to be stored in the project's Google Drive folder as well.
  10. After implementation, the Motion Designer should review the implementation.

Project info (provided by designer and/or PM)

Preparing assets for handoff to Motion design

Access to project files

Achtung!

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 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.

ZXP

Free installer for CEP (Common Extensibility Platform, which enables developers to build integrated panels in Adobe desktop applications). It will work with any ZXP extension (e.g. aeux, bodymovin, overlord...). It is a great tool to instal and keep all of your plugins organised in one place. Just drag and drop the .zxp file to the ZXP interface to install any new plugin.

Frame 1

AEUX Plugin

You have created your design in Figma, and now is time to transfer it to After Effects. The easiest way to transfer layers with the least friction between visual design and motion is by the AEUX plugin.

AEUX is a set of panels for Figma, and After Effects. Spell it out or say it like A-Yo.

Although AEUX is not available as a community plugin, there are a few steps you need to do before you start using it.

Instructions:

Check it out here.

Frame 3

OVERLORD Plugin

You can easily import illustrator files to after effects by dragging and dropping the file in the AE animation pane, but there is also a helpful plugin to speed up your workflow - Overflow.

Transfer shapes as you need them without importing, converting or redrawing.

Check out the whole set of features here.

Frame 4

Useful after effects plugins for animation:

Bodymovin

Once you have installed the Bodymovin plugin through the ZXP installer, you’ll find it in AE - Window > Extension > Bodymovin.

It is important to select the composition you’d like to export as Lottie and select the folder where you’d like to save it.

If you press “Settings”, you’ll see multiple export modes. Check the “Standard” option and “Demo” to preview the animation in the browser.

Frame 5

Lottie

Lottie renders animations exported from After Effects through the bodymovin plugin. This makes integrating animated assets in apps and websites quick and easy.

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.

Check the list of supported features.

Motion libraries for web projects

Here are a couple of libraries that can come in handy when creating landing pages with Wordpress:

📚 Recommended reading