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
700
Designing Animation Awesomeness - Artifact East
valhead
1
950
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
240
Web Design / Motion Design
valhead
1
140
Designing Animation Awesomeness - Artifact Austin
valhead
4
490
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
430
CSS Animations Are The Awesomest!
valhead
2
210
Responsive Typography Techniques
valhead
10
720
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
28
700k
Installing and Running decksh/pdfdeck
ajstarks
1
490
3D空間を扱うUI表現とユーザビリティ
akinen
0
460
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
410
ホワイト化するこの世界の片隅に
hisayosky
0
140
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
320
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
650
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
231206_Book-launch-event_kato
hjmkth
2
1.2k
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
460
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
RailsConf 2023
tenderlove
9
560
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
Designing for humans not robots
tammielis
247
25k
A better future with KSS
kneath
231
16k
A designer walks into a library…
pauljervisheath
201
23k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
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