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
Now
65$
/$100

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

Discover more about
this course

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    Welcome
    • Intro
    • What is prototyping and UI Animation?
    • Tools for Prototyping and Animation
  • Lesson 2
    Use 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 3
    Motion 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 4
    Animation Properties
    • Animation styles in Action
    • Creating animation in minutes by simple transform property changes
  • Lesson 5
    Principle 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 6
    Exporting Prototypes
    • Previewing the interactive prototype on mobile device
    • Exporting Video & GIF from Principle
  • Lesson 7
    Complex UI animations (Advanced)
    • Rapid Prototyping a UX Solution to a problem
    • How to think about animation quickly?
    • Text animation & Landing Page Animation
  • Lesson 8
    Final 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

Director of Design @Polynomial, Founder & Creative Director @MillionFrames

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. 

Now
65$
/$100

Course Content

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.

Features

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginners & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.
Start the course and grow up to the moon
Start the course and grow up to the moon

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses