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
140
Putting Your UIs in Motion (AEA Orlando)
valhead
0
750
Designing Animation Awesomeness - Artifact East
valhead
1
1k
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
270
Web Design / Motion Design
valhead
1
150
Designing Animation Awesomeness - Artifact Austin
valhead
4
510
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
430
CSS Animations Are The Awesomest!
valhead
2
230
Responsive Typography Techniques
valhead
10
760
Other Decks in Design
See All in Design
横断組織デザイナーの働き方
mixi_design
PRO
0
320
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
770
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.3k
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
130
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
650
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
210
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
350
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
760
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
1k
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Bash Introduction
62gerente
610
210k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Being A Developer After 40
akosma
89
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
128
19k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
For a Future-Friendly Web
brad_frost
176
9.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Making Projects Easy
brettharned
116
6k
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