The Designer's Guide to Motion in App Design

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.