Micro-interactions

7 TUTORIALS | 2.5 HOURS | BEGINNER

Learn how to 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.

$99

Add to Cart

has been added to your cart!

have been added to your cart!

Watch video intro

Micro-interactions

Adding delight and usability through animation

Spend more time animating with these 7 tutorials.

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.

Free bonus tutorials included with purchase.

Bonus tutorial #1 – After Effects Fast Start
Duration: 44 min

If you’ve never used After Effects before, this simple ‘fast start’ tutorial walks you through the 8 things you need to know. Even if you’ve never worked on a timeline or with keyframes, you’ll be cruising to victory.

Photoshop to After Effects

BONUS Tutorial #2 – Prepping in Photoshop
Duration: 32 min

You will save the most time by learning how to prepare your Photoshop files correctly for After Effects. Learn how to set up and work with layer styles, layer groups, adjustment layers and more. This will set you up for success so you are animating from clean files and not wasting valuable time.

Illustrator to After Effects

BONUS Tutorial #3 – Prepping in Illustrator
Duration: 14 min

For Illustrator lovers, I take you through step by step how to prepare your Illustrator design file and get it set up powerfully in After Effects so you can animate with ease.

Bonus item – UI Animation Keyboard Shortcuts
Format: PDF

Print out this little buddy and keep it next to your desk. These are the top 25 keyboard shortcuts that will have you animating with lightning speed like a pro. It covers both Mac & Windows keyboard shortcuts.

Download the Micro-interactions tutorial course.

Add to Cart

has been added to your cart!

have been added to your cart!

 Save $46 on UI Animation Fundamentals + Micro interactions package   Learn more

Supporting usability

Micro-interactions provide narrative and context to the user, supporting usability and providing a framework for action.

Engine of delight

Through subtle and engaging details, Micro-interaction animations create more compelling and emotional user experiences.

Powerful design opportunity

Designers who have the ability to finesse the details of the experience, have a fundamental edge in the conversation.

Industry best practices

Issara Willenskomer brings 3 years teaching designers, and over a decade of UI Animations work for clients like XBox, Facebook, HBO, Twitter, Nordstrom, Amazon, and more. His teaching methods are taken from real world workflows and industry best practices.

Focus on details and craftsmanship.

The key to innovation is knowledge of tools, techniques, how they come together, and when to use them. In this training, you will learn the following –

  • Track mattes
  • Parenting
  • Advanced parenting
  • Expressions
  • Complex project rigging
  • 3D
  • Animating Layer Styles from Photoshop
  • Nulls
  • Animating shapes
  • Animating color
  • And much more…

A ‘Micro-interactions’ toolkit.

The 7 tutorials included in this training include a vast array of tools and techniques that can be combined in many ways to produce infinite results. Learning how to stack and combine techniques will allow for a full range of animation potential in your projects. This will give you the ability prototype iterations on demand – a powerful ability for any designer.

Add to Cart

has been added to your cart!

have been added to your cart!

“The UX in Motion video tutorials were key to my expertise with motion in UIs. I was able to take my expert skills in Illustrator and Photoshop to whole new level of interactivity. 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

“Iz the wizz (can I call you that? I feel like I can call you that.) This is great. Thank you. After about a half day so far, I’ve gone from being like ‘what the heck’s going on in here’ to ‘dang… I totally got this’. Thanks so much for getting me started and I’m looking forward to learning so much more with ya.”

– Zachary Gibson, Senior Designer at Google, San Francisco

Watch anywhere

Download this video training and watch on the go. Sync with your mobile device and hang out at your favorite coffee shop while you learn After Effects.

FAQ

What do I get with the training?

A link via email to 2.5 hours of downloadable video tutorials, including project source files and renders. Plus another 1.5 hours of bonus tutorials and source files.

How long do I get access to the training?

Lifetime access. Pure and simple. I do this because it’s what I would want from a training. Things comes up and sometimes you don’t have time to invest in learning. My commitment is that this training be there for you 365 days a year.

Isn’t After Effects a tool that’s too hard to learn?

It can be, especially when you learn it the wrong way. After Effects is like a huge wood shop filled with hundreds of tools, and for UI animation, you only need to know one or two extremely well. That’s what this training does. Rather than focus on the WHOLE program, you learn the tools and techniques SPECIFICALLY for prototyping. You’ll be amazed at how fast and easy it is.

Aren’t there other prototyping tools, some even give you a fully functional prototype?

Absolutely. However there are times when the idea is more valuable than the interactivity itself. Having an appropriate sketching environment like After Effects allows you the freedom to create whatever you can imagine and even create a dev friendly spec (which you’ll learn about in the training).

How is this training different?

Tutorials on other sites teach individual tools. Real world projects rely on combining and stacking tools, techniques, mindsets, tactics and best practices. This training supports a professional workflow, connects the dots for you, and, sets you up strong in your real world projects.

Do I really need this?

When it comes to animating with Adobe After Effects, the sky is the limit and that’s the point. If you’re only needing to prototype ‘stock’ interactions where one screen swipes to another, don’t bother with this training. If you love to push innovation, and discover what’s possible then the answer is yes. You need this.

Learn to innovate with motion

Great UI Animations require a combination of countless techniques. Learning how techniques can be combined to create new animations allows you to create your own unique style, and innovate solutions for your individual projects.

Add to Cart

has been added to your cart!

have been added to your cart!

Included in your download

My goal is to make your learning experience as seamless as possible. That’s why I’ve included all the PSD files, references to online projects, and the After Effects source files so you can learn and practice at the same time.

30 day money back guarantee

If are not 100% satisfied for any reason, I’ll give you a full refund AND you can keep the training. That’s how committed I am to having this training work for you.

Download the Micro-interactions tutorial course.

Add to Cart

has been added to your cart!

have been added to your cart!