Shop Onsite workshops Blog Templates Affiliates About Bundles Login

Micro-interactions

7 TUTORIALS | 2.5 HOURS | 3 BONUSES

Create jaw dropping micro-interactions from your design source files using Adobe After Effects. All tutorials are based on top trending micro-interaction animations on Dribbble. Learn parenting, working with layer styles, 3D, expressions, typing effects, timing, and more.

$97

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 #3 – 3D menu fold
Duration: 8 min

Learning how to work with and add dimensionality to your micro-interaction through the use of 3D is an important piece of the puzzle. In this lesson you’ll learn how to set up and work with 2D and 3D UI layers. Inspired by Virgil Pana’s rad animation on Dribbble.

Tutorial #4 – 3D seamless menu transition
Duration: 27 min

In this powerful lesson you will learn how to set up and parent objects in 3D space to create subtle and nuanced transitions. Special attention paid to timing and finesse. Inspired by Ramotion’s sweet 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.

Tutorial #7 – Multiple simultaneous element transitions
Duration: 29 min

Explore the limitless possibilities when multiple elements are transitioning. Use a combination of dissolves, 3D rotations, and content reveals all supported by After Effects parenting. Inspired by Ramotion’s invigorating 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.