One of my favorite activities at work is browsing cool and creative illustrations and animations on Dribbble and Pinterest to look for design inspirations. I also like to explore and download apps that are not only functional but engaging. My gem is Headspace, a meditation app that introduces some abstract mindsets and meditation techniques with everyday metaphors and friendly characters. In fact, there is a rule of thumb behind its intriguing animations, including behavior, easing, duration, and sequencing.
It made me curious how, when, and where to use animations to create better software experience. As I'm working on designing a new traveling app, it is a great opportunity for me to delve into the wonders of animation and to build hands-on practices.
Motion's Purpose & Principles
I first looked into Google's Material Design Guideline on Motion and Invision's Design Better Animation Handbook to understand the fundamentals. The purpose of animation is to bridge the gap between reality and virtual world, so the movements often mimic natural phenomena. For example, easing is when an object pushed by force and pulled by gravity moves fast in the beginning, slows down in the middle, and speeds up in the end.
Google puts motions into 3 categories (similar to Invision's definitions):
1. Informative (communicate change and context): such as page transition, scrolling, loading
2. Focused (catch the eyes): such as hover and pressed button, selected items in thumbnail or list modes
3. Expressive (capture emotions): such as onboarding animation, characters animation
My Goals
My goal is to create UI animations on After Effect, so I can enliven my DailyUI practices as well as my developing traveling app. I will learn both the bone (UX motions for usability) and the skin (UI motions for engagement) by following two free online courses:
"UI Animation Fast Start" by UX in Motion
This course is created by Issara Willenskomer, an enthusiastic designer and educator who has 15 years of experience in motion and interaction design. Issara also compiles 12 principles of motion designs as UX in Motion Manifesto, explaining spatial and hierarchy relationships among objects. It will be the checklist for my design practice.
"Fundamentals course on After Effect" by Motion Design School
This course walks us through basics of After Effect, such as the interface, hot keys, keyframes, and easing setting. The end result is a delightful and playful animation with vivid characters and rich background.
To accurately keep track of my learning and avoid distractions, I plan to break down each course unit into Sprints using the Pomodoro technique. Later I will learn to render AE files to Lottie (designed by Airbnb) through Bodymovin plugin, so I can hand the animation file to my fellow engineer to directly build the traveling app. I will also export animation to gif for social sharing and gathering feedback.
AE Basics
Interface
The first glance at the AE interface might be overwhelming, but both courses address bare necessities by focusing on the main panels and key features while hiding trivial matters which will probably never be used.
Keyframe
Just like notes in music compositions, keyframes in AE compositions are "markers in time that hold values" as explained precisely by Issara. An animation is created when we set two keyframes by changing values of properties.
Hot keys
Knowing hot keys saves a lot of time in workflow. Here are some useful ones I learned so far:
Keyframes properties
A — Anchor Point
P — Position
S — Scale
R — Rotation
T — Opacity (Transparency)
U — Show properties on selected layer
Timeline settings
B or N — Set Beginning and End of working timeline
Fn+F9 — Easy Ease (make default easing)
My Tinkering
Besides in-progress lessons from the above courses, I tinkered on a small animation last week using P/S/R/T effects. Here I proudly present this Halloween card animation.
My next task is a subscribe button animation for DailyUI#26. Happy tinkering, and stay tuned!
Comments