Perfect Timing
4 TUTORIALS | 1 HOUR | 3 BONUSES
Learn how to build your UI animation transitions for iOS and Android, so that your engineers can faithfully recreate your animations. Completely remove the guesswork from your UI animation transitions in After Effects. Learn how to quickly and seamlessly integrate industry standard plug-and-play durations and easing in your projects. Whether you’re just starting off or already advanced, this course will change how you deliver motion to your team.
$97
Add to cart View bundle discountsSave big on Perfect Timing with these new product bundles
About the Perfect Timing course
I created the Perfect Timing course to solve two huge UI Animation problems for designers:
- Creating shippable UI animation timing numbers that engineers can implement directly
- Providing plug-and-play easing and duration numbers and resources so you can focus on the concept, not the timing
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. When the engineers build out the animations, they're 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.
This course solves both those problems.
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 package your animations.
Best,
Issara Willenskomer
Founder of UX in Motion, Instructor
The Perfect Timing course
Lesson 1: Google Material durations (and what makes them great)
When it comes to designing durations, Google's 7 values for different components are groundbreaking.
Regardless of your prototyping tool, these numbers will help you.
Downloads included:
- PDF conversion chart
- Google Material motion references
Lesson 2: Duration in After Effects
Make sure you download the AE Google Material Duration AE file to the right of this.
The file is set up to work with the following frame rates: 24, 30, 50, 60, 120.
The project has drag and drop layer durations, which allows you to quickly set the distance between keyframes, based on the amount of traversing your motion will accomplish, and at whatever frame rate you are using in AE.
Downloads included:
- After Effects duration template (includes presets for 24, 30, 50, 60, 120fps)
Lesson 3: Deconstructing easing
In this lesson you're going to learn all about easing and velocity curves.
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.
You'll also learn about parametric equations and the pros and cons of the cubic-bezier system vs the parametric system.
Lesson 4: Easing in After Effects using Flow
Now that we have talked about the WHAT, we can now use this post to describe the meaning behind your students applying the subject to their lives. The WHY helps provides students a purpose and motivation behind their learnings, and is where we draw the primary value of knowledge.
Downloads included:
- After Effects plugin presets with easing values for iOS, Google Material, and industry expert values
β β β β β
"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
Used by designers at:
Course includes these 3 bonuses
These additional training and resources will help you to get up and running fast, with great content and access to Q&A
UI animation with After Effects Fast Start course
New to After Effects? Get up and running in less than an hour with this 3 part Fast Start video course.
Private UX in Motion Facebook group
Get your questions answered in this exclusive group of world class designers. Post, share, and critique inspiration. Get new tips and resources.
UI Animation After Effects keyboard shortcuts
Print out and accelerate your learning with these 23 critical keyboard shortcuts just for UI animation. PDF included with purchase of course.
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.
Save big on Perfect Timing with these new product bundles
Don't own After Effects? Not a problem! Download the free 30 day demo of After Effects from the Adobe site.
