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

Designing Animation Awesomeness - FOWD 2014

76ded8131db760e741f0ecb01cb4c562?s=47 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.

76ded8131db760e741f0ecb01cb4c562?s=128

Val Head

November 04, 2014
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
110
Putting Your UIs in Motion (AEA Orlando)
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
0
640
Designing Animation Awesomeness - Artifact East
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
870
Web Designer/ Motion Designer - Blend Conf 2014
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
200
Web Design / Motion Design
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
1
130
Designing Animation Awesomeness - Artifact Austin
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
4
440
Creative CSS: Thinking in the 3rd dimension FOWD NY
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
400
CSS Animations Are The Awesomest!
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
2
180
Responsive Typography Techniques
76ded8131db760e741f0ecb01cb4c562?s=48 valhead
11
680

Other Decks in Design

See All in Design
dnd board
E07eafb41f4c23afbf5ca3fe1aa83b75?s=48 emmamsketches
0
160
Doll.pdf
49242d21840cf877de57fb44d752e4fa?s=48 yzhang0425
0
240
Rakuma Developers
8b62efd8d4dd7c134243b785993c5f63?s=48 nojirakuten
0
1.4k
メンタルモデルとは？　カスタマーサポート向けズレ埋め勉強会
B6a2f6699d8ebaad85000f9a8e3d8ccc?s=48 aguringo
0
510
My Yahoo Refresh Overview
Dc9d3d8370a9655046689bfb5a8c086d?s=48 xuechunwu
0
320
Oh my teeth | BrandBook Creative for Partners
4a62826362b9e20a715882d4083022e3?s=48 mkt
PRO
0
140
リサーチ文化を組織に埋め込むために実践したこと
0c6fc884dd8b5a4e584feb6a1b615a47?s=48 hiranotomoki
5
2k
Designing for trust: Applying Promise Theory to collaborate effectively with your remote teams
0eb7b7e396243e93a186ba20649d9aa6?s=48 akiramotomura
0
430
プロダクト開発に活きるUXリサーチ - 基礎編 -
3bb2326963c24027cdf173579290bd6d?s=48 shippio
3
2.3k
Driveline: Arizona (Storyboards)
966a7d3473313a57827602754b617993?s=48 8sided
PRO
0
170
はじめまして、株式会社サインコサインです。（2022.04）
6581d0d2debbc8be5e4808cf46b4f104?s=48 kakukoki
PRO
2
3.3k
「気持ちのよい朝」をつくるデザイン
4f1699756ddbf3f2b6f5517c29747518?s=48 zhikto
0
120

Featured

See All Featured
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.4k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k
Art, The Web, and Tiny UX
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
280
17k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
213
11k
CSS Pre-Processors: Stylus, Less & Sass
7559f6cff1f5efc2d210965febd4d71c?s=48 bermonpainter
349
27k
How to train your dragon (web standard)
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
58
3.9k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
Java REST API Framework Comparison - PWX 2021
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
11
4.7k
jQuery: Nuts, Bolts and Bling
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
6.4k
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
62
10k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k

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 val@valhead.com Thanks!

  58. alltherightmoves.valhead.com

  59. valhead.com/book