small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

From Design System to ‘NFT Design System’: Creating TinyFaces

Published on <a href="https://blog.prototypr.io/5-things-ui-motion-specs-improve-in-your-design-work-1619331ce03?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*xsLzUQzSTTgb5B6nvRic_Q@2x.png">
To spec or not to spec. There has been written a lot on this matter. <a href="http://uxmisfit.com">UXMisfit.com</a> articles cover a lot of stuff about making Specs of User Interface Motion Design. Specs will not replace good communication with developers, but they improve a lot of things.
This story reveals main 5 things that will be enhanced with animation specification.
<h3>What are UI Motion Specs</h3>
If you treat design professionally, you know that making video file or even prototype is not enough to implement animation precisely. Developers need specific parameters to make them happen.
This is why the idea of UI Motion Design Specification has risen. One of the spacing methods is to create charts with animations.
The overall concept of chart UI Motion Specs is following:
The X-axis of the chart is a time in milliseconds. Y-axis presents the animation elements in sequences. Thanks to this every animation will easily show its duration.
The easing curves may be visualized by a color of a particular motion. Thanks to s simple guideline near the chart we are able to explain which one is responsible for each easing.
Next, the transformation types: position change, rotation, scaling, opacity changes, may include specific values in appropriate units: points, percent or degrees.
Finally, there should be the name or description of animated element nearby the duration value.
All of these elements in one chart should give the result that will be clear for the developers to read and implement.
Full description of this method is available in the article —  <a href="http://uxmisfit.com/2017/04/23/motion-design-specs-how-to-present-animations-and-interactions-to-developers/">Motion Design Specs — How to Present Animations and Interactions to Developers</a>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FW67CefKxfX4%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DW67CefKxfX4&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FW67CefKxfX4%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/95e840d43631fcb73cf317db87b4922f/href">https://medium.com/media/95e840d43631fcb73cf317db87b4922f/href</a></iframe>
<h3>How UI Motion Specs improve design workflow</h3>
Every deliverable created by designer should have its purpose and place in the design process. UI Motion Specs are not an exception from this rule. Here is how they help us in many aspects:
<ol>
<li>🔬 Specs ensure that developers will implement motion precisely — This is one of the most obvious benefits. The specification will not replace good communication with the developer but will ensure more precise implementation. The developer will not forget any value. This will cause fewer errors and higher quality of animation</li>
<li>👋 The specification supports communication — It is much easier to show the elements that we talk about. Watching videos is often very subjective. Good documentation makes everything more clear and helps to discuss the matter of animation.</li>
<li>👾 Specs prevent errors and detect them — When you finish your animation and you prepare the specs file you will be able to review your creation. You will find eventual errors or some points that may cause that animation will seem to be too slow.</li>
<li>🎼 It helps to create consistent Motion Design System — consistency is a key to better UX and higher quality. Thanks to specs you will be able to identify repeatable elements and connect them to a real-life design system.</li>
<li>⚡ UI Motion Specs are perfect for agile — Chart motion specs present everything in one file. One image is worth a thousand words. No multi-page documents with tons of descriptions. As little as possible.</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AASM6ag4xrcSuGcrZRR8NQ.png">
<h3>How to start preparing specs?</h3>
You may prepare your own spec template in Keynote or Sketch. Creation of template chart with elements be a tedious work. All tips and instructions are described on UXMisfit.com blog in <a href="http://uxmisfit.com/category/motion-design/">Motion Design Category</a>.
However, if you would like to kick-start your work and appreciate the author you may be interested in purchasing the specs template file for Sketch. This week (until December 10) there is a huge discount. Sketch template is available to purchase with 50% discount. Now you can get it for $4.50, later price will return to original $9.00. You can purchase it <a href="https://gumroad.com/l/motionspecs/hugediscount">here</a> or through the embedded content below:
To get discount do not forget to enter “hugediscount” offer code in purchase form.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgumroad.com%2Fl%2Fmrpny%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fgumroad.com%2Fl%2Fmotionspecs&#038;image=https%3A%2F%2Fstatic-2.gumroad.com%2Fres%2Fgumroad%2F7597123457495%2Fasset_previews%2F9fca9dd9d37be2ef3c2276b9478637bf%2Fretina%2Fmotionspecscover.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=gumroad" width="670" height="670" frameborder="0"><a href="https://medium.com/media/a6e3f682cfed52d8ca76d1440fd51421/href">https://medium.com/media/a6e3f682cfed52d8ca76d1440fd51421/href</a></iframe>
<h3>To conclude</h3>
UI Motion Design Specification is becoming more and more important. Our UIs contain lots of animation and micro-interaction. If you are interested in improving your skills in this subject I have prepared the story with <a href="https://blog.prototypr.io/ui-motion-design-the-compendium-d8b478357fa3">UI Motion Design Compendium</a>.
As you have seen there are important benefits of preparing specs. Their preparation took only a few minutes but may save many iterations of improvements if the developers would not understand motion precisely.
Before you leave do not forget 👏 👏 👏 if you enjoyed the story!
One last thing… If you found articles from UXMisfit.com 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>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1619331ce03" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/5-things-ui-motion-specs-improve-in-your-design-work-1619331ce03">5 things UI Motion Specs Improve in Your Design Work</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.

5 things UI Motion Specs Improve in Your Design Work

5 things UI Motion Specs Improve in Your Design Work

Top Stories