Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Designing Animation Awesomeness - FOWD 2014
Search
Val Head
November 04, 2014
Design
2
540
Designing Animation Awesomeness - FOWD 2014
Designing Animation Awesomeness as shared with the super lovely crowd at FOWD NYC 2014.
Val Head
November 04, 2014
Tweet
Share
More Decks by Val Head
See All by Val Head
Getting Animation Done
valhead
0
150
Putting Your UIs in Motion (AEA Orlando)
valhead
0
770
Designing Animation Awesomeness - Artifact East
valhead
1
1k
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
300
Web Design / Motion Design
valhead
1
170
Designing Animation Awesomeness - Artifact Austin
valhead
4
520
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
440
CSS Animations Are The Awesomest!
valhead
2
240
Responsive Typography Techniques
valhead
10
780
Other Decks in Design
See All in Design
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
560
Haley's adventure chase
ivettetwin
0
220
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
420
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.8k
How to get a Tiger to Tulsa
mcduckyart
0
110
Bulletproof Design System with TypeScript
takanorip
6
3.4k
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.8k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
640
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Raft: Consensus for Rubyists
vanstee
140
7k
For a Future-Friendly Web
brad_frost
179
9.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Navigating Team Friction
lara
187
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Transcript
Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN
& IN OUR DESIGN PROCESS
None
None
None
Animation + UX FTW
ANIMATION: Establishes location
None
None
ANIMATION: Guides tasks
None
None
None
ANIMATION: Demonstrates
None
None
None
ANIMATION: Is totally a diva
None
None
http://goo.gl/XKODuq
Doing it with style
Keep UI Animations Flexible
None
None
Don’t create obstacles
None
None
prototype prototype prototype!
Look at speed and readability
.2s to .6s a happy place for “small” interactions
Ease-outs feel more “responsive”
None
“Sometimes when we release an update, I tighten up an
old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowles
None
More complex easing needs more time to be readable.
None
Match motion to your message
None
None
None
Your choice of easing makes all the difference.
cubic-beziers
Getting out of your head
None
None
Get your idea moving on screen as early as possible.
None
None
http://goo.gl/7IzUDh
None
goo.gl/RXImkC
Look beyond the web
artofthetitle.com
capptivate.co
None
Make the awesomest of things!
alltherightmoves.valhead.com valhead.com/book codepen.io/valhead ! @vlh
[email protected]
Thanks!
alltherightmoves.valhead.com
valhead.com/book