Successfully reported this slideshow.

The Web in Motion: animation's impact on UI and web design

2

Share

Loading in …3
×
1 of 102
1 of 102

The Web in Motion: animation's impact on UI and web design

2

Share

Download to read offline

My keynote from Front Trends 2016 in Warsaw was all about where web animation has come from, where it's going, and why it's so important to the future of UI and web design.

My keynote from Front Trends 2016 in Warsaw was all about where web animation has come from, where it's going, and why it's so important to the future of UI and web design.

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

The Web in Motion: animation's impact on UI and web design

  1. 1. @RachelNabors .com
  2. 2. AirBnBApp
  3. 3. airbnb.com
  4. 4. AmazonCartApp
  5. 5. amazon.com
  6. 6. DuolingoApp
  7. 7. duolingo.com
  8. 8. the web in motion with @RachelNabors
  9. 9. The Past, Present, and Future of Web Anima6on • How anima5on helps our users • Where has web anima5on been • And how this impacts how we build the web
  10. 10. The High Road through the Brain’s GPU
  11. 11. !me loca!on Animation is a visual representation of a rate of change over time.
  12. 12. We can use anima6on to indicate an element’s… Direction Solidity Momentum
  13. 13. Relationships Structure Cause & Effect These combine to reinforce…
  14. 14. RachelNabors.com
  15. 15. Jump Cut From film, when the camera cuts directly to a different perspec7ve.
  16. 16. InnerSanctum,1948
  17. 17. DropdowncourtesyofCodrops.
  18. 18. In-betweening From anima7on, extrapola7ng between two key frames.
  19. 19. What just happened?
  20. 20. ScottE.HudsonandJohnT.Stasko (1993) “By offloading interpreta6on of changes to the perceptual system, anima6on allows the user to con6nue thinking about the task domain, with no need to shiC contexts to the interface domain. By elimina6ng sudden visual changes, anima6on lessens the chance that the user is surprised.”
  21. 21. WindowsCEMobilePhoneUI
  22. 22. TouchPhone…with…stylus…
  23. 23. Animacy How “alive” something appears to be.
  24. 24. It’sAlive!AnimateMotionCaptures Attention(2010) “(T)hese speeded responses appeared to be due to the perceived animacy of the objects… We conclude that animate mo6on does indeed capture visual aKen6on.”
  25. 25. If you want someone to notice something, make it bright and jiggly.
  26. 26. cracked.com/article_15239_the-5-most- annoying-banner-ads-internet_p5.html
  27. 27. Animacy and our Cone of Vision
  28. 28. When everything vies for our attention, nothing commands our attention.
  29. 29. A Brief History of Web Animation
  30. 30. Birth of SMIL, 1999 SMIL
  31. 31. Birth of CSS Animations and Transitions, 2009 CSS Transi6ons CSS Anima6ons
  32. 32. CSS Transi6ons CSS Anima6ons SMIL Seriously? Internet Explorer’s Reaction
  33. 33. One API to Rule Them All CSS Transi6ons CSS Anima6ons SMIL ?
  34. 34. Some years later…
  35. 35. ? Web Anima6ons API CSS Transi6ons CSS Anima6ons SMIL
  36. 36. CSS Transi6ons CSS Anima6ons SMIL ? Web Anima6ons API la mort de SMIL, 2015
  37. 37. cdpn.io/MwYMJe
  38. 38. cdpn.io/GZpREz
  39. 39. cdpn.io/PNYGZQ
  40. 40. rachelnabors.com/waapi
  41. 41. Support for the Web Animations API Let’s do this. Well, if you’re serious.
  42. 42. github.com/web-animations/web-animations-js

  43. 43. The Impact of Motion on the Web
  44. 44. Firefox’stoolsat DevToolsChallenger.com
  45. 45. Chrome’sanimaRontooling
  46. 46. Sites using CSS anima6ons and transi6ons • animation 37.2037% • webkit-animation 39.8729% • transition 51.0801% • webkit-transition 45.6491% • justify-content 40.0321% • text-transform 51.9612% chromestatus.com/metrics/css/popularity
  47. 47. mojs.io
  48. 48. snapsvg.io
  49. 49. d3js.org
  50. 50. threejs.org
  51. 51. greensock.com
  52. 52. ibm.com/design
  53. 53. LightningDesignSystem.com
  54. 54. Storyboards
  55. 55. StoryboardforFerdinandtheBulltakenatthe DisneyFamilyHomeMuseum
  56. 56. Internal use storyboard for DevToolsChallenger.com
  57. 57. Mystoryboardtemplate
 goo.gl/PyBXI7
  58. 58. Animatics
  59. 59. “An animation is worth a thousand meetings.”
  60. 60. SpaceUnicornanimaRcusedwithpermission ofBrianneDrouhardaka@potatofarmgirl
  61. 61. loadingspinnerideafromlunch
  62. 62. Animatics are NOT deliverables.
  63. 63. Prototypes
  64. 64. invisionapp.com
  65. 65. principleformac.com
  66. 66. framerjs.com
  67. 67. Moving Forward
  68. 68. alovelikepi.com
  69. 69. google.com/design/spec/motion
  70. 70. DuolingoApp
  71. 71. duolingo.com
  72. 72. Animation belongs to all of us now. Let us set the web in motion together. WebAnimationWeekly.com slack.AnimationAtWork.com @RachelNabors .com

×