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.

Crafting animation on the web

1,215 views

Published on

  • Be the first to comment

Crafting animation on the web

  1. 1. Hello
  2. 2. Benjy Stanton(@benjystanton)
  3. 3. byMayoralAppointment
  4. 4. About Me
  5. 5. Mario Paint© Nintendo
  6. 6. “The Nativity”by Benjy Stanton
  7. 7. Designer by Day
  8. 8. CraftingAnimationon the Web
  9. 9. F***h
  10. 10. Animation is Immature
  11. 11. Animation as aDesign Material
  12. 12. “The addition of movement to a[web] experience can provide clarity,information about context and,frankly, a dash of joy and fun.”Rachel Hinman
  13. 13. Clean and Simple
  14. 14. The Time is Right
  15. 15. AnimationPrinciples
  16. 16. “Animation is the rapiddisplay of a sequence ofimages to create anillusion of movement.”
  17. 17. “...a bestowing of life.”
  18. 18. Timing and Spacing
  19. 19. Easing
  20. 20. Ease Out
  21. 21. Ease In
  22. 22. Anticipationand Reaction
  23. 23. 1. Tell them what you’re going to do.2. Do it.3. Tell them that you’ve done it.
  24. 24. Testing
  25. 25. AnimadeLernz
  26. 26. www.animade.tv
  27. 27. CSS3 Animation
  28. 28. @Keyframes RuleandAnimation Property
  29. 29. 0% 25%50%75%100%{ color: crimson; }{ color: sandybrown; }{ color: gold; }{ color: lawngreen; }{ color: steelblue; }
  30. 30. name:duration:timing-function:delay:iteration-count:direction:
  31. 31. name:duration:timing-function:delay:iteration-count:direction:
  32. 32. matthewlein.com/ceaser/orcubic-bezier.com
  33. 33. “Easing is one of thosethings that web designersdon’t talk about enough.”Val Head
  34. 34. timing-function: steps(10);
  35. 35. © Nintendo
  36. 36. © Nintendo
  37. 37. 24ways.org/2012/flashless-animation/by Rachel Nabors
  38. 38. minimalmonkey.com
  39. 39. Workflow
  40. 40. Animation Identity
  41. 41. Credit: Steve Karg
  42. 42. Notes
  43. 43. Show and Tell
  44. 44. Act!
  45. 45. Storyboard
  46. 46. Animatics(Moving Storyboards)
  47. 47. KeynotePhotoshopEdge AnimateAfter Effects
  48. 48. After Effects
  49. 49. Conclusion
  50. 50. Think of animation asa design material, nota piece of content.
  51. 51. Use it to communicatemore, without addingclutter to your designs.
  52. 52. Use animation togive each project aunique personality.
  53. 53. Animation isdistracting, be mindfulof people’s attention.
  54. 54. Further Reading
  55. 55. Transitional Interfacesby Pasquale D’Silva(on Medium)
  56. 56. A New MobileUX Design Materialby Rachel Hinman(on Smashing Magazine)
  57. 57. Flashless Animationby Rachel Nabors(on 24 Ways)
  58. 58. Better NavigationThrough Proprioceptionby Cennydd Bowles(on A List Apart)
  59. 59. The Animator’s Survival Kitby Richard Williams(on good ol’ fashioned paper)
  60. 60. Thank You

×