UI Animation using Sketch 3, Principle App, and Flinto

UI Animation using Sketch 3, Principle App, and Flinto, available at $54.99, has an average rating of 4.5, with 61 lectures, based on 1105 reviews, and has 6353 subscribers.

You will learn about Learn the Fundamentals and Some Advanced Tricks on Sketch Create realistic prototypes for mobile devices and web Create UI animation and micro-interactions using Flinto Create UI animation and micro-interactions using Principle Create simple prototypes using Marvel App This course is ideal for individuals who are Web Designers or Mobile App Designers or Developers wanting to know a bit more about User Interface Design or Product Managers trying to learn new skills. or Graphic Designers who which to start creating web and mobile products It is particularly useful for Web Designers or Mobile App Designers or Developers wanting to know a bit more about User Interface Design or Product Managers trying to learn new skills. or Graphic Designers who which to start creating web and mobile products.

Enroll now: UI Animation using Sketch 3, Principle App, and Flinto

Summary

Title: UI Animation using Sketch 3, Principle App, and Flinto

Price: $54.99

Average Rating: 4.5

Number of Lectures: 61

Number of Published Lectures: 59

Number of Curriculum Items: 61

Number of Published Curriculum Objects: 59

Original Price: $22.99

Quality Status: approved

Status: Live

What You Will Learn

Learn the Fundamentals and Some Advanced Tricks on Sketch
Create realistic prototypes for mobile devices and web
Create UI animation and micro-interactions using Flinto
Create UI animation and micro-interactions using Principle
Create simple prototypes using Marvel App

Who Should Attend

Web Designers
Mobile App Designers
Developers wanting to know a bit more about User Interface Design
Product Managers trying to learn new skills.
Graphic Designers who which to start creating web and mobile products

Target Audiences

Web Designers
Mobile App Designers
Developers wanting to know a bit more about User Interface Design
Product Managers trying to learn new skills.
Graphic Designers who which to start creating web and mobile products

UPDATE June 2017 – Nested Symbols!

Creating a Button System with Nested Symbols
Creating a Left Bar Navigation with Nested Symbols

UPDATE December 27 2016 – New projects!

Creating an on-boarding parallax animation using Flinto and Sketch
Drawing Santa on Sketch (Holiday Special)
The most useful keyboard shortcuts on Sketch
My Favorite practical Sketch Plugins!

UPDATE July 11th 2016 – New content!

Added How to add Hover effects on Flinto – Mouse Over / Mouse Out. Great for web design prototypes
Creating a Parallax UI Animation Using Flinto.

UPDATE July 5th 2016 – New content!

Added a section covering Principle for Mac.
12 videos (over an hour of content)
How to create character animations
Parallax Effect using Principle
Drag And Drop Interaction
Continuous Interactions like Paging, Scrolling, Dragging.
Many more!

UPDATE June 18th 2016 – New content!

Added a section covering Flinto for Mac.
9 videos (over an hour of content)
Connecting Layers, Complex Transitions
User Interface Cards Flow Animation
Adding Sound to Your Prototype (and many more)

//////////////////////////////////////

Introduction
Hola, my name is Pablo Stanley. I’ve been a designer for almost 18 years– And I have worked with different startups for quite a while. I want to teach you how to apply the tools I use every day–and I’ll give you some insight into my workflow and process as a product designer.

On this course you’ll learn how to design web and mobile products using Sketch 3. We’ll also learn how to prototype full flows and micro-interactions using the most current apps in the industry like Flinto, Principle, Marvel App, and Invision’s Craft Plugin. And the coolest part about this course? We’ll learn how to create detailed UI animations and how to apply them to your projects.

This course is designed in different sections so you can jump around depending on your skill level. You’ll be able to learn how to use the tools to make your own designs from scratch. And we’ll also learn by doing, getting hands-on with more advanced projects.

So, Why Sketch?
Sketch 3 is a design tool focused on user interface and user experience design. Because of its simplicity, it’s really easy to understand; anyone with little to no training can learn Sketch. It’s perfect for designing for multiple mobile devices, working on responsive web design, delivering assets in an easy way, and makes collaboration with developers amazing. It also costs a fraction of the price of Adobe Suite (goodby monthly payment). So yeah, it’s pretty cool.

Why Flinto, Principle, Marvel App and Craft by InVision
Principle makes it easy to create animated and interactive user interface designs. Great for Multi-screen app, or new interactions and animations.

Flinto lets designers quickly make interactive prototypes of their mobile, desktop, or web apps.with custom animations, gestures, and Sketch import

This simple editor in Marvel allows you to link all your designs together in seconds, then add gestures and transitions to make your prototype feel just like a real app or website.

This Course
This course covers the basics, but also goes into detail on some advanced features, tricks, and plugins that I use in my daily workflow.

We’ll also work on some cool projects that we’ll be able to prototype and share on our mobile devices and the web. We’ll even do some UI animation and micro-interactions that will make your prototypes look pretty realistic.

Course Curriculum

Lecture 1: Intro / Promo

Chapter 1: Sketch 3 Basics

Lecture 1: Introduction

Lecture 2: Understanding Artboards

Lecture 3: Using Colors and Graphic Styles

Lecture 4: Creating Text Styles

Lecture 5: Using Symbols

Lecture 6: 10 Quick Tips!

Chapter 2: Sketch 3 Intermediate Level Stuff

Lecture 1: Designing with Layout Grids

Lecture 2: Creating Custom Shapes

Lecture 3: Masking

Lecture 4: Plugin: Dynamic Button

Lecture 5: Plugin: Craft Duplicate by InVision

Lecture 6: Plugin: Craft Photos by InVision

Lecture 7: Plugin: Craft Library by InVision

Lecture 8: Plugin: Craft Prototype by InVision

Lecture 9: My Favorite Keyboard Shortcuts

Lecture 10: Common Shortcuts and Creating your Own

Lecture 11: Favorite Sketch Plugins (2017 Version)

Chapter 3: Sketch Advanced Stuff

Lecture 1: Creating a Button System with Nested Symbols

Lecture 2: Creating a Left Navigation Bar with Nested Symbols

Chapter 4: Principle – Simple UI Animation and Prototyping Tool

Lecture 1: Introduction to Principle

Lecture 2: Connecting Screens and Creating Links with Events

Lecture 3: Creating Custom Animations on Principle

Lecture 4: PRACTICE: Create a tabbed Navigation

Lecture 5: Continuous Interactions: Dragging, Scrolling and Paging

Lecture 6: PRACTICE: Creating a Scrollable Prototype

Lecture 7: The Power of Drivers on Principle

Lecture 8: PRACTICE: Creating a Character Move With Dragging Interaction

Lecture 9: PRACTICE: Paged Scrolling using Drivers

Lecture 10: PRACTICE: Creating a Parallax Effect

Lecture 11: PRACTICE: Simple Drag And Drop

Lecture 12: PRACTICE: Character Animation Using Principle

Lecture 13: Exporting your prototype to GIF and Mocking up on Device

Chapter 5: Flinto – User Interface Animations Tool

Lecture 1: Intro to Flinto

Lecture 2: The Basics and the UI of Flinto for Mac

Lecture 3: Creating Screen Transitions on Flinto

Lecture 4: Creating Modal Overlays Using Flinto

Lecture 5: Adding Layer Transitions On Flinto for Mac

Lecture 6: Connecting Layers on Flinto

Lecture 7: Creating Scrollable Areas using Flinto for Mac

Lecture 8: Creating Cards Animation Flow on Flinto

Lecture 9: Adding Sound To Your Prototype on Flinto

Lecture 10: Using Mouse Over and Mouse Out Gestures (hover) – Creating Quiz

Chapter 6: Projects

Lecture 1: Prototyping a modal overlay on Flinto

Lecture 2: Creating an onboarding walkthrough parallax animation

Lecture 3: Designing a Santa Illustration (Holiday Special)

Lecture 4: Creating a Parallax Effect Using Flinto

Lecture 5: Creating a full Prototype using Marvel and Sketch

Lecture 6: Create Animated Icons Using Flinto

Lecture 7: Designing a Refresh Animation

Lecture 8: Prototyping a Refresh Animation

Lecture 9: Creating a simple signup flow on Sketch 3

Lecture 10: Creating a prototype of a Signup Flow using Marvel App

Lecture 11: Adding Sound to your Prototypes – Creating a Drumpad

Chapter 7: EXTRA: Intro to Design and Prototyping

Lecture 1: Introduction to Prototyping

Lecture 2: Design Tools

Lecture 3: Prototyping Tools

Lecture 4: Animation Tools

Lecture 5: My Favorite Sketch Plugins (recorded live)

Instructors

Pablo Stanley
Product Designer

Rating Distribution

1 stars: 8 votes
2 stars: 27 votes
3 stars: 77 votes
4 stars: 302 votes
5 stars: 691 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu