Principle - Realistic Animations & Prototypes
4.7 (5 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
33 students enrolled

Principle - Realistic Animations & Prototypes

Learn how to create prototypes that look & feel like real applications using Principle App
4.7 (5 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
33 students enrolled
Created by Mariz Melo
Last updated 2/2019
English
English [Auto-generated]
Current price: $11.99 Original price: $24.99 Discount: 52% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 9 hours on-demand video
  • 70 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Student will be comfortable using Principle and its features to create their own prototypes
  • Students will learn the basics of Principle

  • Students will learn how to animate elements and create special effects in Principle

  • Students will learn about components and how to use them in Principle
  • Build the "YummyYucky" Tinder like food application
  • Build the "Moviegoer" mobile application with login/signup, sidebar options, list of movies with details page, video player, and more
  • Students will learn how to export their prototypes and animations as Images, Videos, and as a Mac Application
  • Students will learn how to share to iOS devices (iPhone, iPod Touch, iPad) using Principle Mirror
Requirements
  • Principle for Mac software (trial or with license)
  • Macintosh computer with Mac OS operating system
  • Familiarity with at least one design tool such as Sketch or Photoshop (nice to have)
Description

Learn how to create prototypes the look & feel like real applications. I will walk you through the Principle user interface and animation features, after that we will develop 2 different prototypes together.

The YummyYucky food taste app and the Moviegoer app which helps people finding movies to watch.

Knowledge in Sketch App is a nice to have, but not recommended for this course.

I hope you are as excited as I am to start this journey.

Let's get started.

Who this course is for:
  • Designers looking to convert their mockups into real looking prototypes
  • Motion designers looking to create design interactions with Principle
  • Product Managers looking for a way to communicate their ideas with designers
  • Anyone looking to create prototypes that look and feel like real apps
Course content
Expand all 55 lectures 09:12:39
+ Introduction
1 lecture 06:27

In this lesson I will introduce myself, give you an overview of the course and everything you are going to learn. We are also talk about the 2 different projects we will build together.

Preview 06:27
+ Basics
8 lectures 01:00:50

In this lesson I will give you an overview of the Principle user interface. Let's go over all the options available and learn some time saving shortcuts in the process.

Preview 06:25

In this lesson we will explore all features for the preview panel and how to export your animations.

How to use the Preview panel
08:29

In this lesson we will learn how to group elements together and how groups behave in Principle.

Grouping elements together
05:37

In this lesson we will go over the Insert toolbar menu option. Let's talk about Artboards, Shapes, and Text elements.

Working with Artboards, Shapes, and Text
05:53

In this lesson we will learn to work with Masks in Principle.

How to use Masks
09:52

In this lesson we will learn how to import different types of assets inside your projects in Principle.

Preview 05:12

In this lesson we will learn how to import assets from Sketch using copy and paste and the built in import feature in Principle. Also, let's learn how to hide artboards and merge groups into a single layer.

Importing Assets from Sketch
11:46

In this lesson we will learn how to import assets from Figma an online vector collaboration tool for creative teams.

NOTE: This feature was introduced in Principle version 5

Importing Assets from Figma
07:36
+ Animation
12 lectures 01:37:15

In this lesson we will learn the basics about Events and Transitions. Learn about the animate panel and how to use it to control your animations.

Events, Transitions, and the Animate Panel
11:18

In this lesson we will explore properties in the animation panel and how to work with them.

Animation properties
04:33

In this lesson we will explore circular animations and create a clock face for Apple Watch.

Using Angles to create an Apple Watch Clock face
11:35

In this lesson we will create an animated circular spinner that can be used to communicated content loading, waiting time between actions, and more.

Circular Spinner with Masks
05:49

In this lesson we will enhance our Circular Spinner animation making it more interesting.

Enhancing the Circular Spinner Animation
01:40

In this lesson you are going to learn how to drag and drop elements applying transitions and effects to them.

Drag and Drop elements
08:05

In this lesson we will learn how to scroll content in Principle. Scroll horizontal and vertical content.

Scrolling content
07:44

In this lesson we will learn more about the Drivers panel and how to use it to change the behavior of your animations.

How to use the Drivers panel
06:39

In this lesson we will use Drivers to simulate a circular solar system animation while dragging an element.

Creating a Solar System with Drivers
06:38

In this lesson we will learn how to use the Pagination event in Principle. We will also use Drivers to enhance our project.

Pagination Event with Drivers
07:46

In this lesson we are going to simulate the popular parallax effect using Principle. Let's create two examples together.

Parallax Effect with Drivers
13:15

In this lesson we will learn about how to share your animations in Principle.

Exporting your animations
12:13
+ Components
8 lectures 41:52

In this lesson we will learn more about components and why they are important for your workflows.

Preview 03:24

In this lesson we will learn how use components in principle. Let's create our first component.

How to use components in Principle
03:17

In this lesson we will learn how to create a switcher button. Users can use this kind of button to turn on and off features in an application.

Switcher button component
05:52

In this lesson we will learn how to create a slider component with value indicator.

Slider with nested components
09:50

In this lesson we will create a button with the "ripple effect", the touch effect mostly found on Google's Material Design System.

Button with Ripple effect (Material Design)
06:50

In this lesson we will learn how to duplicate a component and how we can modify an existing component to behave a little different from the original one.

Extending components
05:11

In this lesson we will learn how connect components to artboards and to other components.

Component Message Communication
04:45

In this lesson we will simulate text input and talk about some limitations in Principle.

Input text component
02:43
+ PROJECT: YummyYucky
8 lectures 02:15:02

In this lesson I will give you an overview of the Yummy Yucky application prototype we will build together during this section of the course.

Preview 06:20

In this lesson we will create the first screen for our application. You will learn how to use the assets in the resources and how to match your project with the original design.

Welcome screen
27:20

In this lesson we will create the screen that it will display the app food choices.

Food option screen
14:04

In this lesson we will create our food card component using page for a little of scroll effect and drivers to unveil positive and negative events.

Card component with Page Event and Drivers
19:30

In this lesson we will polish our card component and add some effects for positive and negative events (yummy and yucky).

Yummy and Yucky card selection
17:56

In this lesson we will add transition between our available food choices.

Transition between food options
17:05

In this lesson we will create a screen to display the food choices app users made while using the application.

Food menu screen
09:38

In this lesson we will include some interaction for the food menu items. Users should be able to delete saved cards.

Food item component
23:09
+ PROJECT - Moviegoer
14 lectures 03:20:29

In this lesson I will give you an overview of the Moviegoer application we will build together during this section of the course.

Preview 06:30

In this lesson we will build a circular progress indicator using masks and angles. We will also create an animation to display the Moviegoer logo once the application is loaded.

Progress indicator and Splash transition
16:12

In this lesson we will build our log-in screen using components for buttons and input types.

NOTE: Use the start.zip file provided to follow the lesson.

Log-in screen
21:09

In this lesson we will build the reset password screen.

NOTE: Use the start.zip file provided to follow the lesson.

Reset password screen
11:39

In this lesson we will build the create an account screen for our application.

NOTE: Use the start.zip file provided to follow the lesson.

Create an account screen
12:29

In this lesson we will build our application main screen with movie highlights, in theaters section, and your favorites.

Application main screen
29:46

In this lesson we will learn how to create the list of movies component with the Pagination event.

List of movies component
08:33

In this lesson we will learn how to create the trending movies interaction.

Trending movies interaction
18:10

In this lesson we will build the movie detail screen with all information about a movie, video trailer, and a list of related materials.

Movie details screen
33:33

In this lesson we will learn how to play a movie trailer in Principle.

Playing movie trailers
07:36

In this lesson we will create a button that let users favorite a movie.

Favorite a movie
07:25

In this lesson we will build a sidebar component with the application menu options.

Sidebar component
09:36

In this lesson we will build the sidebar list of favorites section.

Sidebar List of favorites
08:22

In this lesson we will create the sign-out feature with a confirmation screen.

Sidebar Sign-out option
09:29
+ Sharing your prototypes
3 lectures 08:03

In this lesson you will learn how to share your prototypes and interactions as an image or video.

Share as an Image or Video
Processing..

In this lesson you will learn how to share your animation projects as a Macintosh Application. This allows you to share in high fidelity and let users experience the full potential of your prototypes.

Share as a Mac Application
02:27

In this lesson you will get to know Principle Mirror the iOS app from the principle creator that lets you share your prototypes with iOS devices (iPod Touch, iPhone, and iPad).

Share to a device with Principle Mirror
05:36
+ Conclusion
1 lecture 02:41

In this lesson we will go over all we learn together during this course.

NOTE: What can we use principle for?

- Create prototypes to sell your designs
- Communicate micro-interactions
- Communicate with engineering teams and stakeholders
- Keynote presentations
- Experimental animations

Summary of the course
02:41