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

Designing Animation Awesomeness - FOWD 2014

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Val Head Val Head
November 04, 2014
Design
550
2

Designing Animation Awesomeness - FOWD 2014

Designing Animation Awesomeness as shared with the super lovely crowd at FOWD NYC 2014.

Avatar for Val Head

Val Head

November 04, 2014

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
190
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
840
Designing Animation Awesomeness - Artifact East
Avatar for Val Head valhead
1
1.1k
Web Designer/ Motion Designer - Blend Conf 2014
Avatar for Val Head valhead
1
360
Web Design / Motion Design
Avatar for Val Head valhead
1
190
Designing Animation Awesomeness - Artifact Austin
Avatar for Val Head valhead
4
550
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
480
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
270
Responsive Typography Techniques
Avatar for Val Head valhead
10
860

Other Decks in Design

See All in Design
タイル紹介サイト「タイルだもんで」
Avatar for しま calpin
0
130
第18回サイゼミ
Avatar for LW lw
1
3.8k
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
220
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
110
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
1.1k
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
310
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
Avatar for Yu Morita securecat
1
370
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
300
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.2k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
290
2026_01_07_３DプリントはじめましたLT.pdf
Avatar for HideakiTakechi hideakitakechi
0
180
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
290

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
610
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
370
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
360
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
350
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
240
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2k

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