Consider me one of the lucky ones. I discovered my passion for motion early on in my career. Anytime I begin designing for interactive experiences, mobile apps, or websites, I always challenge myself to include some kind of animation.
I credit some of the talented professors I had in school with helping lead me to my design passions. So I was really excited when I was asked to lead UI motion design lectures and workshops at the University of Washington. Here is a very high level view of what I covered:
History of UI and motion
When was the first time motion was used in an interface? Bet you didn’t think it was in the late 1960s. During a (brief) history of UI and motion, a few examples I reference are Star Trek, Japanese anime, tamagachis, AOL (in You’ve Got Mail), Minority Report, and Oblivion.
Why should we use motion?
In this section I discuss why motion is important and how it should be used to enhance UX. Not only should motion give your app personality to match your brand, more importantly it should help educate users, direct users attention, notify, give feedback, and provide context.
Now that you have a better understanding of why it’s important to use motion, what kinds of animation can you use in your ui?
Motion design is a relatively new practice, so there aren’t many guidelines on how to use it effectively. Luckily, Issara Willenskomer has been working hard to craft 12 principles of UX in motion [here]. I examine each in great detail and present examples of each of these principles:
- Easing
- Offset & delay
- Parenting
- Transformation
- Value Change
- Masking
- Overlay
- Cloning
- Parallax
- Obscuration
- Dimensionality
- Dolly & Zoom
Here is a good example using a few of these principles:
Tips & Tricks
I wrap up the lecture by:
- Reviewing real client projects, explain my decision-making process of concepting motion while building wireframes.
- Analyze my animation files (usually in After Effects) to talk about keyframes, timing, easing, and asset building from design comps to final video.
- Review examples of motion guidelines made by Google Material Design [here] and IBM [here].
- Critique student UI and motion work.
- Examine good and bad motion examples.
- Talk about why it’s important to watch and collect many sources of inspiration.
#DesignerChat: Question #3 from @AliBrubaker 🚀 https://t.co/fKQcchutOw
— InVision (@InVisionApp) January 24, 2019
Starting with a low fidelity allows you to try different things without falling in love with any solution—you’re just focused on the problem. When jumping straight to pixels you can lose some of that magic.
Freehand is a great way for early ideation! @pablostanley #DesignerChat— InVision (@InVisionApp) January 24, 2019
Please reach out if you are interested in talking in more detail about these lectures.