Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing Animation Awesomeness - FOWD 2014

Val Head
November 04, 2014
Design
2
520

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

More Decks by Val Head

See All by Val Head
Getting Animation Done
valhead
0
120
Putting Your UIs in Motion (AEA Orlando)
valhead
0
650
Designing Animation Awesomeness - Artifact East
valhead
1
890
Web Designer/ Motion Designer - Blend Conf 2014
valhead
1
200
Web Design / Motion Design
valhead
1
140
Designing Animation Awesomeness - Artifact Austin
valhead
4
460
Creative CSS: Thinking in the 3rd dimension FOWD NY
valhead
2
410
CSS Animations Are The Awesomest!
valhead
2
180
Responsive Typography Techniques
valhead
11
690

Other Decks in Design

See All in Design
A Walk in the Suburbs
sabina415
0
170
We’re Not doing Design Systems Properly and That’s Okay
morganepeng
2
440
なぜロゴを変えるのか / for-designer
minma
0
100
メタバース プレゼン講座1. マインドセット編
yusuke_akita
0
140
【総合案内資料】180 Inc. Company Introduction 2022.11改定
shogouenaka
1
210
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
misaaa09
0
130
Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ
terkel
0
630
Comic Excerpt
torije
1
430
自分のYUMEMIに出会ってから、内定承諾までのストーリー
tact0001
0
730
Best Practices For Designing Apps For India - Devfest Bangalore 2022
soham
0
280
「プロダクトとユーザーをつなぐ」BtoB SaaSデザインの面白さ
sizucca
2
1.5k
DL2022 Zoe Rose - ‘Scientific design methods’ and ‘applied creativity’: a lost history
uxaustralia
PRO
0
140

Featured

See All Featured
Atom: Resistance is Futile
akmur
256
24k
GitHub's CSS Performance
jonrohan
1020
430k
The Language of Interfaces
destraynor
149
21k
Code Reviewing Like a Champion
maltzj
508
38k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.8k
What the flash - Photography Introduction
edds
64
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
The Cult of Friendly URLs
andyhume
68
5.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Clear Off the Table
cherdarchuk
79
290k

Transcript

  1. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN

    & IN OUR DESIGN PROCESS
  2. None
  3. None
  4. None

  5. Animation + UX FTW

  6. ANIMATION: Establishes location

  7. None
  8. None

  9. ANIMATION: Guides tasks

  10. None
  11. None
  12. None

  13. ANIMATION: Demonstrates

  14. None
  15. None
  16. None

  17. ANIMATION: Is totally a diva

  18. None
  19. None

  20. http://goo.gl/XKODuq

  21. Doing it with style

  22. Keep UI Animations Flexible

  23. None
  24. None

  25. Don’t create obstacles

  26. None
  27. None

  28. prototype 
 prototype 
 prototype!

  29. Look at speed and readability

  30. .2s to .6s 
 a happy place for “small” interactions

  31. Ease-outs 
 feel more “responsive”

  32. None

  33. “Sometimes when we release an update, I tighten up an

    old transition by ~50ms. ! Result: “Wow, this new version feels faster.” ” - Cennydd Bowles
  34. None

  35. More complex easing needs more time 
 to be readable.

  36. None

  37. Match motion to your message

  38. None
  39. None
  40. None

  41. Your choice of easing makes all the difference. 

  42. cubic-beziers

  43. Getting out of your head

  44. None
  45. None

  46. Get your idea moving on screen as early as possible.

  47. None
  48. None

  49. http://goo.gl/7IzUDh

  50. None

  51. goo.gl/RXImkC

  52. Look beyond 
 the web

  53. artofthetitle.com

  54. capptivate.co

  55. None

  56. Make 
 the awesomest 
 of things!

  57. alltherightmoves.valhead.com valhead.com/book codepen.io/valhead ! @vlh [email protected] Thanks!

  58. alltherightmoves.valhead.com

  59. valhead.com/book