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
530
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
130
Putting Your UIs in Motion (AEA Orlando)
valhead
0
720
Designing Animation Awesomeness - Artifact East
valhead
1
960
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
250
Web Design / Motion Design
valhead
1
150
Designing Animation Awesomeness - Artifact Austin
valhead
4
500
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
430
CSS Animations Are The Awesomest!
valhead
2
220
Responsive Typography Techniques
valhead
10
740
Other Decks in Design
See All in Design
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
3
900
What Was UX Design All About?
ykazu
3
680
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
370
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.2k
アジャイル開発におけるFigmaAI新機能の活用
abokadotyann
1
140
Les petites aventures de CSS, saison 2024
goetter
2
3.8k
DMMデザイナーのプロダクトへの携わり方と組織再編
takumasaito
1
350
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.5k
AIイラスト生成・編集テクニック紹介
piyo7
2
210
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
1.4k
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
460
Du Bois Challenge 2024 Recap
ajstarks
1
120
Featured
See All Featured
Speed Design
sergeychernyshev
22
430
It's Worth the Effort
3n
182
27k
Code Review Best Practice
trishagee
62
16k
Automating Front-end Workflow
addyosmani
1365
200k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
The Pragmatic Product Professional
lauravandoore
31
6.2k
How STYLIGHT went responsive
nonsquared
93
5.1k
What the flash - Photography Introduction
edds
67
11k
Music & Morning Musume
bryan
46
6k
A designer walks into a library…
pauljervisheath
201
24k
Done Done
chrislema
180
16k
Ruby is Unlike a Banana
tanoku
96
11k
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