Published on <a href="https://blog.prototypr.io/building-systems-in-motion-design-2e6092e670ed?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Kamron Robinson 
<h4>Start discovering how to implement systematic use of motion in your process.</h4>
<h3>What is a design system?</h3>
Design systems are used to guide application of established conventions that meet the requirements of a business’s core values and offerings. A good system is flexible enough to grow with it’s users, and pivot with business needs.
Motion has become a new player in these systems in the last few years. The challenge lies in how you differentiate your motion approach in a way that makes sense for your business.
<h4>The problem with systematic motion</h4>
Animation that looks and feels good, does so because it mimics reality. If you make a ball bounce, and it follows the laws of physics, then it’s going to have a wow factor. Using conventions like “always ease in and out” or “always move objects in an arc“ will get you an object that moves nicely. But, how is that any different than how other brands use motion? How do you apply “the study of motion” to a dynamic system and still have a branded application that feels unique?
You must make decisions on characteristics that will inform your animation based on context. When you take this approach, it becomes a bit simpler to deduce how to apply motion properties, effects, principles, techniques, etc. Motion becomes more deliberate.
For example, if we have a brand that specializes in kids educational games, and we have established the tone to be young, energetic, and vibrant. We could then assign tactile key words like “fluffy, plush, squishy, rubber, glue, etc.” to inform how and what we animate. Then assign principles like squash and stretch, anticipation, arcs, etc. These will help users understand their interactions with the product in a tonally effective way. You could create a slider to help determine the threshold of that principle to guide the animation.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Rtcv0OC8YWQ_h3n5uyWK1A.png">Dial in your parameters visually so you can refer to it as guidance, and assurance that you and your team are on the same page.
<h3>Build a story exercise</h3>
This is a fun exercise to start thinking not only about how you will build a product, what features you will need, but also how to gauge the tone of the product. It’s a fast dirty exercise to get you thinking in terms of a story, not just a list of features. Adding motion to a product begs for you to consider the story and this can kickstart that thinking in a fun way.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DZB8IaJY7jIfsJLzOkqomg.jpeg">
Start by framing design concepts in the form of a quick user story. Write a beginning, middle, end, add tension, and a bit of “character” development along the way. By doing this you can weigh your motion decisions against the motivation of the storytelling. The goals of your communication and the story structure will inform your actors how, when, or if they should act.
On the digital canvas (websites, apps, VR, AR) figuring out the story behind the experience can help you navigate your way through what you want your UI to do (if anything!) and how you want your users to feel during their journey. The “feel” will help inform the direction of your motion designs.
A story could be as simple as,
“Samantha opens the app and is presented with a beautiful splash page that introduces a game to she and her son. Together they navigate through the on boarding, interacting with objects and feeling a sense of excitement for their primary objective of learning the ABC’s. They get started and the first task is simple, but they soon learn that there is a catch, in order for them to unlock more interactive letters, they must bring joy to the letter preceding it. How will they do this? It’s all a part of the game! Every letter has something they need and are their own individual characters. They arrive at the letter Y and she decides to make the mother and son go back through all the letters and find her lucky pencil. They will have to find the pencil in order to unlock the last final letter to move on to numbers.”
Provide your team a short form experience narrative that could help set the scene of the product, top to bottom. It may be vague at first but serves as a great starting point to understanding the message and flow of an experience.
<h3>Re-Framing animation</h3>
To understand animation a bit better for our digital uses, I’ve tried to reduce the language animators use into terms that can apply to a broad range of disciplines (web, mobile, video, branding). Doing this has helped colleagues and clients understand the meaning and motivation behind decisions. It’s also allowed us to look closely at how we can design motion concepts.
I’ve done this by grouping aspects of motion design into 4 high level pillars. Each pillar informs the next and serves as a guide for conversation, building understanding, pinpointing motivation, and exploring approaches.
Those pillars are, goals, perceptions, principles, and properties.
<img alt="" src="https://cdn-images-1.medium.com/max/318/1*OaaRXSx8Z5puuoquJXcZuw.jpeg">
By doing this you can address key aspects of motion design one by one and make decisions on how to proceed from a high level. It helps to align your design decisions with the goals of the communication.
Goals — Your goals will inform everything, they should always be kept in mind and considered carefully before deciding on a direction. The other three pillars are more specific guides.
Perception — One place to start is identifying a few adjectives, words like, authoritative, playful, luxurious, serious, technological, organic, united, etc.
This is a common branding exercise while discovering a brand, where clients and agency will list out how they feel the brand voice should be perceived or is currently perceived. It’s great to help you understand the general direction your design should take overall. It also provides you the answer to “why” you would animate something and “how” you would do it.
The brand wheel below can help you navigate the perception of a brand and guide your broad strokes as you begin exploring. Of course adjectives are not limited to this wheel but it’s a solid starting point.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*61wAKIbl_HH7h_2iBhiz7A.jpeg">Brand wheel (Hello Monday)
Establishing the key adjectives will provide a compass for exploration, and is paramount when exploring dynamic forms of communication like motion.
Principles — Animation principles are a valid tool to look to as a broad guide. Language is important in the pursuit of understanding, and familiarizing yourself with how to create a proper illusion of life will go a long way if/when you decide to break the rules.
At this point you can make a decision as to how you want to dial these parameters in for your needs. Manipulating these principles allows you to assign a range of characteristics, and/or materials to characters. Squash and stretch, anticipation, arcs, easing, timing, etc. You use these principles to build out the tone of the animation based on the perceptions you are looking to play to. This is where we make liquid feel like mud, water, or slime.
<img alt="" src="https://cdn-images-1.medium.com/max/399/1*xafDclo3fRZUM6FE1FIm-A.gif"><img alt="" src="https://cdn-images-1.medium.com/max/399/1*5NhyEkcIKiEl66aIm1llsw.gif">Note the tactile feel of the examples and the use of some of our core animation principles to create that “feel”.
In practice you could have a site that feels more playful and a site that feels more serious using animation. I’ve talked about this in an <a href="https://medium.com/employee-articles/motion-as-a-tool-for-experience-6c203d2ecf5c">older story</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*NL_43OnQu_xf_EoCFBeSrw.gif">Build Your Best Day (<a href="http://buildyourbestday.participaction.com/en-ca/">http://buildyourbestday.participaction.com/en-ca/</a>)<img alt="" src="https://cdn-images-1.medium.com/max/600/1*QglOPdxXpDpsGZ7KvpMh5g.gif">Oui Will (<a href="http://www.ouiwill.com/#/work">http://www.ouiwill.com/#/work</a>)
Properties — Speed, weight, flexibility, scale, rotation, opacity, position.
A list of properties we can manipulate to achieve the determined look and feel. The properties are the elements that are affected by the forces of nature and how you manipulate them will dictate how an object is visually understood. Sometimes these properties can be exclusively informed by an objects environment. Often times you will need to make decisions about forces that are not visible, forces that effect the outcome of your animation.
The properties are a tactile element to motion design, and knowing how to manipulate them, to create a the feel you are looking for, will inform the perception of what said object is. Thus a certain amount of awareness must be present, because perception is fickle, and changes with everyone. It’s important to be clear and deliberate to avoid confusion of what you are communicating.
<h4>Summary of the above</h4>
<ol>
<li>Decide on your goals.</li>
<li>Do a few exercises using the brand wheel to figure out your tone. How you want users to perceive your product or brand? You could even figure out how users perceive your brand via interviews, and weigh that insight against where you want your company to be.</li>
<li>Decide on some characteristics based on the previous discoveries. Find the right principles to inform those characteristics. Perhaps assign some tactile qualities to elements in your designs. Directional movement is a characteristic that could inform the greater concept and in turn your design decisions.</li>
<li>Explore the subjects and their characteristics. Break down their properties and maybe limit yourself to a set few. Be deliberate.</li>
</ol>
<h3>A couple examples of motion systems</h3>
Netflix’s stack system is a great example of a flexible motion design system, created by <a href="http://gretelny.com/work/netflix/">Gretel NY</a>. It is a card system, rolled out in a way that touched every aspect of their brand on such a high level that it can be scaled for multiple purposes. The motion adheres to some established rules, and follows a pre-learned card convention that makes sense to the users based on the current card system on their website. It speaks to a concept of selection and curation, and infinite content.
This system was carved from the vast pool of possibilities provided by animation, but designed in a way to make sense across all their branding.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LwbcKs0hx4aE7gL89zXm_Q.png">
It’s always HOW to apply motion in your brand, more than the motivation. A few basic rules or restrictions are great but the character and concept of the design should inform the execution.
Another great example of good motion systems in practice is Google. I won’t go through it here but they have meticulously broken their motion down to a science. It’s a great starting point for applying some basic tenants of animation to a digital platform. It’s a bit like the “Helvetica” of a motion design system.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ILEq5i6fmNhw2Ea4Akw0iA.png">Google Material Design motion guidelines
<h3>The gist</h3>
Instead of building motion guides for a singular engagement, advocate for building broader guides that create scalable solutions.
These tools and exercises can hopefully help you build and discover new contexts for the design of motion. Always consider the functional aspects of your design, but don’t let that limit you. There are a lot of caveats to using motion in the digital world but the payoff for doing it right is rewarding for users.
When executed well, it creates a seamless integration of technology into our lives. When designed well, it provides meaning and usefulness.
_ Kamron Robinson is a motion designer, and art director. Currently working at <a href="http://www.hellomonday.com">Hello Monday</a> 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.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2e6092e670ed" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/building-systems-in-motion-design-2e6092e670ed">Building Systems In Motion Design</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building Systems In Motion Design

Start discovering how to implement systematic use of motion in your process.

What is a design system?

Top Stories