Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
The User Experience of Motion (for Non-Designers)

The User Experience of Motion (for Non-Designers)

1h 52mBeginner2024-05-08

Authors

Tom Green

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.

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

Related courses

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal