OMG. ANIMATED PROTOTYPES, YO!

Just a hands-on, no-BS-workshop where we learn how to create simple but powerful UI animation prototypes using Flinto exporting from Sketch.

Here's the curriculum.

IMPORTANT:You must already know the basics of Sketch to take this workshop.

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~

What we'll learn

The Basics

UI Animation Principles (the only theory stuff)

An introduction to Flinto

The Sketch Flinto Plugin

Exporting our first project.

A look at the UI

How to create simple transitions between artboards

Creating an Overlay Modal

Adding scrollable areas

Paged Scrolling

Advanced Stuff

Using Connected Layers

Simple Example

Tabbed Navigation

Cards UI with details

Using Behaviors

Creating a simple switch

Creating buttons withBehaviors

Creating Scroll-Based Animations with Behaviors

Practice

- Cards UI

- Mobile app with detail page and side-drawermenu

Previewing your prototype on your phone.

Export your prototype as a vide.

Bonus

Creating a Parallax effect using connected layers

Creating a Parallax effect using Behaviors

Adding Video and Sound to your Prototype

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~

What this is

Lets learn to do some simple but awesome UI animations using Sketch 3 and Flinto.Well do it in person, in a small group (12 max), one-on-one. The old-fashioned way.

After some basic animation principles presentation, we'll jump straight into creating our first simple prototype on Flinto. Then we'll do a couple of simple mobile app projects where we'll learn to add screen transitions, layer animations, controlling elements with continuous interactions like scrolling and dragging, and exporting our prototype so we can share it with others.How cool is that?

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~

Why Flinto?

Flinto is a great tool for creating high-fidelity prototypes in a super quick way. There are a ton of other prototyping tools out there (Principle, Origami, Framer, Protopie, Kite, etc) but I chose this tool because:

It connects with Sketch almost flawlessly

Supports custom vector shapes

Supports text

Flinto is the tool I mostly use at work for creating hi-fi prototypes.

It has the perfect balance of cool stuff you can do (granular level control) and reasonable learning curve.

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~

Who is it for

This workshop is for anyone interested in mobile app design, UI animation, and prototyping. We'll be focusing on using Sketch 3 and Flinto. People with beginner to intermediate levels are welcome.

Who is this NOT for

The workshop is not about coding. If you're looking to develop ready-to-implement code for theweb or mobile apps, then this is not for you. But, this workshop will teach you a great tool to create prototypes, and in so, getting a feel of an interaction or a flow early in the process, before investing in engineering time.

The workshop is NOT for people that don't know how to use Sketch. Please take the workshop for sketch beginners first or check out this free crash course on YouTubefirst.

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~

What you need

Bring your laptop! You'll need a MacBook or Windows running OS X virtual environment.

You need to haveSketch 46 or above. You can get a 30 day free trial ;)

Install Flinto (15 day trial available)

Install Flinto's Sketch Plugin.

Download all the resource files needed for the workshop (link will be sent on the day of the workshop.)

Feel free to BYOB (bring your own beverage).

Come hungry! We'll have cheese and jalapeo pizza (if you have a dietary restriction, please let me know.)

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~

Why?

Hi! I'm Pablo Stanley, designer and co-founder of Carbon Health. I started Sketch Together because I want to share the knowledge of using Sketch 3 and other tools for mobile app and web design. I want to give a new take on the old way of teaching; one on one, in a small but efficient workshop. Packing the important stuff in four intense hours. At the end we will have designed a simple mobile flow and put on a live prototype.

~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~^~

Why are you charging?

The workshops used to be free but now I'm requiring a small cover to fund expenses on my part putting together the content. If at the end of the workshop you feel you didn't learn some good stuff I'll refund you your money :)

I'm looking forward to creating awesome stuff with you!