Upload
rachel-nabors
View
24.585
Download
0
Embed Size (px)
Citation preview
with @RachelNaborswith @RachelNabors
Communicating Animation
devToolsChallenger.com
lightningdesignsystem
.com
/design/
motion
Sleek & Professional
Carefree and Casual
Challenges that prevent consistent anima2ons
• Communica2on issues make it hard for teams to understand and tackle anima3ons
• Inadequate deliverables prevent developers from moving forward quickly
• Lack of respect and deference to one another leads to lopsided implementa3ons that favor or disregard different voices
Developers need…
Granular
Components
Instruc3onal
Maintainability
Thema3c
Theory
Educa3onal
Guidance
Designers want…
Developers need…
Granular
Components
Instruc3onal
Maintainability
Thema3c
Theory
Educa3onal
Guidance
Designers want…How they compliment each other…
Documenta2on What's there and why
Defaults Building blocks and rules for spinning up new things
Unity An overlying choreography with language
Guidance Empower future contributors to make decisions
Deliverables
Easing
Accelerationaka ease-inDecelerationaka ease-outBounce
glossier.com
rachelnabors.com
easings.net
Fire
Fox
Dev
elop
er E
di.o
n or
Chr
ome
You will need curves for…
• Accelera2on ease-out
• Decelera2on ease-in
• Something subtle for fades and color changes
• A bounce (op3onal)
Where to use those easings…
• Decelerate (ease-out) human interac3ons
• Accelerate (ease-in) system-ini3ated anima3ons
• Fades and color changes look best with more linear, subtle curves
• Bounces increase animacy and add an air of “fun.”
Timing
lightningdesignsystem
.com
/resources/tokens/#category-time
modularscale.com
Timing Limita2ons
• Stay inside 70 to 700 milliseconds
• 200-300ms is a sweet spot
• Shorter dura2ons for fades and color changes
• Longer dura2ons for large movements
• Use milliseconds instead of seconds to prevent decimal hell fun 3mes
Properties
What to animate…
• opacity
• transform
“The art challenges the technology, and the technology inspires the
art.” –John Lasseter, Pixar
Creating an Animation Language
lightningdesignsystem
.com
/design/
motion
Keynote’s animation vocabulary
Notification/Dismissalslidefadepop
Communicating Visually
Storyboards
Stor
yboa
rd fo
r Fer
dina
nd th
e Bu
ll ta
ken
at th
e
Disn
ey Fa
mily
Hom
e M
useu
m
Storyboard Tools
• Go old school with post-its, index cards, huge sheets of paper
• My precious storyboard template goo.gl/PyBXI7
• boords.com
Animatics
“An animation is worth a thousand meetings.”
–@RachelNabors
Spac
e Un
icorn
ani
ma.
c use
d w
ith p
erm
issio
n of
Bria
nne
Dro
uhar
d ak
a @
pota
tofa
rmgi
rl
load
ing
spin
ner i
dea
from
lunc
h
Animatics are NOT deliverables.
Anima2c Tools
• Keynote
• Adobe ARerEffects
• Principle app
• Stop Mo3on app
Prototypes
“What developer doesn’t want a good copy-
paste?”
–Stephanie Rewis, Salesforce
invisionapp.com
Prototyping Tools
• Na2ve-oriented Principle, Pixate
• Web-oriented Invision, UX Pin
• Code required Founda3on, Framer.js
Prioritizing Animation
the beau/fully shaded penny phenomenon
Collabora2ons
• On new projects anima3on issues and ideas must be addressed during feature development.
• On exis2ng projects the feature’s team should be entreated to join the conversa3on.
• Don’t tack anima3on on alone and/or aRer the fact. You will have a bad 3me.
Generating Buy In
Group documentation
Cultivate and champion
Team up.
There is no right way.
There is no right way.There is only your way.
WebAnimationWeekly.com
slack.AnimationAtWork.com
@RachelNabors .com