Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Designing Animation Awesomeness - FOWD 2014

Avatar for Val Head Val Head
November 04, 2014
Design
560
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
220
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
880
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
370
Web Design / Motion Design
Avatar for Val Head valhead
1
200
Designing Animation Awesomeness - Artifact Austin
Avatar for Val Head valhead
4
570
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
490
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
290
Responsive Typography Techniques
Avatar for Val Head valhead
10
890

Other Decks in Design

See All in Design
Webデザイナー中田美穂_ポートフォリオ
Avatar for miho nakada omy
0
190
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
220
東京都市大学 都市生活学部×一般社団法人オープン企画イベント　「誰もがデザイナーである」とはどういうことか？ 【エツィオ・マンズィーニ氏 特別来日・基調講演】
Avatar for Kimura Atsunobu a2k
1
150
ポートフォリオ_あやの
Avatar for ayano ngyenmazt1412
0
2k
Typographie et intégration web
Avatar for Raphael Goetter goetter
0
170
デザなに#1「問いのデザイン」の紹介LT
Avatar for @Garyuten garyuten
0
150
MUUUUU.ORG 協賛バナーのご案内
Avatar for クオートワークス quoitworks999
0
430
Look Dev Meetup #50
Avatar for Baku Hashimoto baku89
1
520
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
Avatar for 松村 大貴｜Butterfly Lab株式会社 dmattsun
2
780
Jun Wei Portfolio 2026
Avatar for Wong Jun Wei wjw100788
PRO
1
360
AI-DLC AI駆動開発ライフサイクルとAI-DLC Worlflows V2のご紹介
Avatar for Atsushi Fukui fatsushi
0
190
RawrXD: The Sword
Avatar for Sean Natarajan seanvraj_arts
0
180

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
430
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
300
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
400
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.2k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
480
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
750

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