Thumbnail

Rapid Prototyping with After Effects

$699.00

This groundbreaking 25 tutorial course gives you all the tools you’ll need to turn your UX/UI projects (Photoshop, Illustrator and Sketch) into professional UI animations for your client, presentation, or portfolio. All tutorials are based on real world projects, apps and industry standard UX workflows.

About the instructor: Issara Willenskomer has over 15 years directing, producing, designing and animating UI motion projects for companies that include Amazon, XBox, TiVo, Motorola, Target, Nordstrom, HBO and MTV, and agencies like IDEO and Frog.

Turn your Photoshop and Illustrator files into professional UI animations with these 25 tutorials (specifically for UX designers).

Tutorial #1 – Rapid Prototyping with After Effects Fast Start
Duration: 26 min

If you’ve never worked on a timeline, used keyframes or velocity curves, this step by step first tutorial will get started working with your design files quickly and confidently.

After Effects training rapid prototyping ux

Tutorial #2 – Creating your own custom velocity curves
Duration: 39 min

Designing smooth UI motion is critical – and the secret is in the velocity curves. Fortunately, learning how to work with velocity curves is straightforward and can even be fun! In this tutorial, you’re going to learn how to use the Graph Editor: After Effects’ powerful tool for creating and editing your velocity curves.

After Effects training rapid prototyping ux

Tutorial #3 – Creating developer friendly curves
Duration: 23 min

In this tutorial, you’re going to learn several different tools and techniques that will allow you to keep your curve data 1:1 between your prototype and the code that will be written by your developer.

After Effects UX Prototype Training

Tutorial #4 – Working smart with parenting
Duration: 20 min

Parenting is a critical part of the UX animation workflow. It allows you to build lean, flexible projects, which are perfect when you need to iterate feedback and ideas from your client or team.

Tutorial #5 – Dynamic transitions with anchor point
Duration: 15 min

Being able to control how and where your interface elements transition is one of the foundations of UI animation. Mastery of the anchor point in After Effects will allow you to have total control over your designs and ideas.

Tutorial #6 – Dynamic reveal with masks
Duration: 21 min

Being able to selectively hide and reveal your interface elements is a core principle of UI animation. After Effects has two ways of handling this – masks and track mattes. Over the next two tutorials you will learn how, when and why to use each.

Tutorial #7 – Reveal content with the track matte tool
Duration: 13 min

In the second of this two part tutorial on masking, you will learn the track matte tool, which will allow you to quickly mask and reveal areas of your UI.

Tutorial #8 – Creating a cascade transition with offset keyframes
Duration: 16 min

Transitions are a key part of the user experience. The design of transitions involves using a staggered or cascade timing to your transitioning elements. This tutorial covers several ways to set up and edit your cascading transition.

Tutorial #9 – Introduction to 3D
Duration: 12 min

More and more user experiences incorporate dimensionality into their interface elements. This involves putting your flat two dimensional elements in 3D space. In this introductory tutorial, you will learn how to turn your designs into 3D elements.

Tutorial #10 – Setting up your 3D scene with Nulls, Cameras, and Lights
Duration: 21 min

Building from the previous tutorial, you will now learn how to incorporate lights and cameras, as well as how to start building simple 3D scenes from your UI design files.

Tutorial #11 – Simple 3D Page Turn With Y Axis Rotation
Duration: 12 min

In this tutorial, you will learn how to set up a 3D page flip, while having your content seamlessly map to the page. You will learn how to set up a light to add dimensionality to the page as it transitions.

Tutorial #12 – 3D origami with Ease and Wizz
Duration: 20 min

In this tutorial you will master how to set up multiple folding elements and finesse the timing such that the animation feels tight and crisp. You will be applying stock developer friendly animations from the Ease and Wizz tool outlined in Tutorial #18.

Tutorial #13 – 3D parallax with Collapse Transformations tool
Duration: 25 min

Parallax is created when two or more interface elements move at different rates relative to each other. The impact on the user is one of depth and a more compelling user experience. In this advanced tutorial, you will set up 3D UI scenes in a way that allows for rapid iteration.

Tutorial #14 – 3D fold with advanced parenting
Duration: 11 min

Feedback and iteration is the heart of designing good UX. In this tutorial, you learn how to set up a project with minimal keyframes by using the pick whip tool, which allows for a new level of iteration and feedback implementation with minimal time investment.

After Effects Prototyping UX

Tutorial #15 – Creating glass with the blur effect
Duration: 11 min

Learn how to set up and animate glass layers, allowing you to simulate different obscurations of interface elements.

Tutorial #16 – Animating numbers with the number effect
Duration: 11 min

Learn how to set up and animate animations involving numbers transitioning their values. Perfect for loading a dashboard.

After Effects Video Prototyping UX

Tutorial #17 – Radial progress bar with transition effect
Duration: 13 min

In this tutorial, you will learn how to set up radial progress bar transitions inside of After Effects.

After Effects training rapid prototyping ux

Tutorial #18 – Developer Friendly Animations With Ease And Wizz
Duration: 11 min

In the event your animation is moving into development, Ease and Wizz gives you the ability to use universal easing functions which you can take to your developer. Learn how to set up your project as well as ways to communicate with your developer regarding the timing and easing of your animation.

After Effects training rapid prototyping ux

Tutorial #19 – Accelerate Workflow With Crop Precomp
Duration: 4 min

In this quick tutorial, you learn how small changes in your workflow can have a huge impact in your speed, efficiency and productivity. Trimming your precomps down to the dimensions of your UI objects with a single click allows you to focus on what you do best: designing the user experience.

Prepping your design source files in Photoshop

Tutorial #20 – Prepping your Photoshop files for animation
Duration: 32 min

Learn how to prepare your UX/UI Photoshop design source files before bringing them into After Effects. This tutorial will save you incredible amounts of time and give you best practices around this critical step.

Prepping your Illustrator source file

Tutorial #21 – Prepping your Illustrator files for animation
Duration: 14 min

Learn how to prepare your UX/UI Illustrator design source files before bringing them into After Effects. This tutorial will save you incredible amounts of time and give you best practices around this critical step.

After Effects awesome keyboard shortcuts

Tutorial #22 – UI Animation Keyboard Shortcuts
Duration: 13 min

These are the best 11 minutes you’ll spend in the course. Get ready to take your effectiveness inside of After Effects to a whole new level. This tutorial also comes with the PDF keyboards cheat sheet for both Mac and Windows.

Tutorial #23 – Creating Smooth Animations With Fibonacci Numbers
Duration: 8 min

Learn simple cheat sheet timing numbers used by a leading industry expert. This tutorial is designed to remove any guesswork and provide a solid foundation for creating ‘perfect every time’ UI animations.

After Effects Expressions

Tutorial #24 – Working Smart With Simple Expressions
Duration: 17 min

Expressions are the most powerful way of working and prototyping UI animation inside of After Effects. Learn how to use expressions to drive your animations, rig your projects, and simplify your workflow. No programming experience required.

Tutorial #25 – Creating Animated Gifs
Duration: 7 min

Learn how to create animated gifs to use in your online portfolio, presentation, website, and elsewhere. In this tutorial you’ll learn how to set up and optimize animated gifs from your animation renders.

Download the Rapid Prototyping with After Effects tutorials.

 

A world class instructor.

Issara Willenskomer has over 15 years directing, producing, designing and animating UI motion projects for companies that include Amazon, XBox, TiVo, Motorola, Target, Nordstrom, HBO and MTV, and agencies like IDEO and Frog.

“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

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.

Learn how to turn your files into professional animations.