The most comprehensive, step-by-step course to master animations for mobile apps and websites. We are covering everything from the basics of prototyping and animations to advanced interactions and motion to enhance the UX.
We want to take some of the mystery out of design, so you can feel confident and make user friendly products. Mastering motion is like mastering design spell that will set you apart from other designers. You can create websites with fluid animations in few hours. Itās almost magical.
Full fledged course for beginner to advanced user. This masterclass is the only course you will ever need to master UI animations.
You don't need any coding experience to attend this class. Also, ui animations don't require as such coding at all.
Yes, once you buy the course you will get access to new classes added to the masterclass.
- Want to start a career in design
- Want to learn about the next big thing in the design world
- Want to understand interaction design and work with big clients
- Want a career which gives you creative freedom
- Want a career thatās well paid and in-demand
- Want to create working prototypes of app or web interfaces.
- This course is for beginners and for expert designers too.
So you are interested in levelling up your game. You should be!
But you know the road is not easy. This course will give you immense power in your hands and it's only up-to you how you take it further. UI/UX design is fasting growing field in US & Europe and someone who is capable of doing motion together with UI is the most in-demand right now.
I know, that sounds far fetched. But what if this was possible? What if you could, on a whim, create interactions/animations that impress stakeholders, win clients, and even put you ahead in your career?
In this course, youāll learn not only how to create interactions and animate interfaces well, but also how to do it quickly.
We'll be dividing the course into 3 parts.
We will start with understanding what is prototyping and animation. We'll dive into the basics of animation. No prior animation experience needed.
Basic intro to prototyping and animation
Teaching basics of animation
Understanding the use of motion
Understanding principles and techniques to use motion in U
Next, we will dive into creating those sweet beautiful dribbble like UIĀ animations and micro-interactions with interactive prototypes.
Learning how to create interactive prototype in Figma &Ā Principle
Understanding animation styles
Understanding drivers, animate and scroll effects in detail
Creating an app UIĀ card animation
In the last part, we will create more complex animations and we will learn how to export and preview prototype on phone.
Create a lottie animation in Adobe After Effects
Creating an app UIĀ card animation & website UI animation
How to mirror, and experience the interaction on mobile
Summary of everything and bonus lessons
Create beautiful interactions like these shown below!
Everything from thinking animation, enhancing UX with motion, prototyping, animation to sharing your prototypes with developers and stakeholders. Start to finish!
- Intro
- What is prototyping?
- What is UIĀ Animation?
-Ā Tools for Prototyping and Animation?
- Learn how to use motion from big brands
- Why do we need motion in UI design?
- Is UIĀ animation difficult?
- How motion enhances the UX of the products like websites and mobile apps?
- How does a Prototype and Animation work?
- Understanding Triggers & Keyframes
- What not to do while animating the UI?
- Intro
- Principles of UI Motion design
- Realtime vs Non-Realtime interactions
- Let's see these principles in action!
- Thinking animation based on these principles.
- Understanding motion choreography
- Understanding Tap Areas
- Understanding user interaction with mobile and web
-Introduction to Figma
- Figma Interface & Prototyping Panel
- Understanding Triggers in Figma
- Transition based animations
- Creating our first prototype
- Let's talk about interactions in Figma
- Scrolling and Paging
- Smart Animate
- Creating pressed button interaction
- Text Animation
- Basic card animation: Ideation
- Basic card animation: Properties being animated
- Basic card animation: Executing the animation
- Mobile Preview: Interacting with the prototype
- Bonus: Creating an animated background in Figma!
- Homework!
- Prototyping in Figma: Quiz
-Ā Reveal animation
- Zoom animation
- Slide in animation
- 3DĀ layers animation
- Parallax animation
-Complex 3D &Ā simulation based animation
- Understanding animation styles:Ā Quiz
- Introduction to Transform Properties
- Create animation in minutes by simple transform property changes
- Bad UI motion vs Effective UI motion
- Introduction to Principle
-Ā Installing Principle
- Interface tour
- Layers panel
- Timeline panel
- Drivers panel
- Basic set of tools inside principle
- Understanding 3 key things- Triggers, Drivers and Animate
- Importing files from Sketch &Ā Figma
- Creating a basic transition based animation
- Understanding keyframes and timeline
- Basic card animation in principle
- Masking or clipping in principle
- Scrolling & dragging
- Easing in animation
- Timing an animation
- Creating fake tap areas
- Let's talk about components
- Creating a working prototype using components
- Previewing the interaction on mobile device
- Recording the animation &Ā handoff to developers
- Summarising everything!
- What are micro-interactions?
- How subtle micro-interactions are very important for the user
- Tab bar animation in Figma
- Hamburger menu animation in principle
- Tab bar animation in Principle
- Intro to Adobe After Effects
- Importance of AE in product design
- Basic animation workflow in after effects
- Importing layers from Figma
- Understanding how layers work in AE
- Understanding keyframes and timeline in AE
- Effects panel
- Transform properties:Ā PSRT
- Shape layers or Vectors
- Simple Loading Animation
- What is lottie animation?
- Bodymovin plugin in action
- Creating a Heart icon animation
- Exporting in JSON format
- Thoughts on After Effects
- Sharing prototypes using share feature in Figma
- Exporting prototypes in Video format
- Live device preview in Figma and Principle
- Animation handoff to developers
ā
- Tools don't matter much
- How to think of an animation
- Resources you can take inspiration from
- What tools do I use to work with clients?
- Extro!
- Creating a phone charging feedback animation
- Complex text animation in Principle
- Complex animation 3 (Unlock itself 1 month after course completion)
- Complex animation 4 (Unlock itself 1 month after course completion)
After watching a ton of YouTube videos, practicing for years, enrolling in a wide number of courses and a ton of trial and error, Aashish finally reached a point where he got down the fundamentals of creating any kind of animation. Flash forward to today, Aashish has created hundreds of UIĀ animations for million dollar startups and clients ranging from Byjus, Snapdeal, JustWatch and many more.
ā
And unlike so many courses out there today, Aashish wanted to create a masterclass that cuts out the theory and providing you with the practical fundamentals that actually work.
After completing this course you will be able to solve more complex problems using your interaction design thought process. See you in the class!
That's how I've created this course. We will not go the bookish way instead we will dive into action while understanding the basics and we'll work our way up, gradually, step by step. The course is designed to be beginner friendly, but as we go into the course advanced users will also be able to learn lot of new things.
UIĀ Animation Masterclass is sold out. Enrollment opens on March 21st š
Value packed masterclass [60+Ā Video Lessons]
Get access to all the project files shown in the masterclass
Quiz and Workbook to make the learning more intuitive
Support over video call for the members
Instant messaging via the Course Page
UIĀ animation Ebook included (When it's ready)
BONUSES (We'll look at creating complex animations)
Payment is processed and secured by Stripe and PayPal by 128bit SSL encrypted payment.
Let's help you become more successful.
Unlike other courses, the UI Animation masterclass is a concise course with value-packed 90+ videos to transform your career. Along with video lessons, you will have access to worksheets, quizzes, project files, and ebooks. Create a working prototype, beautiful animations & micro-interactions for your mobile app & website which will put you on the world's most wanted designer list.
This masterclass includes-
š Ā 60+ video lessons of practical and concise knowledge
š Ā Actionable, easy-to-digest 5-8 min videos
š Ā Downloadable project files for every lesson
š Ā Worksheet exercises to apply what you learned
š Ā Valuable links and resources for every lesson
š The ultimate UI animation project checklist as a takeaway
The masterclass will launch on the 21st of March, 9:30 am CET.
Currently, the course is building. After pre-ordering the course, you will receive an email with a link to login/signup to the masterclass. Once you log in, you'll have immediate access to the course but the videos will be locked until the launch date. You can follow the linear progression at your own pace after the launch.
Yes, If you pre-order the course before 3rd of March then you will be getting lifetime access to this course.
We will start with a basic design tool called Figma which is an industry-standard tool for designing UI. We will prototype in Figma, then we will move to Principe and finally, we will see how to create complex animations inside Adobe After Effects.
This is not a course covering one single thing. There's a reason why it is called Masterclass. We nurture you from beginner to advanced level designer. Everything from ideation to developer handoff is covered inside this masterclass. Video lessons are not always enough so we will also provide workbooks and quizzes to validate your knowledge while you progress along the journey.
Of course! This masterclass teaches you the very basics of the above-mentioned tools. So if you've just started out in design it is okay. But to be honest, we will say first gather basic design knowledge and then come back and get enrolled in the course, then it will be a very smooth journey. Although we have tried to explain every bit in an easily understandable way.
We are very confident in our masterclass that it will serve our students well.Ā But if in case, you aren't happy with the class, then email us within 30 days of purchase and we'll offer a full refund.
Yes, for sure! You'll learn a step-by-step process you can use in any future projects. And guess what, within minutes you'll be able to create fully-fledged prototype.
This masterclass will be a recorded set of videos.
Yes, of course! The basics are always the same for interaction design and switching to a different tool doesn't matter. But yes, the interface might be different for a different tool.
