Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
800
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
530
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
810

Other Decks in Design

See All in Design
OJTで学んだ 「心を動かす」ファシリテーション
Avatar for さき saki822
1
170
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
6
950
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
1
500
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
170
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
170
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
510
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
160
身の丈に合うところから始めるデザインシステム
Avatar for Tommy tommytommy30
1
120
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
300
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
920k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for 株式会社スマートバンク smartbank
1
440
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.5k

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
460
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

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