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

Designing Motion (The JavaScript Version)

Avatar for Val Head Val Head
November 29, 2011
Design
7
590

Designing Motion (The JavaScript Version)

Designing Motion presentation as seen at Pgh.Js() on Nov 29th 2011

Avatar for Val Head

Val Head

November 29, 2011
Tweet

More Decks by Val Head

See All by Val Head
Getting Animation Done
Avatar for Val Head valhead
0
160
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
790
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
320
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
450
CSS Animations Are The Awesomest!
Avatar for Val Head valhead
2
250

Other Decks in Design

See All in Design
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
280
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか？
Avatar for ふわり fuwarisprit
3
1.6k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
310
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
570
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
200
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
750
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
640
役立つシステムを作るためのAI活用
Avatar for 神崎 kanzaki
0
110
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
PRO
0
160
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
400
新しいデザインの難しさ（公開版） / Difficulties in the New Design (public ver.)
Avatar for usagimaru usagimaru
1
930
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
250

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
130k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Done Done
Avatar for chrislema chrislema
185
16k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
10
880
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k

Transcript

  1. Designing Motion Make Animation On The Web Extra Awesome!

  2. EVENTS! MAKING THINGS! DESIGN!

  3. Designing Motion Make Animation On The Web Extra Awesome!

  4. Details Insert cliche here

  5. None

  6. Why Now?

  7. None
  8. None
  9. None

  10. with great comes Responsibility Power Great

  11. None

  12. {...}

  13. Animation for UI

  14. OPEN, CLOSE! BUTTONS, LINKS! BASED ON USER INPUT FADES

  15. None
  16. None
  17. None

  18. Animation for Experience

  19. None
  20. None
  21. None

  22. BREAK IT DOWN

  23. None
  24. None
  25. None

  26. {...}

  27. SO Many Options!

  28. Metaphor What are you imitating?

  29. None
  30. None
  31. None
  32. None

  33. Weight & Physics Light as a feather. Stiff as a

    board.
  34. None
  35. None

  36. The idea that various aspects of the character’s attributes come

    together to just feel “right”. Appeal

  37. “... it’s easy to forget that when you’re building a

    game you’re not just building a set of rules or a pile of content. You’re crafting and experience... Animation happens to be my weapon of choice to achieve this” [Mika Mobile blog post]

  38. Internet != Cartoon

  39. Rules Just For Us :)

  40. Are we there yet? “Point B” isn’t static.

  41. Yeah I changed my mind

  42. None
  43. None
  44. None
  45. None

  46. Semantics Matter We care about that codestuffs

  47. That’s Mr. DOM respect!

  48. Hi, I’m a link! Hi, I’m a link! Hi, I’m

    a link!

  49. New Things!! yay?

  50. Fallbacks+ browsers, devices, the future, oh my!

  51. None

  52. Limitations work with them, not against them. frenemies?

  53. None
  54. None

  55. Dealing With Multiples

  56. Transference

  57. None
  58. None

  59. Time Signatures

  60. None
  61. None
  62. None
  63. None
  64. None

  65. Go Play! Experiment. Make things. Have fun. Edit later.

  66. Slides & Things: valhead.com Let’s Chat: [email protected] • @vlh Thanks!