Learn how to animate dashboards & infographics like a pro.
Create Dribbble, Pinterest and Behance quality UI animations with these 10 After Effects tutorials (no experience required).
Tutorial #0 – Introduction and workflow overview
Duration: 20 min
In this first tutorial, you learn all the pros and cons of bringing your data design into After Effects from Photoshop or Illustrator. You learn which program supports guides, which supports shape layers, pre-compositions, and more. This first tutorial will set you up powerfully when you begin animating your work in the next tutorial.
Tutorial #1 – Animating graph shapes
Duration: 19 min
Working with After Effects shape layers is key to data driven animations. You learn how to turn your design asset into an After Effects shape layer and how to use the ‘trim paths’ tool, as well as other important properties to animate the transition on, color, stroke, and dash values.
Tutorial #2 – Slot machine/odometer numbers
Duration: 20 min
Knowing how to animate slot machine/odometer numbers is a great skill to have. You learn how to apply and animate the ‘offset’ tool to your design assets, as well as how to nail the timing and easing to create a professional animation. Learn other iterative possibilities as well.
Tutorial #3 – Bar graph
Duration: 33 min
In this powerful tutorial you will learn how to set up and animate multiple shape objects from your design file inside of After Effects. You’ll learn a simple technique for quickly animating the entire graph, as well as more techniques to give you detailed finessing options over your shape, color, and timing.
Tutorial #4 – Animating multiple radial graphs
Duration: 4 min
In this tutorial, you’ll learn how to very quickly convert your UX/UI design to editable shapes inside of After Effects, animate the shapes with the ‘trim paths’ tool, and finesse the timing and trim controls to design the exact animation you need.
Tutorial #5 – Radial graph transition jubilee
Duration: 25 min
Time to take things up a notch and learn how to prototype iterative UI animations. Learn how to create multiple versions from the same design asset, playing with radial transitions, nulls, and adding subtle details to take your UI animation to the next level. Learn basic expressions and ways to simplify your animation setups for maximum iterative flexibility.
Tutorial #6 – Overlapping radial graphs
Duration: 10 min
In this tutorial, you learn how to work with overlapping assets and how to finesse the timing to tell the story. Using the ‘trim paths’ tool, you learn how to quickly iterate overlapping designs and time them with professional easing.
Tutorial #7 – Dashed ‘speedomoter’ graph
Duration: 8 min
Learn how to set up and animate a dashed line graph using After Effects layer styles and track mattes. Takes layer styles animations to a new level and allows for plenty of UX/UI related iterative possibilities.
Tutorial #8 – Graph volume and color change
Duration: 14 min
Learn how to change any graph shape and animate the stroke and fill independently using After Effects layer styles. Useful in a variety of situations and data related contexts. Build a simple and elegant numbers transition using track mattes.
Tutorial #9 – Bringing it all together
Duration: 6 min
In this powerful lesson you will learn how to import your previous After Effects tutorial projects you completed and assemble them into a UI animation dashboard masterpiece.
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.
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.
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
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.
Data is a living thing. Make it animate.
Data animations provide an opportunity for users to view the narrative of their lives, be it steps taken or weight lost.
As designers we forget that data is a reflection of users actions and speaks to their commitment behind their actions. Data animations tell a dynamic story of results.
Data animations connect the visual and the narrative, providing the user with a much richer and deeper connection to their results.
Industry best practices
Issara Willenskomer has over a decade of UI Animation experience working on projects clients like XBox, Facebook, HBO, Twitter, Nordstrom, Amazon, Target, 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 –
- Project setup and optimization
- Converting your designs into After Effects shape layers
- Manually transforming After Effects shape layers
- Transforming After Effects shape layers with modifiers
- Adding and animating After Effects layer styles
- Track Mattes
- Offset effect
- Numbers effect
- Keyboard shortcuts
- Simple easing and timing numbers to give you perfectly timed UI animations
A ‘data animation’ toolkit.
The 10 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 quickly prototype iterations on demand – a powerful ability for any UX/UI designer.
“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
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.
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.
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.
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.
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).
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.
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.