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 UXMisfit.com 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:
- What are Principles of UI Animation?
- Where to find great inspiration for Motion?
- What kind of tools used to create Animations?
- How to increase needed skills needed for Motion Design?
- How to make animations work in real products thanks to specs?
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.
🎓 Learn the Principles of UI Animation
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:
- Where do I go now and how I came here?
- What is the most important content on the page?
- How do I know that the task is completed by the app?
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:
The Transformative Power of Motion
Why motion is an essential part of the designer toolkit
uxdesign.cc
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.
💡 Find Good Inspiration
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:
When you will watch the trends in UX Motion Design you will be able to explore your own animations.
🛠 Choose Software Tools for Motion Design
There was a time when the only obvious choice was Adobe After Effects. 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:
- Principle — extremely easy to use and powerful tool for macOS. It is like a Sketch for Motion Design.
- Origami Studio — 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.
- Flinto — handy and intensively developed prototyping tools. It has got a lot of useful features — even Dribble integration to publish animation directly from the app.
- Framer — 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
- Kite Compositor — 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.
🚀 Enjoy Additional Training
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:
- Learn UX — start learning Principle, Flinto, and Framer for free and continue with the paid subscription. High-quality materials for ones who would like to begin their journey in UI design and lots of tips for more advanced designers.
- designers.how — 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.
- UX in Motion — 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.
If you would like to explore possibilities of including Motion creation in your Design workflow. There is a useful article How To Integrate Motion Design In The UX Workflow
📈 Learn to Make Good Specs
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.
Nothing will replace good cooperation with developers, but specs ensure that the motion will be precisely implemented.
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 UXMisfit.com. The first method of UI Motion Specs is based on timeline chart concept and is described here:
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:
Google UX Team has also shared their Motion Design Workflow and released a tool that automates specs. Everything is explained in the article Bringing Sketch and After Effects Closer Together.
Because Inspector Spacetime 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:
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.
Summing up
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!
I know that creating motion design and preparing specification for them may be a time-consuming process. However, it gives a really good results!
Time is a very precious asset for us — Designers. This is why beside writing UX articles I build time-saving design tools to make you a better and more efficient Designer.
SQUID UI Flow Template for Sketch helps hundreds of creative professionals to make elegant User Flows in a few minutes.
Prime Design System Kit — The Lamborghini of UI Libraries for Sketch. It gives you the power to design UI for web or mobile within minutes. Prime helps you to maintain consistency and high quality. The set of libraries includes hundreds of configurable UI elements, UI Kit, charts, vector device templates and for the first time in this category of product — illustration system.
Subscribe UXMisfit.com (and get some discounts)
Follow me on Medium
Follow me on Twitter
