“GIFs on Dribbble get more likes”
“What?”
“It’s true”

This was a conversation I had with a designer friend of mine. We were discussing tools and workflows, and when it came to motion — he was a strong proponent of After Effects. Not only did it help add “oomph” to the designs but it brought in way more likes. Exploding heart buttons, hamburger to cross transitions, fancy page transitions etc. It seemed like the online community was just waiting for you to create animated GIFs that they could gloss over and heap praises on or criticise it for being too gratuitous.

Motion in product design however goes a lot farther than delightful interactions. It potentially has the ability to make or break a user experience. Research and usability tests often show that motion affects perception of speed and responsiveness. Apps that can successfully implement motion are perceived to be faster, more responsive and more polished. This can be a serious competitive advantage and can act as a differentiator in a crowded space.

From Google’s Material Design guidelines,

Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s light, heavy, flexible, rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.
Motion in material design should embrace the familiarity and real-world behavior of physical objects, without sacrificing elegance, simplicity, and beauty.

With such a heavy emphasis on motion, this introduced a new challenge for Android designers and developers. Most developers had no idea how to implement the animation on display as the frameworks for animation were still in nascent stages. Designers wanted to work with motion, but had limited experience with prototyping motion and conveying the animations to developers. There was a lack of common language and terminology for designers and developers to communicate their ideas.

“Make this fade in from the right”
“This icon should slightly become big and small while tapping”
“When the app opens, this should zoom in and transform into this other element”

Purpose of This Book

My own experiments with motion in app design started with a whole lot of prototyping. This book is meant as a guide for designers to get comfortable working with motion and to start thinking about it during the early stages of their projects. My hypothesis is that the more comfortable you get with prototyping motion, the more success you will have with it.

This book is roughly divided into four parts.

The first talks about motion in app design today. Motion’s place in design is way more than just adding delight. It can be to bring focus and attention to elements, to convey meaning and enhance user experience and a lot more. We’ll go through a bunch of examples from apps we use everyday to demonstrate how motion is essential to their success. With these examples as a backdrop, we will then attempt to explore what are the different kinds of motion design you can implement in your projects based on their purpose. From fun and whimsy to much more.

The second part will deal with integrating motion in your design process. You may have some level of experience experimenting with motion in the past with varying levels of success. This section will talk about practical steps you should follow to give more importance to motion in your design process. The major chunk of this section will talk about the broader notion of prototyping as an essential skill and how motion forms a part of it. I’ll talk about how prototyping is a great gateway drug to get started with motion in your apps, how you should pick prototyping tools for the job. This section will end with a bit about the limitations of prototyping, knowing how high fidelity you should go and sticking to the goal with each iterative prototype.

The third part is a practical guide to motion and prototyping in Principle for Mac. Principle is a prototyping and motion design tool that you can use to implement the theory you’ve learned so far. Principle’s core strength is in its simplicity and time to prototype. By cutting down the time it takes to animate and prototype, you’re more likely to experiment with lots of ideas more often and implement it in the earlier stages of your workflow. While Principle is pretty easy to pick up by itself, this section is designed as a handbook to teach you about Principle’s capabilities and features. You can either read this section end to end or use it as a reference you can come back to and visit if you run into a problem while trying it out.

The fourth section will include walkthroughs on implementing interactions from popular apps in Principle. We’ll cover broad sections with specific examples: page transitions, onboarding flows with text input, driver transitions and microinteractions. These are designed like step by step tutorials that you can read and work with at your own pace.

The final section is a guide on communicating with developers and the rest of your team to effectively translate design to code.

This book is designed as a prototype that I want to improve with feedback from early users. I will be adding in content based on feedback and your progress through the course, so feel free to reach out to me anytime.