Meaningful Motion UI by Bryan Zavestoski
Get access for free

Meaningful Motion UI

A free user interface animation course to grow your design skills, improve your product, and increase the bottom line
Get access for free

"My website and product are looking pretty good, but they just don't feel as dynamic as I had imagined"

That was me a handful of years ago... I had learned and understood the basics of user interface design, but still felt like whatever I created was missing something.

Since then, my product design and visual skills have improved, but it was my understanding of how a product is experienced over time that finally helped me feel like my designs were having the impact I had intended. Individual screens can solve individual problems, but creating a memorable product requires understanding how the system interact as a whole. 
Motion and animation allow us to bridge that gap. Dynamic interfaces can create a more memorable brand and connect with how users are feeling at specific points in the process. However, motion can also have real impacts on usability and business metrics like conversion rate and churn.
Nothing in the real world is static, so why should our digital designs be?

Meaningful Motion UI is the course that I wish I had when I started integrating motion to my user interfaces. As design and prototyping tools grow, it's become easier than ever to create dynamic and interesting motion design. There is so much great information on interface animation out there, but it can be hard to understand and interpret since it's spread across so many sources.

Meaningful Motion UI includes the concepts necessary to understand the impact motion can have as well as the practical tips and techniques to apply them.

At the end of the course, you will...

  • Create more dynamic, interesting, and useful products and websites!
  • Have a conceptual understanding of motion design... and know how to apply it
  • Understand the animation tools and features of InVision Studio
  • Export and share your motion design

Create a fully animated desktop application

We'll start with a fully designed app with no motion or animation. Because we're focused exclusively on motion and animation, it is good to know the basics of user interface design in general.

Each lesson will cover a specific type of motion and the features needed to create it. Learn not only the tools and techniques needed to create dynamic UI animation, but how to apply them to your own projects.

By the time your app is complete, it will include:

Parallax animation

Masking and Motion

Multiple loading states

Hover, click, and transition states

Advance timing, easing, and more!

Ready to transform your design from static and stationary into a meaningful motion masterpiece?

Start the course

What's included?

Video Icon 14 videos File Icon 13 files Text Icon 2 text files

Course Overview

Intro
What is Meaningful Motion UI?
3 mins
Get access
The 4 types of user interface motion
7 mins
Get access
Conversational Motion
Font files for sample project
145 KB
Get access
Sample Project (Step #1)
10.1 MB
Get access
Creating a basic animated prototype
8 mins
Get access
What Google, Apple, and Salesforce can teach us about integrating motion into design systems
Get access
How to add motion to your design system
Get access
Functional Motion
Sample Project (Step #2)
10.1 MB
Get access
Animating user flows with custom motion transitions
9 mins
Get access
Sample Project (Step #3)
10.2 MB
Get access
Creating a custom progress slider
9 mins
Get access
Sample Project (Step #4)
10.2 MB
Get access
Using multi-step animations to create loading indicators
7 mins
Get access
Sample Project (Step #5)
10.2 MB
Get access
Highlighting important actions with custom easing curves
6 mins
Get access
Structural Motion
'Container animation' example file
3.14 KB
Get access
Sample Project (Step #6)
10.3 MB
Get access
Collapsing drawer navigation with advanced timing and grouping
8 mins
Get access
Sample Project (Step #7)
10.3 MB
Get access
Using masking and motion for full-page transitions
8 mins
Get access
Sample Project (Step #8)
10.3 MB
Get access
Adding depth with parallax animation
8 mins
Get access
'Realism and momentum' example file
11.9 KB
Get access
Simulating reality by customizing animation properties
5 mins
Get access
Emotional Motion
'Personality' example file
11.9 KB
Get access
Connecting with users through motion
7 mins
Get access
Sample Project (FINAL)
10.4 MB
Get access
Next Steps
Growing as a user interface motion designer
4 mins
Get access
Bonus!
Exporting animation from InVision Studio
5 mins
Get access

What students have said...

Well designed course!
Surbhi
This course was super simple and helpful. Exactly what you need to know.
Katie
Short, simple, clear and useful.
RC

What clients have said...

You have a solid technical understanding on how UX works, and the UI was just a bonus. ...and the logo is kick ass!
Daniel
...projects have led to new trial signups, more and better sales conversations, and a partnership with a Fortune 500 company.
Matt
Our redesign will attract more signups and give new users a better understanding of the product.
Talan

Who's teaching this thing, anyway?

Hi, I'm Bryan! 👋 I've been a user interface and product designer for about 6 years now. Motion has been a big part of both my personal and client projects, including AI motion for a top 10 asset management firm.

I've previously taught design to 100s of students on Skillshare (don't worry, the content and production quality of this course is a big step up from that one).

If I'm not creating digital products, I'm probably wandering around the wilderness or climbing some rocks.

Now go create more meaningful motion!

FAQ

How long is the course?

Meaningful Motion UI is approximately 1 hour and a half of video content.

Each video is edited to provide you with actionable steps and valuable information, so there is very little fluff or downtime. It may take longer than a few hours to go through all the project files and understand each step. 

To fully understand and execute the concepts and techniques covered, I recommend spending a handful of hours over the course of a few weeks. It is best to apply what you learn to both the sample project and your own projects.

What app does the course use to create interface animations?

Meaningful Motion UI uses InVision Studio.

Studio allows you to integrate motion and animation into your existing design process. Sketch import allows you to use the designs you're already using, and the learning curve is much faster than tools like Framer or After Effects.

Motion design is no longer just an 'add-on'. 

I'm new to Studio, motion design, etc. Is this course right for me?

Yes! Meaningful Motion UI doesn't require any existing motion, animation, or InVision Studio knowledge.

It covers both the basic and advanced concepts of motion design and all animation-related Studio features. Studio's basic design tools are extremely similar to Sketch, Figma, or Photoshop, so you don't need a deep understand of Studio for this course.

However, this is not an introduction to UI design or Studio. Because we start with a full designed app to be animated, the course is best for folks with a basic understanding for design. You will still learn a lot about motion and animation, but there are better courses that cover the basics of InVision Studio and user interface design.

Will this course teach me how to code and implement motion design?

Unfortunately not. Coding dynamic applications (whether web or native) is a huge undertaking and worthy of it's own complete course.

There are already some great courses on web and SVG animation. Meaningful Motion UI will be focused on the creative side of UI animation.

Is there a money-back guarantee?

It's free, so that would be kind of hard! The main investment you will make in this course is time.

Unfortunately, I can't refund the time you invest, but I am happy to help you with any questions or concerns along the way.