10 TUTORIALS | 2.5 HOURS | 3 BONUSES
Learn how to make your data and dashboards come alive for your users using Adobe After Effects. Learn how to animate graph shapes and colors, numbers, line graphs, radial graphs, odometer numbers, and more.
In the The Dashboard Animations course you will learn how to important UI animations that appear in dashboard and information display contexts.
In this course, you will be primarily working with Adobe After Effects 'shape layers', which are vector animatable layers. One of the great things about these layers is that you can export them as JSON files for your engineering team.
You will also be learning strong best practices and workflows, as well as how to make numbers count, the trim paths tool, masking, how to animate changing colors, and other critical tools and techniques.
In putting this course together, I trend-mapped hundreds of dashboard and information related animations. They fell into 8 key buckets, and those are the main lessons in the course.
I also wanted you to learn how to assemble multiple dashboard pre-compositions that you built into one large display animation. This is the final tutorial.
The bonuses include my UI Animation Fast Start course if you have no experience working in After Effects. It will get you up and running in less than an hour. If you are new to After Effects, watch that first and then dive into the tutorials.
When you buy the course, you will also get access to the private UX in Motion Facebook group where you can get questions answered and feedback.
Founder of UX in Motion, Instructor
"As a UI designer, I work with charts and dashboard almost every single day. This course from Issara has helped me to level up my infographics design from static to motion and has enabled me to communicate much better with the developers how I want my charts and dashboard to animate. Issara's teaching style is also way cooler than most of the teachers out there. His instructions is clear and straight to the point. If you are a UI designer who is looking to add some motion spice to your design then this course is definitely for you.
– Quoc, Senior UX/UI Designer at Texo Design, Australia
"Great course for someone looking to expand their knowledge of AE and create cool motion of infographics with attention to details. Great tricks and good advises. I appreciate the professionalism and great material of the course. I learned a lot of things that I later found myself using them in many different scenarios even other than Infographics."
– Elizaveta, Digital Experience Designer at Ford, Michigan
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.
Depending on the project, this could include Photoshop, Illustrator, or Sketch. You don't need to have these programs to use this training.
HD video files for you to watch online or download and sync to watch later on your devices.
Use this file to follow along with the tutorial and even ideate your own solutions and iterations!
Tutorial #1 – 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 #2 – 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 #3 – 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 #4 – 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 #5 – 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 #6 – 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 #7 – 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 #8 – 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 #9 – 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 #10 – 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.
Watch a 60 second sample from the Dashboard Animations course
These additional training and resources will help you to get up and running fast, with great content and access to Q&A
New to After Effects? Get up and running in less than an hour with this 3 part Fast Start video course.
Get your questions answered in this exclusive group of world class designers. Post, share, and critique inspiration. Get new tips and resources.
Print out and accelerate your learning with these 23 critical keyboard shortcuts just for UI animation. PDF included with purchase of course.
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.
UI Animation Fundamentals ✚ Micro-interactions ✚ Dashboard Animations ✚ Bonuses