Motion design
Last modified on Mon 18 Jul 2022

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

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