Download as PDF, PPTX
Uploaded byMad*Pow
Rebounding with Web Animation - Nick Snyder, 2014
The document outlines the history and principles of web and computer animation, emphasizing the importance of usability and the role of animation in design. It critiques the use of Flash on websites for often diminishing user experience and discusses various animation techniques and tools. The summary includes references to specific historical figures and technologies relevant to the evolution of animation.
More Related Content
Similar to Rebounding with Web Animation - Nick Snyder, 2014
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Rebounding with Web Animation - Nick Snyder, 2014
- 1. Rebounding with WebAnima/on
- 2. About Me NickSnyder.is @_NickSnyder Aquarius Chao6c Neutral Crea%ve Technologist at Mad*Pow in Boston, MA Lover of all things design, baseball, anima%on, and Legend of Zelda Member of the South Jersey pub trivia Hall of Fame
- 4. A Brief Historyof Web Anima/on
- 5. Web Anima/on AnimatedGIFs (1987/1990) Flash (1995) JavaScript (1997)
- 7. Moving images havean overpowering effect on the human peripheral vision. This is a survival ins7nct from the 7me when it was of supreme importance to be aware of any saber-‐toothed 7gers before they could sneak up on you. These days, 7ger-‐ avoidance is less of an issue, but anything that moves in your peripheral vision s7ll dominates your awareness: it is very hard to, say, concentrate on reading text in the middle of the page if there is a spinning logo up in the corner. “
- 9. Jakob Nielsen Showingcon%nuity in transi%ons Indica%ng dimensionality in transi%ons Illustra%ng change over %me Mul%plexing the display Enriching graphical representa%ons Visualizing 3D structures AWrac%ng aWen%on
- 10. Web Anima/on Goals Be Useful Be Purposeful AWract AWen%on to a Problem or Solu%on Be Playful
- 11. About 99% ofthe 7me, the presence of Flash on a website cons7tutes a usability disease. Although there are rare occurrences of good Flash design (it even adds value on occasion), the use of Flash typically lowers usability. In most cases, we would be beHer off if these mul7media objects were removed. Flash tends to degrade websites for three reasons: it encourages design abuse, it breaks with the Web's fundamental interac7on principles, and it distracts aHen7on from the site's core value. “
- 12.
- 13.
- 18. A Brief Historyof Tradi/onal Anima/on
- 19. Eadweard Muybridge Englishphotographer who studied mo%on Hired by Leland Stanford to photograph the gait of his horses Created “Sallie Gardner on a Gallop” in 1878
- 25. 12 Principles ofAnima/on Squash and Stretch An%cipa%on Staging Straight Ahead and Pose-‐to-‐Pose Follow Through and Overlapping Ac%on Slow-‐out and Slow-‐in Arcs Secondary Ac%on Timing Exaggera%on Solid Drawing Appeal
- 28. Let’s Talk about Computer Anima/on
- 29. Computer Anima/on Delay-‐ Time between frames Dura%on -‐ Total %me of the anima%on Delta -‐ Calcula%on of the next step Step -‐ Rendered frame
- 34. Anima/on Goals BeUseful Be Purposeful AWract AWen%on to a Problem or Solu%on Be Playful
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45. Improve the Payment Experience with Anima/on by Michaël Villar (Stripe)
- 46.
- 47.
- 49.
- 50.
- 51.
- 56. Things We LeVon the Moon
- 58.
- 59. Prototyping Quartz Composer Aaer Effects Adobe Edge JavaScript/CSS
- 60. Quartz Composer Comesfree with Apple’s app developer kit Node-‐based visual programming language Anima%on tool for Xcode and iMove transi%ons
- 62. AVer Effects Mo%ongraphics program owned by Adobe Timeline based applica%on (like Flash) Uses layers (think Photoshop for mo%on)
- 64. Adobe Edge Mo%ongraphics program owned by Adobe Timeline based applica%on (like Flash) Uses layers (think Photoshop for mo%on) Code-‐Friendly
- 66. JavaScript/CSS Scrip%ng languagesthat work in the browser Much more in%mida%ng than the previous op%ons “The Final Canvas”
- 67.
- 69.
- 72.
- 74.
- 77. Failures are finger posts on the road to achievement. —C.S. Lewis
- 80. December Calendar Createan calendar from December 1–31. Create an anima%on (on hover) for each calendar day. Do something special for your holiday.
- 81.
- 82. Thank You, Chicago! @_NickSnyder