How I learned—and mastered—the fundamentals of motion design
Note: Show us how far you’ve come in your motion design journey! Scroll to the bottom of this post for a chance to be highlighted on our Twitter—AND win InVision swag.
Earlier this year, my day job consisted of solving intricate user experiences with outside-the-box thinking while remaining inside the box. Though challenging, I enjoyed solving these types of user experience problems.
It wasn’t until I entered into Dann Petty’s SPACED challenge that I realized what I had been missing.
My submission didn’t win the contest, but what it set into motion was a deep exploration into animating user interfaces—which is what ultimately what pulled me towards InVision Studio.
The learning process
I eagerly put my name on the list for InVision Studio Early Access, and I waited. The moment I received the email telling me I could download this new program, I actually cheered a little. There was this giddy part of me that couldn’t wait to try more animation in a brand new program designed specifically for user interface animation, instead of using Adobe After Effects as I had done for my SPACED challenge entry.
Weekly UI animation challenge
I’ll admit, I felt like I had no idea how to animate when I first started using InVision Studio. I remembered seeing other designers on Twitter completing these daily or weekly challenges in which they pushed themselves to refine a certain skill. The idea of another challenge was the perfect motivator for me, so I started my Weekly UI Animation Challenge.
My first animation was a simple scrolling interaction where I showed an image gallery scroll. I was impressed that I could interact with my animation, instead of just watching it on a video.
As the challenge continued, I learned more about transitions and how to connect layers from one artboard to the next.
The animation I made was fast. Much too fast. But at the time I couldn’t fully see it, and it took a bit to figure out how long to set my transition durations inside of Studio.
I had been sharing my explorations on Dribbble, Behance, and Twitter, both to get my work in front of people and in hopes of getting feedback from the community. I remember someone on Twitter pointed out that I should slow down the speed and ease this screen transition in and out more. I thanked them, then admitted that I had been trying to figure out the right speed and that I hoped to be able to someday get it just right. Here’s a side-by-side of how it was animated when I first designed it, vs. my updates with improved easing.
I learned the value of these self-directed challenges since they generated consistency, provided practice, and allowed a way to gather feedback.
I kept at it, and InVision noticed my efforts. I’m an InVisioner now myself, and I have continued to learn as much as I can while creating animations.
One of my more recent explorations highlights how much I have learned about organic easing, demonstrating hierarchy, and simplifying motion.
From all of these explorations I learned three key fundamentals of user interface animations, and how to enhance the user experience by using motion.
Three animation fundamentals
1. Creating natural movement and organic easing
Using a slight delay for movement of moving elements can create a natural easing that makes the interface feel more organic.
2. Demonstrating hierarchy to make it easier for the user to digest
Adding movement to a specific element can help to alert the user to take action on that first. This is useful in an interface that might have competing content, such as colorful imagery or blocks of text.
3. Simplifying motion
It can be exciting to connect as many elements as possible from one screen to the next, but by doing so can overload the user.
Too many pieces moving at once can hurt the flow of the transition, and instead of aiding the users understanding of how the two screens connect, it can cause confusion.
Staying connected to the basics
I still try to bring myself back to these fundamentals as I create animations, and like most things, it’s a constant process of learning more each time I create something new.
What’s something that you have learned along the way about animating user interfaces that’s helped you? Tweet us at @inVisionApp!
Want to learn more about motion design?