UI animation is not only a visual garnish but a skill that can tell better stories & create aesthetically-pleasing user experiences. Motion looks difficult at first but if mastered can add a new dimension to your creative process.
With this course I’m gonna make all about prototyping and animation easy for you. I’m going to teach you how to think about motion in UI, and how to create that working prototype that can impress your clients and stakeholders.
In this course, you will learn how to add fluid motion to your designs and create interactive prototypes. We will cover topics ranging from basics of animation & prototyping, use of motion in UI, motion choreography, micro-interactions to multiple page prototypes with complex UI animations as well as how to prepare, animate and export your animations in Principle.
We’ll be creating a multiple pages mobile app interactive prototype. From importing in Principle, to preparing your workflow, to animating different UI elements such as page transitions, buttons, images and text.
At the end of this class, you will be able to create interactive prototypes with complex motion.
The subtitles are automatically generated, so the quality of the captions may vary.8 sections • 33 lectures • 3 hours 54 mins
-
Welcome3 lectures 06:02 Mins
-
Intro01:40 Mins
-
What is prototyping and UI Animation?02:27 Mins
-
Tools for Prototyping and Animation01:55 Mins
-
-
Use of Motion in UI5 lectures 11:02 Mins
-
Why do we need motion in Product Design?01:47 Mins
-
Purpose of UI Animations02:41 Mins
-
Is UI animation difficult?00:54 Mins
-
How does a Prototype and Animation work?03:41 Mins
-
What not to do while animating the UI01:59 Mins
-
-
Motion Choreography5 lectures 07:50 Mins
-
Breaking down a UI animation01:45 Mins
-
Realtime vs Non-Real Time interactions01:07 Mins
-
Principles of UX in motion02:17 Mins
-
Understanding motion choreography01:44 Mins
-
Understanding user interaction with mobile and web00:57 Mins
-
-
Animation Properties2 lectures 02:51 Mins
-
Animation styles in Action01:45 Mins
-
Creating animation in minutes by simple transform property changes01:06 Mins
-
-
Principle Intro (Basics)9 lectures 2 Hours 36 Mins
-
Intro, Installing Principle, Interface and Connecting screens12:45 Mins
-
Importing designs & Animation Timeline13:45 Mins
-
Creating a footer bar micro-interaction11:47 Mins
-
Scrolling & Paging in Action07:09 Mins
-
Understanding Drivers14:15 Mins
-
Easing, Timing in Animation & Creating Delays24:43 Mins
-
Components08:13 Mins
-
Creating Fake Tap Areas & Playing Videos14:26 Mins
-
Creating an interactive mobile app prototype with video49:08 Mins
-
-
Exporting Prototypes2 lectures 06:52 Mins
-
Previewing the interactive prototype on mobile device02:56 Mins
-
Exporting Video & GIF from Principle03:56 Mins
-
-
Complex UI animations (Advanced)3 lectures 40:19 Mins
-
Rapid Prototyping a UX Solution to a problem16:48 Mins
-
How to think about animation quickly?12:12 Mins
-
Text animation & Landing Page Animation11:19 Mins
-
-
Final thoughts4 lectures 03:52 Mins
-
What tools do I use to work with clients?01:05 Mins
-
How to get better at animation thinking?00:52 Mins
-
Resources you can take inspiration from00:40 Mins
-
Extro!01:15 Mins
-
