Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Designing Animation Awesomeness - FOWD 2014

Avatar for Val Head Val Head
November 04, 2014
Design
2
540

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
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
170
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
810
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
330
Web Design / Motion Design
Avatar for Val Head valhead
1
180
Designing Animation Awesomeness - Artifact Austin
Avatar for Val Head valhead
4
540
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
460
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
260
Responsive Typography Techniques
Avatar for Val Head valhead
10
820

Other Decks in Design

See All in Design
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
2k
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
990k
Emmy's Artwork
Avatar for McKenna mcksmith
0
180
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
580
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
230
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
170
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
250
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
700
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
260
kintone_aroma
Avatar for kintone kintone
0
1.1k
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
110
モビリティプラットフォームの未来を築くクラウド基盤
Avatar for Hajime KOSHIRO kossykinto
0
160

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.2k
Design in an AI World
Avatar for tapps tapps
0
100
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
13k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
37
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
120
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
0
4.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.3k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
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 [email protected] Thanks!

  58. alltherightmoves.valhead.com

  59. valhead.com/book