Home ∣ Design Process ∣ Fundamentals ∣ Guidelines ∣ Accessibility ∣ Methods ∣ Research Design Systems ∣ AI ∣ Software Dev ∣ Low-Code Dev ∣ Soft Skills ∣ Career ∣ Tools ∣ Links

<aside> 🗂️ Pages

Motion A11y

Tools

Great Examples

</aside>

Motion

• The broadest term. It refers to any visual change over time in a user interface. This could be a simple fade-in of an element, a button that changes color on hover, or a more complex animation.
• Focuses on the user experience (UX). Motion is used to guide the user, provide feedback on actions, and make the interface feel more intuitive and responsive.

https://developer.apple.com/videos/play/wwdc2018/803

Animation

• A subset of motion. It specifically refers to the creation of movement frame-by-frame or with animation tools. This can be used to create anything from simple transitions to complex character animations.
• Can be for both UX and aesthetics. Animation can be used to improve usability, but it can also be used for purely decorative purposes.

https://www.ibm.com/design/language/animation/overview/

https://medium.com/@sikirus81/how-too-many-animations-ruin-user-experience-a2eb7040c1a8

https://dribbble.com/stories/2023/05/30/why-use-motion-in-your-designs

https://m3.material.io/styles/motion/transitions/transition-patterns

3D

• Refers to the creation of objects in a three-dimensional space. This can be used to create realistic or stylized visuals.