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
710
Designing Animation Awesomeness - Artifact East
valhead
1
960
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
250
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
220
Responsive Typography Techniques
valhead
10
730
Other Decks in Design
See All in Design
Speed Design
sergeychernyshev
9
270
Chatwork プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
520
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
Information Architects: The Missing Link in Design Systems
soysaucechin
0
190
AIイラスト生成・編集テクニック紹介
piyo7
2
160
TrollsTopia: Funtography- Part 1
kenijam
1
260
Breaking News on the Web
souvikdg
0
380
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
390
改正障害者差別解消法の概要説明
securecat
0
130
Tuzukuru解説ブック
atsumaru1377
0
240
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
340
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
340
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
64k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
GraphQLとの向き合い方2022年版
quramy
36
13k
It's Worth the Effort
3n
181
27k
Adopting Sorbet at Scale
ufuk
71
8.8k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Bash Introduction
62gerente
607
210k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
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