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

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
150
Putting Your UIs in Motion (AEA Orlando)
Avatar for Val Head valhead
0
780
Designing Animation Awesomeness - Artifact East
Avatar for Val Head valhead
1
1k
Web Designer/ Motion Designer - Blend Conf 2014
Avatar for Val Head valhead
1
310
Web Design / Motion Design
Avatar for Val Head valhead
1
170
Designing Animation Awesomeness - Artifact Austin
Avatar for Val Head valhead
4
520
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
440
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
250
Responsive Typography Techniques
Avatar for Val Head valhead
10
790

Other Decks in Design

See All in Design
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.8k
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
440
AI時代に淘汰されないデザインのしごと
Avatar for Akinen akinen
1
170
freee + Product Design FY25Q4
Avatar for freee freee
4
15k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
280
アプリ360onWeb使い方と裏ワザ？紹介！
Avatar for ikejun360 ikejun360
0
140
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
Avatar for Takahiro Hayashi taka_piya
1
2.2k
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
220
ポートフォリオ_webデザイナー
Avatar for Nami_designer/corder nami_webdesigner
0
150
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
1.1k
信念を持つ方法
Avatar for Rikiya Ihara / magi magi1125
0
180
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
1.9k

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
235
140k
Scaling GitHub
Avatar for Zach Holman holman
461
140k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k

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