LearnUX.io Awwwards Honorable Mention

Principle App Course

  1. Introduction to Principle 02:57

    Introduction to Principle

    Say hello and see what you will learn along

  2. Getting to Know Principle 03:24

    Getting to Know Principle

    Some basic but pretty useful things

  3. Simple Animations 07:54

    Simple Animations

    Create your first animations with Principle

  4. Layer Organization 09:20

    Layer Organization

    Check out groups, panels and naming conventions

  5. Animation Panel 06:14

    Animation Panel

    Learn how to use the animation panel in Principle

  6. Import From Sketch 04:50

    Import From Sketch

    Use readymade Design assets from Sketch

  7. Easing in Animation 06:20

    Easing in Animation

    Make animations smooth with easing

  8. Entry Animation 09:03

    Entry Animation

    Create the entry animation in Principle

  9. Next Screens Animation 07:20

    Next Screens Animation

    Continue work with the screens in Principle

  10. Working with Drivers 12:15

    Working with Drivers

    Make one motion dependent on the other

  11. Principle Mirror 04:08

    Principle Mirror

    Preview your prototypes on a real device

  12. Designing in Sketch 07:20

    Designing in Sketch

    How to create assets for Principle in Sketch

  13. Sketch Import and Paging 08:25

    Sketch Import and Paging

    Using simple effect for paging in your prototype

  14. Intro Animation 13:14

    Intro Animation

    Animation for the first screen of our app

  15. Organizing Sketch Assets 13:19

    Organizing Sketch Assets

    Prepare some assets and roundtrip workflow in Principle

  16. Sketch Import 10:12

    Sketch Import

    Importing our apps design into Principle

  17. Card Animation 10:20

    Card Animation

    Create a nice card swiping effect in Principle

  18. List Animation 03:40

    List Animation

    Animating the list inside the Home App

  19. Components 12:56

    Components

    Check out how you can work with the components

  20. Component Events 05:29

    Component Events

    Send and receive Events from inside the Component

  21. Room Menu 07:13

    Room Menu

    Next steps with our apps prototype

  22. Temperature Animation 04:37

    Temperature Animation

    Create micro-interaction for the temp slider

  23. Ambient Color Change 06:16

    Ambient Color Change

    Smooth change of ambient light in our app

  24. Animation on Path 11:34

    Animation on Path

    How to create more advanced animations in Principle

  25. Senses Animation 08:34

    Senses Animation

    Check out the next screen of our app in motion

  26. Preparing Assets 08:27

    Preparing Assets

    Additional assets for transitions in Principle

  27. Recording Presentation 06:30

    Recording Presentation

    How to record and share your prototype

  28. Going to Photoshop 14:40

    Going to Photoshop

    First steps for creating stunning presentation

  29. Working with Mockups 06:28

    Working with Mockups

    Grab some high quality assets and mockups

  30. First Presentation Page 12:22

    First Presentation Page

    Working on the first page of your presentation

  31. Second and Third Presentation Page 12:30

    Second and Third Presentation Page

    Designing next portfolio presentation pages

  32. Fourth Presentation Page 06:18

    Fourth Presentation Page

    Some Photoshop techniques to deliver next page

  33. Fifth and Sixth Presentation Page 11:28

    Fifth and Sixth Presentation Page

    Design next pages of the presentation for Behance

  34. Seventh Presentation Page 09:07

    Seventh Presentation Page

    Next page of the presentation

  35. Eight Presentation Page 08:07

    Eight Presentation Page

    Eight and last page of the presentation in Photoshop

  36. Preparing For Export 08:16

    Preparing For Export

    Organizing assets for export from Photoshop

  37. Gif Export 07:32

    Gif Export

    Exporting gif files using tools and advanced ffmpeg export

  38. All Assets Export 07:05

    All Assets Export

    Generating assets for our presentation

  39. Behance Presentation 06:48

    Behance Presentation

    How to put it all together on Behance

  40. Goodbye 00:59

    Goodbye

    That is it for now

Principle App Course

Duration: 05:23:31 Last update: 4 years ago
  • Key Points
  • Author
  • Source Files
  • Who is this course for?

Do you want to design interactive, animated interfaces and app prototypes? Currently, it is one of the most sought after skills of a UI/UX designer! See for yourself how fascinating the design of interactions really is! Your clients will react with a simple: “Wow! It’s already working?” Design your own, spectacular presentations on Behance and reach new customers!

  • UI Micro interactions
  • Behance presentation
  • Principle Interface & Tools
  • GIF exporting
  • Sketch & Principle
  • Practical projects

Greg Rog - “My work is all about design, coding and education. For over 10 years I’ve been a professional designer, design lead and UX consultant for companies such as Microsoft or Google. I work closely with Adobe as Community Professional. I also run a software house and a training facility, speak on design conferences and more. I’m curious, passionate and I love sharing knowledge.”

Sorry, you don’t have access to the project files.

Why don’t you subscribe and get full access throughout the site?

This course has been designed for UI/UX designers who would like to improve their skills in designing spectacular and interactive prototypes. It is aimed at designers with varied amounts of experience, who need to refine their skills and creativity.

Reviews (2)

Learn Principle the right way

In this Course you will learn all you need about the design of interactions and animations with one of the best apps in the market – Principle. We’ll use it to create an interactive prototype for the intelligent home app we’ve made in Sketch, and design interesting screen transitions and micro interactions in order to showcase all the app’s functionality, and explore various features of Principle at the same time.

Creating great Presentation

In the latter half of the course we are going to create a spectacular presentation to showcase on Behance, using our previously designed interactive prototypes and Adobe Photoshop. This presentation will serve as a great addition to your UI/UX designer portfolio, and attract new project opportunities.

Principle and interactive design
Principle interface and tools

Principle Interface & Tools

During the lessons you will become familiar with specific techniques to use while working in Principle. We are going to make use of two animation models – screen transitions and Drawers, which let us create micro interactions based on numerous interdependent animations. A few, simple examples will show you which tools to use, and when.

Sketch & Principle

If you decide to attend the lessons, you will see how to prepare projects in Sketch and later import them to Principle, in such a way as to animate the imported elements easily. When you design a project, and organize and name the layers properly, you will create one which is almost automatically animated!

Simple and advanced animations

We are going to design an impressive animation using scroll transitions, in Principle. You will see how to achieve a pagination effect for each separate screen, and how to connect scrolling effects with other animations by means of Drawers.

Principle and animations
Principle and gif export

GIF export

One of the most important skills for presentation design is putting together all the previously created components. Here, you will learn how to prepare animated GIFs using Photoshop, ffmpeg, and other great, free, dedicated software.

Finished project

You will learn how to export your finished projects as videos, Dribbble shots and how to best prepare them to be presented to the client as well as in your portfolio!

Gain access to all courses from $12/mo