Redesigning the 12 Principles of Animation for Motion Design

Like photography, motion design is its own medium and yet it faces many of the same challenges photography faced over a century ago. The approach to motion design is deeply rooted in traditional animation design, principles that were established by Disney animators Frank Thomas and Ollie Johnston back in the 1930s.

These 12 Principles of Animation have been widely accepted as the 12 commandments of motion design in general, but, argues Issara Willenskomer, a motion designer and founder of UX in Motion whose background is in photography, these principles make sense only in theory, neglecting to take into consideration the complexities of the modern user experience.

From Static Design to Motion Design

Willenskomer likens this to how when photography first came out, pioneering photographers used techniques to recreate the styles exhibited by painters.

“They were using the lighting and printing to make it look as close to a painting as they could because the only way they understood photography was in the context of painting,” Willenskomer said.

It wasn’t until this group of photographers called Group/64 started experimenting more with photography that photography began to be seen as its own medium, one with “distinct symbology and visual language that is independent from painting,” Willenskomer said.

“When they did that it opened up a whole world for modern photography and I think that’s what we’re doing with motion right now,” Willenskomer believes. “When [designers] learn about motion and UI, they go to what they know, which is Disney and their animation principles, and what we’re going to start seeing eventually is that [motion design] is its own domain with its own principals and rules. We can kind of map it out and learn it and designers can add this to their skillset.”

As such, Willenskomer is abandoning the majority of Disney’s iconic Principles of Animation in favor of his own and is working on a proposal for a book that deconstructs the conventional principles and introduces new ones.

The Problem With the Animation Principles and User Experience Design

“The 12 Animation Principles were designed to solve the problem of how do you represent physical reality in 2D space, and user experiences are not physical realities. They are their own unique medium different from anything else and they require different, unique principles that are not the 12 animation principles,” Willenskomer said.

He recognizes, however, that there is one principle in particular that always applies, and that is the principle of easing (slow in and slow out).

“You want all motion to always ease. When you don’t ease it, it looks artificial and doesn’t feel natural, so that’s one of the animation principals that carries over, but the others don’t really transfer over that well,” he said.

“There is some overlap because we are physical beings and there’s a physicality that we respond to that you also have to be careful with, so there is some commonality between the two. I think a lot of people make the mistake because the domain is so new and they think the 12 animation principles apply, but there is a bunch of stuff in there that doesn’t really apply at all. One of them is staging, which the translation for UX is just your layout, what you designed. When you’re designing something you don’t think of it in terms of staging a scene. You’re designing what you’re designing to meet the requirements of your project and have the user experience work and be effective.”

Much has been written about how the basic principles do indeed apply to motion design (here’s one example), but Willenskomer thinks there is more to consider.

Two Kinds of Motion Design

One thing he mentions in our interview is that there are two main kinds of motion design that may cause different principles or techniques to apply:

• Scripted/canned motion — animations that automatically occur without the control of the user. Typically a transition between a task, such as when you tap an icon on your phone and there is motion before it opens.
• Direct manipulation motion — Motion that occurs as a result of an interactive action initiated by a user. For example, when a user deletes something from a list that triggers that motion

“It’s helpful to distinguish the context you’re talking about motion and then distinguish between motion that automatically plays after a user initiated action versus something that is inherently part of the direct manipulation of the user experience,” Willenskomer said.

He says this matters because of motion’s direct impact on a user’s experience. When used correctly, motion can enhance an experience, but it also has the potential to sabotage it.

“It’s important to think of it as any other design tool you have, like your typography or your grids or whatever, these are all tools that are in the designer toolkit and now we have motion as part of that designer toolkit, and you can use it really well and you can support your goals and outcomes, or you can detract from your goals and outcomes,” he said.

Time For Some New Rules

This is why Willenskomer is calling for principles that provide more layers of guidance. He said the new principles must:

• Be agnostic of any content, and
• Speak to the property of interface objects over time

“I think that’s the tricky thing for designers to wrap their head around because they’re used to designing independent of time. They’re designing these stills. If there’s task one, you have a start screen, a stop screen, or something like that, you have these different states you’re designing for which is largely independent of a temporal aspect, you’re designing more for a task that the user is flowing through.

“But when you’re talking about interface animation principles you’re talking about design in time. It’s not just speaking to the composition of how these objects perform in time, but you’re speaking to what are they actually doing and distinguishing that as something that can happen,” he said.

He says this is why while there are high-level principles, there are also techniques (which he calls the flavors, or the cooking styles, and of which there are many) that determine how these principles get implemented, and then within those are values that relate to specific properties.

One of the updated principles he’s exploring is transform, which refers to how “objects can transform their shape over time. You can stack these principles and stack these techniques to really break down everything that happens over time and in time,” he said.

“As users get more sophisticated in their tastes and what’s possible, we’re going to see things that we can’t even imagine now, or what seems crazy now may be commonplace 18 months from now. What we’re seeing is going to keep growing and as such rules will become evident.”

There’s no doubt about it, motion design is moving fast. And if Willenskomer has anything to do with it, sooner rather than later motion design will be viewed independently from animation. It will come to life as its own art form and medium. It will challenge what we know and tell its own stories. Just like photography.

Sheena Lyonnais is a Toronto-based writer, editor and digital specialist. She works in content marketing by day, studies digital strategy by night, and practices yoga somewhere in between. Follow her on Twitter @SheenaLyonnais.

Originally published at blogs.adobe.com.

More about Adobe XD:

• Download Adobe Experience Design CC (Beta) — Mac 10.10+ only
• Adobe XD Twitter account — also use #adobexd to talk to the team!
• Adobe XD UserVoice ideas database
• Adobe XD forum