Since the widespread adoption of CSS animations and transitions, animation has started creeping back into web design. Loading screens and “flashy” intros are back, as well as subtle UI interactions that invisibly improve the user’s experience. Rachel Nabors explains the six components of motion design, how you can apply them in your own projects, and when to start planning animation in your process.
20. “By offloading interpretation of changes to
the perceptual system, animation allows the
user to continue thinking about the task
domain, with no need to shift contexts to the
interface domain. By eliminating sudden
visual changes, animation lessens the chance
that the user is surprised.”
Scott E. Hudson and John T. Stasko (1993)
29. It’s Alive! Animate Mo;on Captures A=en;on (2010)
“(T)hese speeded responses appeared to be due to
the perceived animacy of the objects… We conclude
that animate motion does indeed capture visual
attention.”
62. • Stateful Transi2ons when a user changes tasks
• Supplemental Anima2ons when new informa;on
appears
• Causal Effects when a user interacts with a page
Spo]ng Keys in your product
63. • Causality
• Feedback
• Loca;on
• Progression
• Transi;on
• Physics
Does the anima;on reinforce at least two of these?
65. and @RachelNabors
How to Not Set Everything on Fire
with Motion &
Animation
and @RachelNabors
How to Not Set Everything on Fire
66. –a Shaker saying
“Don’t make something unless
it is both necessary and useful; but if it is
both necessary and useful, don’t hesitate to
make it beautiful.”
deligh1ul