a brief introduction to animation, ui and the visual cortex
TRANSCRIPT
A Brief Introduction to
Animation, UI the Visual Cortex+
with @RachelNabors
surgery.
ibm.com/design/language/framework/interac=on/mo=on.shtml
cracked.com/ar=cle_15239_the-‐5-‐most-‐annoying-‐banner-‐ads-‐internet_p5.html
THE HUMAN MIND
Anima&on and
@rachelnabors
Animation is a visual representation of a rate of change over time.
=me
loca=o
n
Dropdown courtesy of Codrops, btw.
In-‐betweening
From anima2on, extrapola2ng between two key frames.
What just happened?
“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)
APPLIED TO USER INTERFACES
Anima&on
You use anima=on to indicate an element’s…
Direction Solidity Momentum
Stateful Transi=ons
Supplemental Anima=ons
Causal Effects
biology.allaboutbirds.org/features/fancymales/fancy-‐males
Decora=ve Anima=ons
IN PRACTICEAnima&on
Storyboards
• Causality
• Feedback
• Loca2on
• Progression
• Transi2on
• Physics
Does the anima=on reinforce at least two of these?
I thought it was cute the first time but by the 70th…
It’s annoying!
–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
WebAnimationWeekly.com
Always available at @RachelNabors or over a hot cup of tea!