Rapid Prototyping
25 TUTORIALS | 7 HOURS | 3 BONUSES
This comprehensive UI Animation course gives you all the tools you’ll need to turn your UX/UI projects (Photoshop, Illustrator, Sketch, and Adobe XD) into high fidelity UI animations for your client, presentation, or portfolio. All tutorials are based on real world projects, apps and industry standard UX workflows.
$697
Add to cart View bundle discountsAbout this course
I created the Rapid Prototyping course to be the ultimate deep dive into UI animation with After Effects.
The course covers extensive topics and projects.
I also designed this course for you to pick and choose which lessons you need immediately. If you need to learn 3D, watch that module. If you need to learn simple effects like how to blur, watch that lesson. If you're wanting to go deeper on parenting, I have you covered.
The Rapid Prototyping course also covers topics like industry best practices, how to set up projects that you can iterate quickly, as well as the tools and tactics that make successful UI animations.
This includes working with the anchor point, parenting, masks, cascade style build animations, 3D layers, lights and camera, and using expressions to work smarter and faster.
When you purchase the Rapid Prototyping course,you'll receive an email invite to the private UX in Motion Facebook group.
I've also included some great bonuses to help you get started and work faster.
Best,
Issara Willenskomer
Founder of UX in Motion, Instructor
★★★★
"This course is absolutely the best resource I've ever found for using After Effects in UI Design. Issara is a great teacher who quickly gets to the point and helps you know how to navigate the overwhelming AE interface with ease. This course is a great way to start adding motion into your workflow, and it has made an invaluable addition to my skillset."
– Walker, UX Designer, EP+Co
★★★★★
An assignment came up at work that required using After effects and it needed to be done quick. I'd used AE like 6 years ago for VFX but man, I was so rusty I barely remembered how to import files properly. I didn't know where the tools were and scrubbing Youtube for random tutorials drove me nuts and wasted a lot of time. Along the line somewhere I bumped into the Rapid Prototyping Tutorial, and after watching a the 2 free videos, it was so clear I needed to get the full package. Issara really broke each step down and made it super easy to navigate AE. He went through how to prep for files for animation, to creating an efficient workspace for prototyping. to creating animations specific to UX. Ive watched a lot of AE tutorials - A LOT! This one in my opinion is the best value for money - its clear, its quick, it caters to UX Designers new to animation and it had me grooving through After Effects after a few hours. Oh.. yeah .. that project, I delivered like a BOSS.
– Jibola Fagbamiye, UX Designer, XapCard Inc
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 – 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Watch sample from this course
Watch a 60 second sample from the Rapid Prototyping course
Course includes these 3 free 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.
Don't own After Effects? Not a problem! Download the free 30 day demo of After Effects from the Adobe site.
