UI Prototyping and Animation

Learn the principles, tools, and skills to bring your designs to life. Get hands-on experience creating beautiful, seamless, and dynamic prototypes and animations.
1 Upcoming Sessions

Learn to design beautiful interactive prototypes that look and feel like the real thing.

Modern apps and websites are dynamic. They’re packed with animations, micro-interactions, and transitions to create a smooth, seamless experience. As designers, we can’t create experiences like this if we’re limited to static screens and basic prototyping tools. In this full day workshop, we’ll learn the principles, tools, and skills to bring your designs to life. Get hands-on experience creating beautiful, seamless, and dynamic prototypes that are sure to stand out.

You'll Learn

The fundamentals of UI animation and prototyping, and best practices for designing dynamic prototypes.
Key concepts like timing, easing, layout, sequencing, and more.
How to outline your prototypes, and an efficient start-to-finish workflow.
How to use Figma, Protoio, and other industry-standard prototyping tools.

We'll Create

An interactive prototype with animations, micro-interactions, and other dynamic elements
A case study documenting your process and showing off your new animation skills

Who is this for?

Designers-in-Training
Who want to level up their UI, animation, and prototyping skills
UX/UI Beginners
who want to get hands-on experience with the fundamentals of UI animation

Get experience with industry standard tools and processes

Use the same tools professional designers use every day to design, collaborate, and build experiences that solve problems for users and businesses.

Figma

The essential program for UX designers to create, collaborate, and design.

Figjam

A place to collaborate, share, collect feedback, and outline your next great idea.

Pencil & Paper

The most important tools for any designer.

Proto.io

Bring your idea to life in no time. An industry standard prototyping solution for designers.

Get Experience with in-demand UX Skills

Web Design
Web &...
Voice Design
Visual De...
UX Writing
UX Resear...
UX Research
UX Portfolio

Step-by-Step Workshop Agenda

Complete an awesome project with hands-on guidance from an expert instructor

Welcome!
We'll start by going over the workshop agenda, and setting up some important tools and links for our session
UI Animation Basics
We'll discuss some of the key concepts, vocabulary, and best practices for designing micro-interactions and animations
Interaction & Animations Best Practices
How fast should your pop up...pop up? What transition should you use from screen to screen? We'll cover all of this and more to help you design impactful microinteractions.
Outlining your Prototype
We'll walk through a simple process to plan and outline your prototype. Learn how to plan the details of your interactions, and set yourself up for fast, efficient prototyping.
Lunch Break!
Chill out, grab some water, and stretch before we jump back into the workshop!
Bring your prototype to life in Figma & Proto.io
We'll take our outlined prototypes and bring them to life using two industry standard design and prototyping tools. We'll go step-by-step through key aspects of the tools and workflow, and build some awesome prototypes in the process.
Fine Tuning Our Prototypes
Once we've got the main flow of our prototype down, we'll test and adjust the details of the experience
Choose your final challenge
You'll choose one of 3 prototyping challenges to work on individually, and put your new skills into action
Feedback and Working Session
Get personalized feedback and help as you design the next phase of your prototype
Present Like a Pro
In a quick presentation, you'll walk through your prototype, and learn how to effectively articulate and communicate your design decisions
Next Steps + Q&A
Learn how to keep up the momentum, show off your work, and continue to improve your prototyping skills
Show

Taught by an Expert Instructor

Joe Formica

Founder, Bitesize UX

Joe has taught UX Design at General Assembly in New York for seven years as a Distinguished Faculty Member, and has created and taught Entrepreneurship courses at Fordham University Business School. Through these roles, he has worked with thousands of designers-in-training to help them take the next steps in their career.

Reviews and Compliments

Here's what other designers had to say about this workshop

"Actual UI experience!"
4.8/5
"I'm obsessed with the project that I made! I've always thrived at the logical side of UX, but this workshop made me so much more comfortable as a designer in UI"
Diane
Designer-in-Training
"Easy, helpful, & straight forward"
4.8/5
"Straightforward UI design. I love Joe's no-nonsense approach to teaching core UI concepts."
Chris
UX Beginner
"Such a relief"
4.8/5
"I've never really focused on UI as I got started in UX...but this workshop was perfect for filling that gap!"
Alexis
Bootcamp Grad
Awesome Project!
0 designers
Perfectly Paced
0 designers
Easy to Follow
0 designers
(441)
4.7/5
$99
1 Upcoming Sessions
1 Upcoming Sessions
(441)
4.7/5

$99

Join an Upcoming Live Session

Fri, Jan 5th
10:00 AM EST
Can’t Join Live?

Sign up anyway, and get the on-demand recording and resources sent to you!