Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rebounding with Web Animation - Nick Snyder, 2014

637 views

Published on

At WebVisions Chicago, Mad*Pow's Creative Technologist, Nick Snyder shared his insights on animated GIFs, Flash, and JavaScript.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Rebounding with Web Animation - Nick Snyder, 2014

  1. 1. Rebounding with Web Anima/on
  2. 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
  3. 3. A Brief History of Web Anima/on
  4. 4. Web Anima/on Animated GIFs (1987/1990) Flash (1995) JavaScript (1997)
  5. 5. Moving images have an 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. “
  6. 6. Jakob Nielsen Showing con%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
  7. 7. Web Anima/on Goals Be Useful Be Purposeful AWract AWen%on to a Problem or Solu%on Be Playful
  8. 8. About 99% of the 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. “
  9. 9. April 29, 2010
  10. 10. Flash is Bad!
  11. 11. A Brief History of Tradi/onal Anima/on
  12. 12. Eadweard Muybridge English photographer who studied mo%on Hired by Leland Stanford to photograph the gait of his horses Created “Sallie Gardner on a Gallop” in 1878
  13. 13. 12 Principles of Anima/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
  14. 14. Let’s Talk about Computer Anima/on
  15. 15. 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
  16. 16. Anima/on Goals Be Useful Be Purposeful AWract AWen%on to a Problem or Solu%on Be Playful
  17. 17. Google’s Material Design
  18. 18. Mass and Weight
  19. 19. Mass and Weight
  20. 20. Entering and Exi/ng
  21. 21. Entering and Exi/ng
  22. 22. Graceful Transi/ons
  23. 23. Graceful Transi/ons
  24. 24. Point of Origin
  25. 25. Direc/ng AQen/on
  26. 26. Direc/ng AQen/on
  27. 27. Improve the Payment Experience with Anima/on by Michaël Villar (Stripe)
  28. 28. Adding Context
  29. 29. Sympathizing
  30. 30. Tricking People
  31. 31. Delights and Encourages
  32. 32. Dribbble Animated GIFs
  33. 33. Things We LeV on the Moon
  34. 34. Prototyping
  35. 35. Prototyping Quartz Composer Aaer Effects Adobe Edge JavaScript/CSS
  36. 36. Quartz Composer Comes free with Apple’s app developer kit Node-­‐based visual programming language Anima%on tool for Xcode and iMove transi%ons
  37. 37. AVer Effects Mo%on graphics program owned by Adobe Timeline based applica%on (like Flash) Uses layers (think Photoshop for mo%on)
  38. 38. Adobe Edge Mo%on graphics program owned by Adobe Timeline based applica%on (like Flash) Uses layers (think Photoshop for mo%on) Code-­‐Friendly
  39. 39. JavaScript/CSS Scrip%ng languages that work in the browser Much more in%mida%ng than the previous op%ons “The Final Canvas”
  40. 40. Easing.js
  41. 41. CodePen.io
  42. 42. Bounce.js
  43. 43. Inspector Tools
  44. 44. Failures are finger posts on the road to achievement. —C.S. Lewis
  45. 45. December Calendar Create an calendar from December 1–31. Create an anima%on (on hover) for each calendar day. Do something special for your holiday.
  46. 46. NickSnyder.is/wv14 NickSnyder.is/sharing-­‐cool-­‐stuff-­‐with/webvisions-­‐chicago
  47. 47. Thank You, Chicago! @_NickSnyder

×