The article about creating UI Motion Design Specification has got a lot of positive feedback. Communication between Designers and Developers in the matter of animations and interactions can be more efficient. This is why I have prepared the template for Sketch app to make the whole process even easier.
If you would like to get the Motion Design Specs template and know how it will make your communication with Devs more convenient, this article will help you.
Motion Design – why specs needs to be improved
In the article about Motion Design Specs I explained that the motion is an element of the UX Design that brings digital products to life. However, the animation of the UI should not be an artistic expression – it has to be meaningful.
The rising need to make a delightful experience in the digital products means that the animations and interactions cannot be done accidentally. Motion has to be carefully planned and specified to implement it precisely.
A lot of designers and design agencies still use only video files to show developers how things should move on the screen. Communication done this way has a lot of pain points that have to be improved.
I discovered that the simple chart with motion parameters significantly raises the quality of UI Motion Design.
Specs template helps to make motion implementation more efficient
It does not matter if you use After Effects, Protio.io, Origami Studio, Kite Composer, Flinto or other stuff to create motion. Every animation or interaction has it’s parameters. However, these constraints are not understandable by most of the developers. So, as the author of animation, you are responsible for translating the motion from our files into the way convenient to read by developers.
The template uses mentioned principles to make all parameters and dependencies between elements clear and convenient to read.
When the developer receives only the movie file with animation, he has to analyze deeply all of the parts. He will probably fail in some cases. Especially when it comes to the implementation of precise parameters like easing or transition start and end points. It is time-consuming process.
The Motion Design Specs delivered with the movie file makes everything clear. Engineer translates precisely all parameters into the code and at the end only compares it with the video to check if the animation is fine.
From my experience, this type of Motion Design Specs reduces the number of errors in implemented animation by about 90%. In the end, the whole process is noticeably faster.
How to use the Template
If you would like to know more about Motion Design Specs before you start using the template, I really recommend to read following article:
Motion Design Specs – How to Present Animations and Interactions to Developers
Getting back to the Template file – after opening the file you will be able to see 6 Pages. The first one “How to use the Motion Specs Template” includes all instructions mentioned below in the article.
The second and the third Page contains symbols: easing curves and chart templates.
There are 4 easing templates (EaseIn, EaseOut, EaseInOut and Linear). Predefined easing symbols should be enough for the most cases, but you are free to add your own symbols to extend the possibilities.
The Third Page contains the chart templates created as two symbols. One for standard animation or interaction (it is recommended to prepare motion that does not exceed 375ms, otherwise the user will perceive it as a slow one). The second contains the longer timeline for special animations with an extra duration.
The fourth Page contains extra tips for developers. It describes every easing and recommends functions and parameters available in Android, iOS and CSS (Web) which may be used to implement animation. You will find even mathematical equation if there is a need to implement easing on your own.
The next one is the Demo Page. Sample chart presents how to use appropriately all components.
The last Page is created for you. Here you can prepare motion specification and export it for the developers. Your standard workflow with the template should be focused only on that page.
Creating specs in 8 simple steps
- Open .sketch file with the template and move to “-> Your Motion Specs”.
- Click the menu: “Insert” -> “Symbol” -> “Motion Chart” and choose the one you prefer “Standard” or “Long” Duration.
- Place chart symbol and create an artboard around its area.
- Enter animation name (property placed in Overrides section of the right menu panel)
- Now you are ready to put all animations into the chart. Click the menu: “Insert” -> “Symbol” -> “Motion Curve” and choose the one you are interested in.
6. When you will place your motion curve you are able to stretch it into the desired duration. The symbol should stretch horizontal in the desired way.
7. Every Spec should be dynamic and evolve in time. If you decide to change the easing of one of the elements in your UI motion design. You may simply replace the symbol: “Right click on a symbol” -> “Replace With” -> “Motion Curve” and choose the new one.
8. The prepared specification can be exported into .pdf file that contains vector content.
How to get the Template
UXMisfit.com is a blog with a mission to open your designer’s mind and help you create better products for people. This means it has to bring you interesting content. This content has to be presented in a way that delivers the best possible experience. I believe that the readers deserve that.
There is a lot of work to be done to bring you inspiring content and create articles. But, as a designer, you know that bills have to be paid. The logical move is to make some income through a blog. But, I do not want to make the website full of noisy popups and banner ads (however, some ads may appear in the future). I believe that the good content has to be convenient to read. Apple CEO Tim Cook said the companies that make a profit from ads, think of their customers as of products. This is why Apple does not make business in advertising anymore. It just makes great products. I also would like to give you valuable resources.
Of course, you are free to recreate the template on your own, but this also takes time. Are few hours of your work worth $9? The time is your most valuable asset. This is why I spend mine to prepare goods for you.
Now, it is up to you. You may support the project with the mission to help you to become a better designer. You will also save few hours of your work time by purchasing the specs on the Store.
To get the UI Motion Specs go to the UX Misfit Store here or purchase directly:
[gumroad id=”motionspecs” type=”embed”]
If you decided to purchase the specs, thank you very much.
Let it serves you well!
