It all started with Dann Petty’s SPACED challenge in February 2018. At the time I was working as a digital designer, where most of the day-to-day work at my job focused on solving complex user experience problems while working with existing brand standards.
When Dann presented the challenge to create an app about space travel, my creative muscles twitched. I dove into explorations and started to create concept after concept. Someone animated their entry and shared it on Twitter, and I thought, well I have to animate mine now too. I hopped over to After Effects and started to animate the designs that I had created in Adobe XD.
Related: This is how you’re going to become a UX designer
The entire process was invigorating, and I was pumped that other people liked the explorations I was sharing online. I wasn’t sure how it would go when I started. I didn’t know if I’d just end up embarrassing myself by sharing my work so publicly, especially when stacked up against designers from all over the world.
The whole experience was incredible and introduced me to the broader design community.
The learning process
InVision Studio
My submission didn’t win the contest, but what it set into motion was a deep exploration into animating user interfaces. Ultimately this exploration is what pulled me towards InVision Studio. I wanted to keep designing side projects outside of my job. I wanted to get better at animating, but didn’t like how time consuming using After Effects was. Then I saw something that caught my eye, InVision, which I had used before for prototyping, was planning to release a new design tool that had animation included.
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 started to make simple design concepts and kept sharing them on Dribbble, Behance and Twitter to see what people thought and to learn how to improve. I got feedback about making the animations faster or slower. People told me when it was too choppy or simple. I learned a great deal by putting my work out in front of people.
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.
Related: I’ve changed careers 4 times. Here’s what I’ve learned.
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.
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. Today, I’m an InVisioner, where I’ve been continuing to explore user interface animations and product work. I’ve learned, even more so, that sharing your designs can make a big impact and can help to improve skills. I have continued to learn as much as a 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.
Related: The importance of good animation in UX
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.
Want to learn more about motion design?
