The User Experience of Motion (for Non-Designers)

Learn how motion can transform and enhance digital experiences with expert Tom Green.

Introduction

• Have you ever watched how things move?
• What you should know

1. Explaining Motion

• Watching how things move
• How things move: Speed
• How things move: Distance
• How things move: Time
• How things move: Velocity
• How things move: Acceleration
• Motion in Figma
• Motion in After Effects

2. Easing Comes to Life

• Time and motion
• Ease in (acceleration and time)
• Ease out (deceleration and time)
• Easing in After Effects
• Using After Effects eases

3. Motion Paths

• Nothing moves in a straight line
• Faking it in Figma
• Motion paths in After Effects

4. Dimensionality

• The effect of distance and motion
• Dimensionality in Figma, part 1
• Dimensionality in Figma, part 2
• The Floating Action button in Figma
• The z-axis in After Effects
• Using the After Effects z-axis

5. Obscuration

• What is obscuration?
• Applying blurs in Figma
• Applying blurs in After Effects
• Apply motion blurs in After Effects

6. Parallax

• What is parallax?
• Create a parallax effect in Figma
• Create a parallax effect in After Effects

Conclusion

• Next steps