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

Designing Animation Awesomeness - FOWD 2014

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
200
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
860
Designing Animation Awesomeness - Artifact East
Avatar for Val Head valhead
1
1.2k
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
560
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
280
Responsive Typography Techniques
Avatar for Val Head valhead
10
870

Other Decks in Design

See All in Design
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
450
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
2
3.3k
富山デザイン勉強会_プレゼンテーション.pdf
Avatar for keita keita_yoshikawa
0
110
Figma MCPを活用するためのデザインハンドブック
Avatar for viviON vivion
8
19k
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
160
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1.2k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
1k
開閉UIのアニメーション設計
Avatar for hiro hiro0218
2
920
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
0
260
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
160
hicard_credential_202601
Avatar for hicard hicard
0
270
Saving_the_King_-_Storyboard.pdf
Avatar for Terence Basart terencebasart
0
250

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
200
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.2k
Done Done
Avatar for chrislema chrislema
186
16k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
200
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
300

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