Shop Blog Templates Bundles Login

Perfect Timing

4 TUTORIALS | 1 HOUR | 3 BONUSES

Learn how to perfectly time your digital product transitions. In this course, you will learn Google Material durations as well as how to apply those durations directly in After Effects. You will also learn all about velocity curves, easing, industry standard easing, as well as how to work with the Flow plugin in After Effects. This course comes with plug-and-play numbers to get perfect timing in your projects. 

$197

Add to cart View bundle discounts

About this course

Micro-interactions can be the heart and soul of a product. Because there is so much variety to micro-interactions, I created a course for you that would cover a wide range of scenarios.

I also created this course to be easy to follow along for designers at all skill levels. 

After Effects really shines as a prototyping tool in this instance because there is no limit to what you can do.

In this course, you will learn how to work with shape layers, 3D, dial in your timing, craftsmanship, and attention to detail.

This project based course is seven tutorials long, and is designed to give you a solid foundation of best practices when you go to prototype your own Micro-interactions for your project or portfolio. 

As a bonus, and to support you wherever you're at in your learning, I'm including my UI Animation Fast Start course. If you have no experience with After Effects or working with time, this course will get you up and running in less than an hour.

When you buy the course, you will receive an invitation to the private UX in Motion Facebook group, where you will engage with like minded designers, get feedback on your work, and get your questions answered. 

Best,
Issara Willenskomer
Founder of UX in Motion, Instructor

Watch course intro

 

★★★★★

"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:

Files included in the course

My goal is to make your learning experience as seamless as possible. That’s why I’ve included all the design source files, downloadable video tutorials (to sync with your devices and watch offline), as well as the After Effects project files.

Design files

Depending on the project, this could include Photoshop, Illustrator, or Sketch. You don't need to have these programs to use this training. 

Video tutorial files

HD video files for you to watch online or download and sync to watch later on your devices. 

After Effects project files

Use this file to follow along with the tutorial and even ideate your own solutions and iterations!

What you will learn in this course

Tutorial #1: Animating forms
Duration: 20 min

In this first lesson, you will be learning how to build and animate shapes and colors in After Effects. You will also learn how to apply a typewriter effect and use hold keyframes to simulate a cursor, as well as to how to direct the user’s eye. Inspired by Andrej Radisic’s popular animation on Dribbble

Tutorial #2 – Masked menu items
Duration: 19 min

In this lesson you’ll learn how to create and edit track mattes, as well as animate Photoshop layer styles. You’ll learn how to finesse the keyframes and velocity curves so that the interaction feels crisp and tight. Inspired by Leiwaa’s awesome animation on Dribbble.

Tutorial #5 – Transforming widgets
Duration: 13 min

This lesson is all about transforming shapes and syncing secondary design elements to tell a story and lead the eye. Added details of background color scale provides nuance and atmosphere while keeping the interaction timing crisp. Inspired by Creativedash’s impressive animation on Dribbble.

Tutorial #6 – Animated navigation elements
Duration: 25 min

Time to take things up a notch. Learn how to create complex animations with only a few keyframes using slider controls and simple After Effects expressions. You will also learn radial content reveals using circular masks, to create more ‘Material’ like transitions. Inspired by Vitaly Rubtsov’s delectable animation on Dribbble.

Watch sample from this course

Watch a 60 second sample from the Micro-interactions course

 

Buy your course today!

Add to cart Replay

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.

🤝 30 day money back guarantee

If you are not 100% satisfied for any reason, I will give you a full refund. No questions asked.

Buy now

Don't own After Effects? Not a problem! Download the free 30 day demo of After Effects from the Adobe site.

Close

50% Complete

Two Step

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.