Complete guide to Prototyping & UI Animations in Principle
- Language: English
- Certificate: of completion
- Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Duration: 3 Hours 54 Mins
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.
| Category | Course format | Language | Duration | Level |
|---|---|---|---|---|
| Online | English with Subt. | 3 Hours 54 Mins | Beginners & Intermediate |
Requirements
There is no prerequisite for this course; it is open to students of all skill levels. Principle for Mac Tool Trial Version is required.
Description
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.
You will learn
- Prototyping and Animations in Principle
- Fundamentals of animation and interaction design
- How to think animation
- Use of motion in UI design
- Motion choreography
- Animation properties
- Exporting prototypes and animations
The course includes
- Almost 4 hours of practical and condensed knowledge
- 33 lectures Course Documentation
- Source Files: Figma and Principle
- Valuable links and resources for every lesson
Modules
What you will learn
in this course.
-
Lessons
-
Lesson 1Welcome
-
Intro
-
What is prototyping and UI Animation?
-
Tools for Prototyping and Animation
-
-
Lesson 2Use of Motion in UI
-
Why do we need motion in Product Design?
-
Purpose of UI Animations
-
Is UI animation difficult?
-
How does a Prototype and Animation work?
-
What not to do while animating the UI
-
-
Lesson 3Motion Choreography
-
Breaking down a UI animation
-
Realtime vs Non-Real Time interactions
-
Principles of UX in motion
-
Understanding motion choreography
-
Understanding user interaction with mobile and web
-
-
Lesson 4Animation Properties
-
Animation styles in Action
-
Creating animation in minutes by simple transform property changes
-
-
Lesson 5Principle Intro (Basics)
-
Intro, Installing Principle, Interface and Connecting screens
-
Importing designs & Animation Timeline
-
Creating a footer bar micro-interaction
-
Scrolling & Paging in Action
-
Understanding Drivers
-
Easing, Timing in Animation & Creating Delays
-
Components
-
Creating Fake Tap Areas & Playing Videos
-
Creating an interactive mobile app prototype with video
-
-
Lesson 6Exporting Prototypes
-
Previewing the interactive prototype on mobile device
-
Exporting Video & GIF from Principle
-
-
Lesson 7Complex UI animations (Advanced)
-
Rapid Prototyping a UX Solution to a problem
-
How to think about animation quickly?
-
Text animation & Landing Page Animation
-
-
Lesson 8Final thoughts
-
What tools do I use to work with clients?
-
How to get better at animation thinking?
-
Resources you can take inspiration from
-
Extro!
-
Meet the teacher
Aashish Kumar
Aashish Kumar is Director of Design at Polynomial where he handles everything related to product design and videos. Aashish is passionate about shaping digital experiences through design & motion. He combines his knowledge of Motion design and filmmaking in his creative process to add life to static designs in digital products. Aashish has worked with brands like Byjus, Snapdeal, Cowrks, Envato, and JustWatch, etc.
Course Content
Requirements
There is no prerequisite for this course; it is open to students of all skill levels. Principle for Mac Tool Trial Version is required.
Description
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.
You will learn
- Prototyping and Animations in Principle
- Fundamentals of animation and interaction design
- How to think animation
- Use of motion in UI design
- Motion choreography
- Animation properties
- Exporting prototypes and animations
The course includes
- Almost 4 hours of practical and condensed knowledge
- 33 lectures Course Documentation
- Source Files: Figma and Principle
- Valuable links and resources for every lesson
Features
- English
- English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Beginners & Intermediate
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Aashish Kumar
Teacher at awwwards.com
If you have any questions about this course, please contact us
