The Designer's Guide to Motion in App Design

Add motion to your design process through prototyping. First prototype in 30 minutes.

Learn the important role of motion in product design today and a prototyping based design process that you can adopt. With tutorials and video walkthroughs for Principle for Mac — speed up your prototyping and motion design process and successfully implement your ideas.

View contentsRead more

If you’re a digital product designer, you already know how important of a role motion plays in design.

It can create moments of delight in apps and increase engagement.

It can emphasise your brand and create a cohesive experience that keeps users coming back.

It can be the differentiator between a ‘smooth’ and an average experience.

You’ve probably tried motion and prototyping tools before with some varying amounts of success. Maybe it’s creating clickable prototypes in Invision and Marvel. Or microinteractions in Adobe After Effects.

But to get to a point where you can experiment extensively with motion, and integrate it deeply into your design process is challenging. The reason — design tools haven’t caught up yet.

Creating animations is Adobe After Effects (AE) is an arduous task. You’ve first gotta understand how the software works, try basic animations to get comfortable to the features. Only then can you think about trying out concepts you want to implement.

Motion takes time. A non trivial amount of time.

If it takes you an hour to implement an animation you have in mind, you’re less likely to try out 10 different concepts.

You’d probably think about it a bit, and once you’re sure of what sounds good, you can create it in AE or any tool of your choice and begin making tweaks to it.

There’s something fundamentally wrong with this approach. Let’s assume this was flipped around.

Say it takes you 10 minutes to create an animation concept you were tinkering with in your head. You try it out and you immediately know whether it’s going to work or not. You tweak it, try a couple more concepts and arrive at something you like within the next hour. You show it to your client and team, and get their feedback. A couple tweaks more and you’re ready to hand it off to the developers to implement it.

What sounds like a better solution?

To me personally, definitely the second. I wouldn’t want to spend a couple hours creating something in AE only to be told to explore more concepts. Another couple hours. What’s more is that AE produces video concepts. Not clickable prototypes that you can play with on your phone, give out to users and test out.

The easier it is to prototype motion, the more likely you are to experiment with it.

The more you experiment with motion, the better you get at using motion in your apps successfully.

The better you get at motion, the earlier you can start thinking about it in your design process, drastically improving your designs from the very beginning.

Thinking about app designs in terms of a sequence of screens isn’t enough anymore. At 60fps there's 58 frames you need to design between Mock A and Mock B.

With this book/course, you will learn to re-think your design process to involve a high degree of prototyping.

Prototyping is one of the best ways to start thinking about motion in app design as it forces you to think in terms of an overall product than just a sequence of screens and lets you explore screen transitions, microinteractions and ways to enhance the experience using motion.

What you'll learn

  1. You'll learn the in and outs of Principle for Mac and learn to implement your motion concepts and create interactive, clickable, high-fidelity prototypes.

  2. Integrate motion in your workflow with prototyping for validating ideas and pitching to other stakeholders without touching a line of code.

  3. Create screen transitions, full flows and microinteractions, and export them as GIFs or direct prototypes on your iPhone.

Abhinav Chhikara
Abhinav Chhikara

Hi there! I'm Abhinav, a UI/UX designer and co-founder of Lisn. I'm a huge proponent of motion and prototyping based design and use it everyday at Lisn, and previously with and other early stage startups I've worked with.

I'm excited to have this opportunity to teach designers how to implement motion and improve their craft and quality of products. I look forward to interacting with you!

Web Twitter Dribbble

Frequently Asked Questions

What is Principle for Mac?
Principle is a motion and prototyping tool that lets you create animated and interactive user interface designs. Check out or the sample lesson of this book above!
Who is this course for?
This guide was written for digital product and UI/UX designers to learn how to implement motion in their apps. If you've designed apps and websites before and are looking to learn motion with Principle for Mac, it's for you!
Is this book available in PDF and Kindle formats?
Unfortunately, no. Being a book on motion design, it includes tons of video, GIFs, images and downloadable content which wouldn't be as great in other formats. Also, expect a lot of updates and improvements to this book, made possible by its format!
How do I access the course?
After purchasing, you have unlimited, life-time access to this course for as long as you like - across any and all devices you own.
What do I need to implement the material in the course?
The practical part of this book works with Principle for Mac, which is available only on... you guessed it, Macs. So you're definitely going to need a Mac to be able to implement what you learn.
How do I buy multiple copies for my institution/organization?
😌 Get in touch with me, [email protected] to know more!

Get started now!