Published on | Prototyping: From UX to Front End — Medium Kamron Robinson

This is article is about how we perceive and apply motion design in our digital products.

Animation vs. Motion Design

When we think of motion design, we think of animation, and when we think animation we assume Disney, Pixar, Dreamworks, Toonami, etc. This, however, doesn’t do the concept of Motion Design much justice.

Motion design is interesting because it is all of the above. It’s about creating films, it’s UX in Motion, it’s about experimental WebGL animations. Motion design is a bucket filled with all of the wonders that animation brings to our imagination.

Motion design as a profession is a bit of a muddy topic. There are a lot of components that make up what motion design is, and so a lot of times the actual “design” aspect gets lost in the process. Let’s take a little time to dive into motion thinking and how we create emotional value for users through designed systems using animation. In the same ways that we look to typography, color, texture and other tools to inform or evoke emotional response, we should also leverage animation.

There are a lot of avenues to discover with this tool, both in UX/UI and branding. Motion can create an atmosphere, and it can inform your layouts or interaction models. I’ll touch on these things a bit but the main idea is to start reframing how you think in motion.

Animation

Let’s start by submitting that the word “animation” is largely misunderstood by the digital design domain. Animation is the study of movement using a sequence of images that refer to one another in small variations. When you scope animation for a project, it begets the question “what kind of animation?”

Various animation techniques include:

Traditional — Full frame, limited, rotoscope.

Stop motion — Clay, puppet, model, object, pixelation (using live action footage)

Computer — 2D (After Effects, Flash), 3D (photo realistic, cell shaded, motion capture)

Experimentation — Hydrotechnics, drawing on film, erasure, flip book, sand, etc.

There are a lot of different ways to apply animation. Each technique has an aesthetic which can carry a specific feel. For example, stop motion vs 3D realism. They have a different voice, and knowing that will allow you to bend the rules to suit your needs or even to play with a viewers preconceived notions. Obviously style plays a role here too but the approach can often dictate or inform the style.

Raphael from various incarnations over the years.

Perception is key because when we are designing a product or brand, there is a need to ensure that we adhere to an established voice or create one that makes sense for our audience. We have to understand their needs and make motivated decisions. A realistic 3D rendition of Mickey Mouse would be understood in a different way than if it was traditionally animated vs with stop motion paper cut outs. As with all visual mediums, your approach will have an intrinsic effect on perception. You should understand the tone of a brand before you decide on a motion approach.

When we talk about motion design, we should think about the motivations behind our decisions the same way we do before we add a CTA. Much like everything in design, the approach will change with context, but motivation is an integral part of the decision.

Motion design

Motion design is the culmination of the study of motion (animation) and the practice of aesthetic design and systems thinking. This includes solving problems that weigh against content, context, perception, and many other variables. Motion design as that large bucket pictured above, but not only one filled with techniques, one filled with ideas and applications.

Art Babbit designed Goofy in such a way that would invoke a peculiarity about him. His floppy movements and backwards walk cycle all spoke to how he behaved and made him unique and quirky as a character. That is a character designed to evoke a specific feeling. Art had his motivation in creating a new walk cycle.

Designing experiences with motion

Understandably, it’s difficult to think in characters when dealing with models, type treatments, and other seemingly inanimate objects. UI is not a character and shouldn’t be treated the same way.

But maybe…just maybe…

What if you did think of UI elements as characters? You might start to find some similarities in your process for interfaces.

What are your primary, secondary, tertiary goals? Can we assign these goals to UI elements or interaction models (of course)? Let’s call these our characters!

All our primary goals will be our protagonists. They are our most developed and interesting interactions or UI in the experience, like navigation or interaction models. While another element can be a static (most text, arrows, crosses, etc) or dynamic character (timeline, photo or video content). How would these characters perform in context of the experience? We could use this model to create a hierarchy of movement that supports and informs the user how to proceed?

When animators put a film together, they are designing characters, backgrounds, dialogue, and mood. They are thinking about how these designs will effect each other, and how the audience will perceive everything in layers with context to the story arc. By thinking in terms of building a story, with an arc, and characters, it frames things in a way that helps you make better decisions when adding animation. Remember, animation is simply the study of movement, but that movement can have serious implications on your product and should never be without deliberation.

Reframing to look at an interface in terms of telling a story has not only helped me communicate motion decisions to clients, it frames it in a way that we are all familiar with.

As we continue to build a digital language for animation we will continue to discover new contexts. As I mentioned before, our digital canvas offers two major ways to leverage animation. In the user interface and in the branding experience.

User interface

The 12 principles of animation refer to the study of motion (animation), popularly known from the book The Illusion Of Life by Frank Thomas and Ollie Johnston. If you are working in animation in any way shape or form, these principles apply. Depending on the context of animations application, they should be reframed to better understand their usefulness. I’ve linked to some articles below that dive into this topic deeper.

The basic principles and thought process of typography continue to apply to the digital canvas. Leading, kerning, measure, weight, proximity, etc. While we have adopted new ways to apply some of those principles, in order to accommodate a flexible digital media, a lot of the principles still apply. You refer to the study of typography when you want to incorporate type design.

My background is in traditional animation, so my recommendation is to understand the 12 principles and how they are applied to animation. Once you have a solid understanding you can reframe them for use in a user interface and/or branding application. If you are trying to apply them in the same way you would to a character like Goofy you might have a hard time. If you reframe them to be considered in a way that works for you, then the path becomes clearer.

