Meaningful Motion UI

Free

Meaningful Motion UI

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

"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

Course Overview

Intro

What is Meaningful Motion UI?

3 mins
96.3 MB

The 4 types of user interface motion

7 mins
299 MB

Conversational Motion

Font files for sample project

145 KB

Sample Project (Step #1)

10.1 MB

Creating a basic animated prototype

8 mins
298 MB

What Google, Apple, and Salesforce can teach us about integrating motion into design systems

How to add motion to your design system

Functional Motion

Sample Project (Step #2)

10.1 MB

Animating user flows with custom motion transitions

9 mins
250 MB

Sample Project (Step #3)

10.2 MB

Creating a custom progress slider

9 mins
217 MB

Sample Project (Step #4)

10.2 MB

Using multi-step animations to create loading indicators

7 mins
213 MB

Sample Project (Step #5)

10.2 MB

Highlighting important actions with custom easing curves

6 mins
136 MB

Structural Motion

'Container animation' example file

3.14 KB

Sample Project (Step #6)

10.3 MB

Collapsing drawer navigation with advanced timing and grouping

9 mins
263 MB

Sample Project (Step #7)

10.3 MB

Using masking and motion for full-page transitions

8 mins
320 MB

Sample Project (Step #8)

10.3 MB

Adding depth with parallax animation

8 mins
315 MB

'Realism and momentum' example file

11.9 KB

Simulating reality by customizing animation properties

5 mins
117 MB

Emotional Motion

'Personality' example file

11.9 KB

Connecting with users through motion

7 mins
156 MB

Sample Project (FINAL)

10.4 MB

Next Steps

Growing as a user interface motion designer

4 mins
141 MB

Bonus!

Exporting animation from InVision Studio

5 mins
75.1 MB

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!

X Linked_in Youtube Website

Create more meaningful motion design

Stay up-to-date on user interface animation tips, techniques, and tactics!

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.