UI Animation Motion Standards
7 TUTORIALS | 1.5 HOURS
Learn how to create motion design systems to standardize your UI motion across your brand and product. You will also learn how to design motion for handoff to engineers in iOS and Android. Finally, you will learn how to use industry standard durations and easings, allowing you to create consistent, higher quality work in less than half the time.
✓ Learn how to create motion standards for your product
✓ Learn how to design motion for handoff to engineers
✓ Learn how to sync durations and easing with your team
✓ Plug and play templates for industry standard durations
✓ Master the 4 different easing systems used by engineers
$197
Buy now
Standardize your motion across your brand or product
Learn how to use motion design systems to create consistent high quality motion across all deliverable classes.
Sync your motion with team members
Learn how to use motion design systems to improve collaboration and teamwork, while increasing deliverable quality and accelerating timelines.
Hand off motion to developers and engineers
Design motion that is already optimized for product implementation, by using industry standard duration and easing.
Master UI motion timing in After Effects
Easing
Learn how to effortlessly navigate between After Effects easing, cubic-bezier, and standard easing functions, to create polished and shippable UI motion timing.
Duration
Course includes industry standard durations as well as PDF references, and After Effects project template files to convert between AE frames and milliseconds for plug-and-play building of your UI animation projects.
UX in Motion training is used by Designers at:
What customers say about the UX in Motion courses
★★★★★
“Just wanted to let you know that I’ve done the first two lessons, and I can’t wait to see more! I really appreciate your personal teaching style, and how tailored it is to UX designers. This is huge!”
– Ethan Ray, Senior UX Designer at Google, Seattle
★★★★★
“The UX in Motion video tutorials were key to my expertise with motion in UIs. The tutorials do a great job of guiding you through the fundamentals of After effects and how to realize your motion design ideas. This is one of the best investments you can make if you are interested in learning how to prototype motion and effects in user interfaces.”
– Prasant Sivadasan, Senior Program Manager at Microsoft, Seattle
★★★★★
“This month I just have been overwhelmed with projects and I’ll be pretty busy, mostly due to picking up a lot of interaction design work which I blame your instructional videos for. So keep it up!”
– Andres Jasso, Freelance Graphic Designer, San Francisco
★★★★★
“Without guys like yourself I’d still just be sitting on my ass, lurking Dribbble, and wondering how the hell people move pixels.”
– Clay Walter, Product Design, NYC
About the UI Animation Motion Standards course
In this course, you will quickly and easily solve three huge workflow UI Animation challenges for UX/UI & Product Designers:
- Provide the tools to standardize UI motion across your projects and deliverables
- Provide tools to sync with team members to provide consistent quality across the deliverable spectrum
- Provide tools to reduce friction during handoff to developers and engineers
I’ve spent the last 15 years working on UI animation projects for clients such as Microsoft, Xbox, Amazon, Facebook, Twitter, Nordstrom, Target, and more.
Over the years I’ve noticed that designers working in After Effects struggle to effectively communicate their UI animation timing to engineers. Because the motion isn't delivered will, when engineers go to implement, often the motion isn't right.
The motion ends up being clunky and poorly timed – all because the designer was unable to spec out the timing properly.
I also noticed that designers spend way too much time figuring out what their timing should be, when there is a set of industry best practices available.
This course solves all three of those challenges.
You will learn how to quickly build out your projects using industry standard durations and easing, and then communicate the easings and durations to your engineers so that what they deliver matches your designs perfectly.
This course is bulletproof. If you’re just starting out, this course will be a gold mine. If you’re more advanced, this will completely change how you work and ship your animations.
Best,
Issara Willenskomer
Founder of UX in Motion, Instructor
The UI Animation Motion Standards course outline
MODULE 1: How to implement UI/UX/Product durations
In this module, you will learn design systems for analyzing durations in your projects. You'll learn about traversing, and how incoming transitions need more time than outgoing transitions.
Lessons included:
- Introduction to UI/UX durations
- Industry standard durations with Google Material Motion
- How to use industry standard UI/UX/Product durations inside After Effects
Downloads included:
✅ After Effects duration template conversions from frames to milliseconds (includes presets for 24, 30, 50, 60, 120fps)
✅ Frames to milliseconds conversion PDF
MODULE 2: How to use industry standard UX/UI/Product easing
In this module, you will learn the 4 industry standard easing systems to create smooth, polished UI motion. You'll then learn how to translate those systems into After Effects. Finally, you'll learn how to implement these systems using the Flow plugin (not included), using the presets provided in the course.
You'll learn the meaning behind the phrase 'cubic-bezier,' all about X1,Y1, X2, Y2 values, and how Google Material Easing translates both into cubic-bezier values and into After Effects.
Lessons included:
- Introduction to UI/UX easing
- The 4 industry standard easing systems
- Applying industry standard easing in After Effects
- Using the AE Flow plugin to apply industry standard easing
Downloads included:
✅ PDF easing conversion checklist for all 4 easing systems into After Effects 'incoming' and 'outgoing' velocities
✅ Presets for the Flow plugin which include easing settings for iOS and Android
Watch a sample from the course
★★★★★
"This was a really useful. I work on a project where motion is going to be a big part of the interaction and just using static screens doesn’t really get the message across or get anybody really excited. Being able to get the wide variety of things can do and actually see some real examples of how to create some motion was really useful."
– Ario Jafarzadeh, Lead Designer & Product Manager at Amazon, Seattle
★★★★★
“The UX in Motion training established a solid foundation for our Designers and left us with valuable tools and tactics that will allow us to integrate motion as a prototyping tool in our practice, which will ultimately allow us to produce more tangible, evocative work for our clients."
- John Rousseau, Executive Creative Director at frog, Seattle
★★★★★
"I have been a student of Issara’s UX in Motion lessons for a couple of year now, and can say he is dedicated to providing helpful, easy to follow tutorials for “real world” needs. I highly recommend his classes to anybody looking to animate UX/UI prototypes. His generosity with freebie hints and tricks is also great!"
– Jack Salvador, Jack Salvador Design
★★★★★
"An assignment came up at work that required using After effects and it needed to be done quick. I'd used AE like 6 years ago for VFX but man, I was so rusty I barely remembered how to import files properly. I didn't know where the tools were and scrubbing Youtube forrandom tutorials drove me nuts and wasted a lot of time. Along the line somewhere I bumped into the Rapid Prototyping Tutorial, and after watching a the 2 free videos, it was so clear I needed to get the full package. Issara really broke each step down and made it super easy to navigate AE. He went through how to prep for files for animation, to creating an efficient workspace for prototyping. to creating animations specific to UX. Ive watched a lot of AE tutorials - A LOT! This one in my opinion is the best value for money - its clear, its quick, it caters to UX Designers new to animation and it had me grooving through After Effects after a few hours. Oh.. yeah .. that project, I delivered like a BOSS."
– Jibola, UX Designer at XapCard Inc., Toronto
★★★★★
“Hey Issara, your badass training is so awesome! I watch one vid every morning on my ride to work, I can literally say I learn something new everyday. I’m in the process of adding UX/UI to my current skill set, you can take credit for my upcoming prototyping success :) Keep up the good work dude.”
– Mirtho Prepont, Brand Designer at UBER, San Francisco
★★★★★
“I’m just excited that someone in our industry has taken the initiative to put together After Effects training that is catered towards UX/UI designers. Motion is becoming such an important part of designing and communicating my work, and I have found it incredibly difficult to find resources online to learn the tool.”
– Dickson Fong Design Lead at Search at Google, San Francisco
★★★★★
“I learn more from you than my own professors (: Can I just say, your courses are out of this world. I really love UI animation. Consider the next training and book purchased. In fact, anything you make from now on is a day 1 purchase.”
– Riyanne Tornish, Student, Manchester UK
Issara Willenskomer
Instructor
Issara Willenskomer is an award-winning designer and educator. With over 15 years of interaction and motion design experience, Issara has worked with an impressive list of clients including Facebook, Microsoft, Twitter, Nordstrom, Amazon, HBO, MTV, AT&T, Motorola, T-Mobile, UNAIDS, HTC, Philips, and more. Issara has personally trained the design teams at Dropbox, Slack, Airbnb, Salesforce, Oracle, and others. Issara currently teaches motion innovation both online and in the real world.
Don't own After Effects? Not a problem! Download the free 30 day demo of After Effects from the Adobe site.