In a 1993 article by Bay-Wei Chang and David Ungar, they came to define three tenants of motion in the user interface with reference to the 12 animation principles. These are broad categorizations which is why I like them and work around them the most. The breadth of these categories gives you flexibility to make more creative decisions.

They are solidity, exaggeration, and reinforcement. These three categories have offered a great starting point for applying animation to UI, as well as offering another way to communicate it in a tangible way to clients.

Solidity, exaggeration, and reinforcement.

— Solidity speaks to ensuring that your digital elements feel solid, tangible, and interactive. Things like slow in and slow out, follow through, arcs. Applying motion blur or smear, in order to show the spatial relationship of objects moving from one place to another. Or making sure the interactiveness of an object has a weight and a presence that feels realistic. The goal is to create a feeling of interaction that mimics (to a certain degree) life. You want users to feel the interaction as if they were touching a keyboard or grabbing a pen. Think of it as a digital object that has rules grounded in physics, and a spatial awareness that dictates it’s performance.

— Exaggeration through the use of anticipation, creates great engagement opportunity for elements on the interface. The best part about exaggeration is the idea of giving yourself the liberty to extend beyond reality to reinforce an idea or a feeling. There is an opportunity to create hierarchy for UI elements or hints and cues for users to proceed.

The user interface must both give the user footholds from which to better interpret the nature of the objects and the situation in the user interface world and also make salient particulars that might otherwise be overlooked by the user. Employing exaggeration to the behavior of user interface objects makes that behavior more understandable, more “realistic,” and thus makes the user interface more engaging. — Bay-Wei Chang

I would consider something like a badge animating on screen a way to exaggerate the existence of a feature. By animating it you bring attention to it and create a sense of hierarchy against other visible elements.

— Reinforcement is used to strengthen the idea that the interface is a physical structure, much like solidity, that you are interacting with. Reinforcing the users movement through the experience orients them in a way that makes navigation more understandable. It helps ascertain a spatial awareness for users, and maintains the illusion of a physical interaction that we are comfortable with. This would include using arcs, follow through, and making sure proper weight is distributed for objects by applying proper slow in and out. Interactions should feel like they are reacting to you at every corner.

Google voice recognition.

The thought behind these three broad strokes is to consider the performance and the design of what is moving in relation to it’s content and context. Animation helps melt away the perception of digital interactions into something more relatable and physical. It can reduce the cognitive load when executed and thought through with these three guides in mind. By avoiding tightly bound rules and limitations and thinking in broad strokes of exaggeration, solidity, and reinforcement, you can frame your motion decisions in a functional way while giving yourself freedom to explore motion more creatively.

Branding

The other important way motion design can enhance digital experiences is through branding. This is a more obvious use case but is worth touching because a branded motion element should not be an isolated experience or tone. There should be an underlying principle that informs the way you animate. Something you can carry across multiple engagements and platforms. The way you animate will create a unique experience that cannot be accomplished through static design and it is beneficial to create some branded motion guidelines. By doing so you create a motion language for the brand that can traverse your digital offerings coherently, all while administering a consistent tone.

For example, Google has created a fantastic digital language for motion in their Material Design system. Their Material in Motion is a guide for how to apply motion the Google way, both in tone and in a functional way. If you follow their guides, you will have an app or web experience that feels and performs with the atmosphere of Google.

The best examples of motion design come from title sequences. You can see the power of a designed tone abundantly present in title sequences. They have a great way of capturing an essence that can span multiple seasons, shows, movies. You can see the approach and style shifting based on the content and or context, but the language and tone in the motion design stays consistent. Take the opening credits for the FITC Festival.

Every year they have new titles created, and every year the motion design changes. The variation in execution is wonderful but it all feels fresh, innovative, and full of energy, which is what the festival tries to communicate and inspire.

<a href="http://ift.tt/2sNkFhq">http://ift.tt/2sNkFhq</a><a href="http://ift.tt/2ruTQL0">http://ift.tt/2ruTQL0</a>

These examples are probably the best to showcase the design aspect being injected into the motion. There is a particular care taken with the conceptual direction of a branded motion piece in film, the kind of care that we should start seeing in digital experiences. The way Google has approached their brand in motion is practical and suits them. However, animation offers much more flexibility, and I can’t wait to see how far we can take motion design on this digital canvas of ours.

Conclusion

Animation is the study of motion, motion design is devising ways to apply that study in context. Reframe your thinking and keep a birds eye view of your application of motion so it doesn’t become gratuitous.

It’s going to be an exciting time for animators because with the increasing inclusion of VR and augmented reality in our daily lives, there will be a need for a certain “feeling” of physical interaction. This is where those 12 principles will start to shine, in another context.

References

Cheng, Bai-Wei, (1993). Animation: From Cartoons to the User Interface. http://ift.tt/2sNnvTs

Ussai Henderson, Rebecca, (2015). Principles Of UX Choreography. http://ift.tt/2bYgcOx

Willenskomer, Issara, (2017). Creating Usability with Motion: The UX in Motion Manifesto. http://ift.tt/2oihrMc

_
Kamron Robinson is a motion designer, and art director. Currently working at Hello Monday in NYC. These writings are personal thoughts and opinions, if you have questions or comments, by all means, shoot! 🙂

I’m not right, I’m just curious.

Motion Design Thinking was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Motion Design Thinking

Cool stuff, every week

More Articles