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

Designing Animation Awesomeness - Artifact Austin

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Val Head Val Head
May 06, 2014
Design
4
540

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
180
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
820
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
340
Web Design / Motion Design
Avatar for Val Head valhead
1
180
Creative CSS: Thinking in the 3rd dimension FOWD NY
Avatar for Val Head valhead
2
470
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
260
Responsive Typography Techniques
Avatar for Val Head valhead
10
840

Other Decks in Design

See All in Design
【サイバーエージェント】Creative Switch 会社説明資料
Avatar for 【CyberAgent】クリエイター新卒採用 cyberagent_creators
0
5.1k
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
610
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
7
1.8k
AI情報に溺れながら、それでも頑張って泳ぐための思考法
Avatar for Iori67 yoriss67
0
130
Treasure_Hunting
Avatar for Sol Metts solmetts
0
240
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
900
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
140
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
7.1k
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
480
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
300
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
680

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
350
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.6k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
0
3.4k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
230k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
1
1.6k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
700

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!