Micro-interactions
7 TUTORIALS | 2.5 HOURS | 3 BONUSES
Create jaw dropping Micro-interactions for your design portfolio using Adobe After Effects. All project based lessons are based on real world Micro-interaction examples. Learn parenting, working with layer styles, 3D, expressions, typing effects, timing, and more.
✓ Learn how to create button shape transformations
✓ Learn how to animate floating action buttons
✓ Learn 3D UI transitions
✓ Learn UI choreography and sequencing
✓ Learn seamless menu transitions
$97
Add to cart View bundle discountsSave big on Micro-interactions with these popular product bundles
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
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 Micro-interactions with these popular product bundles
Don't own After Effects? Not a problem! Download the free 30 day demo of After Effects from the Adobe site.
