Meaningful Motion UI

A free course on user interface animation and motion design

0 followers

A free course on user interface animation and motion design

0 followers

Meaningful Motion UI is a video course covering basic and advanced techniques for adding motion to your products. Using InVision Studio, we start with a completely static design and add motion, animation, and interaction. Learn both the fundamental principles of motion design and the tools necessary to apply them.

Launch tags:Design Tools•User Experience•Education

Launch Team

Wispr Flow: Dictation That Works Everywhere — Stop typing. Start speaking. 4x faster.

Stop typing. Start speaking. 4x faster.

Promoted

Maker

Hi Product Hunt! I'm Bryan, the creator of Meaningful Motion UI. 👋 Meaningful Motion UI is basically what I wish I had when I started integrating motion and animation into my projects. Over the past few years, more of my own projects have had some element of motion in them (from side projects to small startup clients to some of the largest financial services companies out there). A lot of that has been learned completely from scratch and from a huge variety of sources. The course was made for anyone who wants to improve their design skills or make their products more dynamic and usable. Motion is becoming a huge differentiator in digital products, so I wanted to help folks execute on that. Just a bit more about the course: 🖥14 videos and 1.5 hrs of content ⛔️No unnecessary, irrelevant content... it's all edited out! 📱Create a fully animated and interactive prototype 👤Made specifically for designers, developers, and Product Hunters like you! It covers parallax, loading states, page transitions, and there's even a few bonuses about using motion in design systems. It's not the first UI course I've made, but it is the first one I'm really excited about! ...and if you're not interested in handing over your email, the whole course (minus a couple articles and 1 video) is on YouTube ▶️ too.

Report

7yr ago

Krit

I know @austinwprice has been wanting to add more motion and interaction to our design work, so just sent this to him! Looks like a great course. How do you personally find the line between just enough and too much animation in a product design? We've definitely gone overboard in the past and it can be distracting.

Report

7yr ago

Maker

@andrewaskins @austinwprice That's definitely a big challenge, and I've gone overboard with animation too! There's actually one point in the course where I basically say, "This is too much motion... Don't do this in your product, but we'll do it here to learn the tools." The main things I think about are: • How often will this animation be experienced? If it's a common interaction, it should be way more subtle than something that actually happens occasionally. • What's the user's mindset? If they just had a big win, it's totally appropriate to celebrate that! If they're deep in a complex process or have to fix a critical error, the motion should be handled more carefully. • Why am I creating motion here in the first place? If it's purely for brand or personality, there should be a really good justification for why it's appropriate in that particular place (i.e. these will be more relevant with marketing than inside a product). If it's helping someone keep context within the app or direct them to an important action, it's a lot easier to justify because it has actual usability benefits. • ...and all of that doesn't even get into: how many resources are we dedicating to this, how scaleable is it, does it apply elsewhere, does motion here make the lack of motion over there more confusing, etc. 😀

Report

7yr ago