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

Designing Animation Awesomeness - Artifact Austin

Avatar for Val Head Val Head
May 06, 2014
Design
4
520

Designing Animation Awesomeness - Artifact Austin

Designing UI animations for the web and how to fit animation into our design process. Plus silly jokes.

Avatar for Val Head

Val Head

May 06, 2014
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
150
Designing Animation Awesomeness - FOWD 2014
Avatar for Val Head valhead
2
540
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
300
Web Design / Motion Design
Avatar for Val Head valhead
1
170
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
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
990
freee + Product Design FY25Q4
Avatar for freee freee
4
14k
ビジネスアナリシスはビジネス”分析”じゃないよ！～システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス～
Avatar for BPStudy bpstudy
0
550
Crisp Code inc. ブランドガイドライン
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
190
問いの変遷
Avatar for なつ iflection
0
160
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
6
3.6k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
3.5k
Flow, Not Stock 知識触媒としてのIA
Avatar for Takehisa Gokaichi 5kaichi
1
290
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
1
170
RAKSUL_DESIGN_DECK_20250319
Avatar for RAKSUL raksulrecruiting
0
390
株式会社バクタム　会社説明資料
Avatar for Bactum Inc. bactum
0
250
株式会社デイトラ様│コーポレートサイト│コンセプトシート
Avatar for Haruka_CAPEO haruka_capeo
0
2.2k

Featured

See All Featured
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
950
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
430
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k

Transcript

  1. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN

    & IN OUR DESIGN PROCESS

  2. Val Head • @vlh Designing Animation Awesomeness! ANIMATION AS DESIGN

    & IN OUR DESIGN PROCESS

  3. RWD + Animation?

  4. None

  5. Animation = Communication

  6. None
  7. None

  8. Animation must match your message.

  9. None

  10. cubic-bezier(0.47, 0, 0.745, 0.715)

  11. vimeo.com/93206523

  12. More than fluff

  13. None
  14. None

  15. Animation + UX FTW

  16. ANIMATION CAN: Establish location

  17. None
  18. None

  19. ANIMATION CAN: Guides tasks

  20. None
  21. None
  22. None

  23. ANIMATION CAN: Demonstrate

  24. None
  25. None
  26. None

  27. ANIMATION CAN: Turn your hierarchy up to 11

  28. None
  29. None

  30. UI animation principles

  31. 1 Always be flexible

  32. None
  33. None

  34. 2 Avoid creating obstacles

  35. None
  36. None

  37. 3 Speed is an art

  38. UI animations should be as fast as they can still

    be readable. readable.

  39. Context matters more than magic numbers for animation speed.

  40. Getting out of your head

  41. None
  42. None

  43. Get your idea moving on screen as early as possible.

  44. None
  45. None
  46. None

  47. framerjs.com/

  48. goo.gl/RXImkC

  49. None

  50. Look beyond the web

  51. artofthetitle.com

  52. capptivate.co

  53. None

  54. Make the awesomest of things!

  55. alltherightmoves.valhead.com

  56. valhead.com/book

  57. codepen.io/valhead alltherightmoves.valhead.com valhead.com @vlh [email protected] Thanks!