The Web in Motion: animation's impact on UI and web design
?
2 likes?2,157 views
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.
The Web in Motion: animation's impact on UI and web design
- 2. AirBnBApp
- 3. airbnb.com
- 6. amazon.com
- 8. DuolingoApp
- 9. duolingo.com
- 11. the web in motion with @RachelNabors
- 12. 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
- 13. The High Road through the Brain¡¯s GPU
- 14. !me loca!on Animation is a visual representation of a rate of change over time.
- 19. We can use anima6on to indicate an element¡¯s¡ Direction Solidity Momentum
- 20. Relationships Structure Cause & Effect These combine to reinforce¡
- 22. RachelNabors.com
- 23. Jump Cut From ?lm, when the camera cuts directly to a di?erent perspec7ve.
- 28. In-betweening From anima7on, extrapola7ng between two key frames.
- 32. ScottE.HudsonandJohnT.Stasko (1993) ¡°By o?oading 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.¡±
- 41. Animacy How ¡°alive¡± something appears to be.
- 42. 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.¡±
- 45. If you want someone to notice something, make it bright and jiggly.
- 48. Animacy and our Cone of Vision
- 50. When everything vies for our attention, nothing commands our attention.
- 51. A Brief History of Web Animation
- 53. Birth of SMIL, 1999 SMIL
- 54. Birth of CSS Animations and Transitions, 2009 CSS Transi6ons CSS Anima6ons
- 57. One API to Rule Them All CSS Transi6ons CSS Anima6ons SMIL ?
- 61. cdpn.io/MwYMJe
- 62. cdpn.io/GZpREz
- 63. cdpn.io/PNYGZQ
- 65. Support for the Web Animations API Let¡¯s do this. Well, if you¡¯re serious.
- 67. The Impact of Motion on the Web
- 70. 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
- 72. mojs.io
- 73. snapsvg.io
- 74. d3js.org
- 75. threejs.org
- 76. greensock.com
- 78. ibm.com/design
- 81. Storyboards
- 83. Internal use storyboard for DevToolsChallenger.com
- 85. Animatics
- 86. ¡°An animation is worth a thousand meetings.¡±
- 89. Animatics are NOT deliverables.
- 90. Prototypes
- 91. invisionapp.com
- 93. framerjs.com
- 94. Moving Forward
- 97. alovelikepi.com
- 100. DuolingoApp
- 101. duolingo.com
- 102. Animation belongs to all of us now. Let us set the web in motion together. WebAnimationWeekly.com slack.AnimationAtWork.com @RachelNabors .com