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

2.
It’s true. RacheltheGreat.com

3.
surgery.

4.
RachelNabors.com/archive

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

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

7.
THE HUMAN
MIND
Anima&on and

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

9.
Dropdown courtesy of Codrops, btw.

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

11.
What just
happened?

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

13.
APPLIED TO
USER INTERFACES
Anima&on

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

15.
Stateful Transi=ons

16.
rachelnabors.com

17.
fluevog.com

18.
Supplemental Anima=ons

19.
rachelnabors.com

20.
magazine.good.is/ci=es

21.
Causal Effects

22.
rachelnabors.com

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

24.
Decora=ve Anima=ons

25.
rachelnabors.com

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

27.
IN PRACTICE
Anima&on

28.
Storyboards

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

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

31.
–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

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