1. A Brief Introduction to
Animation, UI
the Visual Cortex+
with
@RachelNabors

2. It’s true. RacheltheGreat.com

3. surgery.

5. RachelNabors.com/archive

6. ibm.com/design/language/framework/interac=on/mo=on.shtml

7. cracked.com/ar=cle_15239_the-­‐5-­‐most-­‐annoying-­‐banner-­‐ads-­‐internet_p5.html

8. THE HUMAN
MIND
Anima&on and

9. @rachelnabors
Animation is a
visual representation of a
rate of change over time.
=me
loca=on

11. Dropdown courtesy of Codrops, btw.

13. In-­‐betweening
From anima2on, extrapola2ng between two key frames.

15. What just
happened?

16. “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)

19. APPLIED TO
USER INTERFACES
Anima&on

23. You use anima=on to indicate an element’s…
Direction Solidity Momentum

24. Stateful Transi=ons

25. rachelnabors.com

26. fluevog.com

27. Supplemental Anima=ons

28. rachelnabors.com

29. magazine.good.is/ci=es

30. Causal Effects

31. rachelnabors.com

32. biology.allaboutbirds.org/features/fancymales/fancy-­‐males

33. Decora=ve Anima=ons

34. rachelnabors.com

35. polygon.com/a/xbox-­‐one-­‐review

36. IN PRACTICE
Anima&on

39. Storyboards

40. • Causality
• Feedback
• Loca2on
• Progression
• Transi2on
• Physics
Does the anima=on reinforce at least two of these?

41. I thought it was cute
the first time but by the 70th…
It’s annoying!

42. –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.”
deligh.ul

43. WebAnimationWeekly.com
Always available at @RachelNabors
or over a hot cup of tea!