Published on <a href="https://blog.prototypr.io/ui-motion-design-the-compendium-d8b478357fa3?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Thalion <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*A1Ef6eu_iNuo3jS7qzNmWw@2x.png">
Design is not just what it looks like and feels like. Design is how it works.— in this words, Steve Jobs explained often misunderstood term of design. This thought makes perfect sense when we speak about the Motion Design. We do not create static pages, but where are designing whole products and their customer journeys. Ultimately, Motion perfectly accents the way product works.
As a UX/UI Designer and the author of <a href="http://uxmisfit.com">UXMisfit.com</a> I decided to collect useful content about Motion Design for your in one place. Hope you will enjoy it!
We know that the role of the Motion Design is to increase the usability of digital solutions and amaze users. In this compendium you will find answers to the following questions regarding UI Motion Design:
<ul>
<li>What are Principles of UI Animation?</li>
<li>Where to find great inspiration for Motion?</li>
<li>What kind of tools used to create Animations?</li>
<li>How to increase needed skills needed for Motion Design?</li>
<li>How to make animations work in real products thanks to specs?</li>
</ul>
Many great designers have written lots of useful content, so this post will link to the best articles that will guide you from basics to more advanced tools. Let’s begin.
<h3>🎓 Learn the Principles of UI Animation</h3>
Why learning the basics of motion design is important? Because animation should not be the next clutter ornamentation of the User Interface. The purpose of animation is to increase the satisfaction of people using the app. To ensure good UX in motion you have to be empathic. Right motion design answers following user’s questions:
<ul>
<li>Where do I go now and how I came here?</li>
<li>What is the most important content on the page?</li>
<li>How do I know that the task is completed by the app?</li>
</ul>
There are lots of articles that cover the topic of basics in Motion UX. If you would like to learn or remind the fundamental principles I definitely recommend to read following ones:
<ul>
<li><a href="https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc">Creating Usability with Motion: The UX in Motion Manifesto</a></li>
<li><a href="https://medium.com/thinking-design/redesigning-the-12-principles-of-animation-for-motion-design-46e1803c765c">Redesigning the 12 Principles of Animation for Motion Design</a></li>
<li><a href="https://uxdesign.cc/the-transformative-power-of-motion-249afc51ecc5">The Transformative Power of Motion</a></li>
<li><a href="http://adaptivepath.org/ideas/jedi-principles-of-ui-animation/">Jedi Principles of UI Animation</a></li>
</ul>
When you will read mentioned posts I would like you to get some inspiration before you start creating your own animations. It is not enough to know the rules before you begin to create your own animations.
<h3>💡 Find Good Inspiration</h3>
It is difficult to find designs that are animated not only to amaze other designers but also to follow all of the mentioned earlier principles. Thankfully there are some places on the internet where we may be truly inspired.
If you need some inspiration you should regularly visit following sites:
<ul>
<li><a href="http://uplabs.com">Uplabs</a></li>
<li><a href="https://uimovement.com/">UI Movement</a></li>
<li><a href="http://www.appanimations.com/">App Animations</a></li>
</ul>
When you will watch the trends in UX Motion Design you will be able to explore your own animations.
<h3>🛠 Choose Software Tools for Motion Design</h3>
There was a time when the only obvious choice was <a href="http://www.adobe.com/products/aftereffects.html">Adobe After Effects</a>. Currently, AE has got still a strong position in the industry, but competitors are getting stronger every day. That’s a great situation for every designer because you are able to choose the one that fits you.
While Adobe After Effects is a tool specialized in Animation Design (not only UI Motion), there are lots of tools that do even more in the matter of User Interface Animation. Modern software tools for Designers focus on Prototyping with advanced animated transitions and microinteractions. Thanks to this you may be almost sure that motion you created may be later implemented by developers in real app or website.
The most popular apps that let designers create animated prototypes:
<ul>
<li><a href="http://principleformac.com">Principle</a> — extremely easy to use and powerful tool for macOS. It is like a Sketch for Motion Design.</li>
<li><a href="https://origami.design">Origami Studio </a>— created by Facebook and available for Free. Powerful solution but requires a different way of thinking when creating a prototype. It uses a visual programming language to design motion.</li>
<li><a href="https://www.flinto.com">Flinto</a> — handy and intensively developed prototyping tools. It has got a lot of useful features — even Dribble integration to publish animation directly from the app.</li>
<li><a href="https://framer.com">Framer</a> — Powerful solution, but basic programming skills are needed to use its potential. The benefit of using Framer is that thanks to prototype made in code — developers will be able to easily transform it into real app easily</li>
<li><a href="https://kiteapp.co">Kite Compositor </a>— The fresh thing in motion design software tools. It has got a lot of features and is well integrated with macOS. You can even generate code from your prototype to implement it in the mac or iOS app.</li>
</ul>
<h3>🚀 Enjoy Additional Training</h3>
When you will choose the tool you would like to learn. The easiest way to start is to make tutorials from their website. But if you would like to go further, you will find good training on this sites:
<ul>
<li><a href="https://designers.how">designers.how</a> — you will find a free sample of tutorials for all major software tools for animation and prototyping. It included training for Adobe After Effects, Principle, Flinto, Framer, Origami Studio, Kite Compositor and other tools for Designers.</li>
<li><a href="https://uxinmotion.net/shop-tutorials/">UX in Motion </a>— site contains paid training for Adobe After Effects. UX in Motion includes also blog with interesting articles and free templates to use in After Effect’s animations.</li>
</ul>
If you would like to explore possibilities of including Motion creation in your Design workflow. There is a useful article <a href="https://www.smashingmagazine.com/2016/03/integrate-motion-design-animation-ux-workflow/">How To Integrate Motion Design In The UX Workflow</a>
<h3>📈 Learn to Make Good Specs</h3>
The topic of UI Motion Design Specification is quite fresh but very important. There was a time when a prototype or a video file with some notes was enough to implement “some” animations of the app. But, if you would like to be professional the good specs will do the job.
<blockquote>Nothing will replace good cooperation with developers, but specs ensure that the motion will be precisely implemented.</blockquote>
The most useful thoughts in the matter of UI Motion Design Specification comes from Google’s UX Designers.
I was inspired by their methods of preparing easy to understand specs and prepared article that extends Google’s concept on my blog <a href="http://uxmisfit.com">UXMisfit.com</a>. The first method of UI Motion Specs is based on timeline chart concept and is described here:
<a href="http://uxmisfit.com/2017/04/23/motion-design-specs-how-to-present-animations-and-interactions-to-developers/">Motion Design Specs &#8211; How to Present Animations and Interactions to Developers | UXMisfit.com</a>
After publication, I have received many questions if there is a template ready to use in preparing specs. This is why I created the file done in Sketch. You may find the blog post with template usage description below:
<a href="http://uxmisfit.com/2017/06/03/motion-design-specs-template-for-sketch/">Motion Design Specs &#8211; Template for Sketch | UXMisfit.com</a>
Google UX Team has also shared their Motion Design Workflow and released a tool that automates specs. Everything is explained in the article <a href="https://medium.com/google-design/bringing-sketch-and-after-effects-closer-together-d83b3e729c93">Bringing Sketch and After Effects Closer Together</a>.
Because <a href="https://google.github.io/inspectorspacetime/">Inspector Spacetime</a> uses a different method of specification — the one based on simple text descriptions. You may find the comparison of these two methods in the following article:
<a href="http://uxmisfit.com/2017/10/02/ui-motion-design-specs-2-methods-comparison-which-one-suits-you/">UI Motion Design Specs &#8211; 2 Methods Comparison. Which one suits you? | UXMisfit.com</a>
Good UI Motion Design Specs is the final word for the animation created for the apps. Take a chance to deliver all data needed by developers to implement them precisely.
<h3>Summing up</h3>
Users enjoy well-designed solutions. Motion Design has become a fundamental element that may decide if the solution will be successful or not. I believe that content mentioned here will let you improve your skills in this topic.
If you would like to share another article, tool or a site that will be useful in Motion Design Process, feel free to let me know. I will add the link here, so other designers will be able to read additional content.
Before you leave do not forget to 👏 👏 👏 if you enjoyed the content!
One last thing… If you found articles from <a href="http://uxmisfit.com">UXMisfit.com</a> useful and you would like read more posts like that, feel free to join the <a href="http://uxmisfit.com/newsletter/">Newsletter</a> or to the<a href="https://www.facebook.com/groups/188476424980015/"> UX Misfits Facebook Group</a>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d8b478357fa3" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/ui-motion-design-the-compendium-d8b478357fa3">UI Motion Design — The Compendium</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.

UI Motion Design — The Compendium

Top Stories