The User Experience of Motion (for Non-Designers)
1h 52mBeginner2024-05-08
Authors

Tom Green
Teacher, Author, Professor
Course details
Learn the language of motion, and how it can enhance and transform digital user experiences with visceral, meaningful visual responses and actions with expert Tom Green. Tom shows you how principles like speed, velocity, and acceleration are applied to UX design using Figma and After Effects—but this course isn’t focused on using these applications. Rather, it’s aimed at increasing your awareness of how things move and how that movement is presented in UX design. Learn about the characteristics of motion and our responses to it, how time and motion interact, and how to define motion paths and velocity curves to precisely move objects in the digital realm. Plus, discover ways to create dimensionality and the feeling of depth and 3D space in 2D views, and learn about obscuration and the parallax effect.
Learning objectives
Learn about the emotional impact of motion.
Discover components of natural motion like distance, speed, velocity, and acceleration.
Learn principles of time and motion.
Learn about easing, motion paths, and directional behaviors.
Find out how to add depth and dimensionality.
Explore visual components of motion assets like obscuration and parallax effects.
See how to model all of this in Figma and After Effects.
Learning objectives
Learn about the emotional impact of motion.
Discover components of natural motion like distance, speed, velocity, and acceleration.
Learn principles of time and motion.
Learn about easing, motion paths, and directional behaviors.
Find out how to add depth and dimensionality.
Explore visual components of motion assets like obscuration and parallax effects.
See how to model all of this in Figma and After Effects.
Skills covered
FigmaMotion GraphicsUX DesignAfter EffectsUser ExperienceMotion Graphics and VFXPersonaAdobeWeb Development
Concepts
0. Introduction
- 01 - Have you ever watched how things move
- 02 - What you should know
1. Explaining Motion
- 03 - Watching how things move
- 04 - How things move - Speed
- 05 - How things move - Distance
- 06 - How things move - Time
- 07 - How things move - Velocity
- 08 - How things move - Acceleration
- 09 - Motion in Figma
- 10 - Motion in After Effects
2. Easing Comes to Life
- 11 - Time and motion
- 12 - Ease in (acceleration and time)
- 13 - Ease out (deceleration and time)
- 14 - Easing in After Effects
- 15 - Using After Effects eases
3. Motion Paths
- 16 - Nothing moves in a straight line
- 17 - Faking it in Figma
- 18 - Motion paths in After Effects
4. Dimensionality
- 19 - The effect of distance and motion
- 20 - Dimensionality in Figma, part 1
- 21 - Dimensionality in Figma, part 2
- 22 - The Floating Action button in Figma
- 23 - The z-axis in After Effects
- 24 - Using the After Effects z-axis
5. Obscuration
- 25 - What is obscuration
- 26 - Applying blurs in Figma
- 27 - Applying blurs in After Effects
- 28 - Apply motion blurs in After Effects
6. Parallax
- 29 - What is parallax
- 30 - Create a parallax effect in Figma
- 31 - Create a parallax effect in After Effects
Conclusion
- 32 - Next steps