Motion U.I with style

Motion U.I with style

2bf65079a1d9d186ce41955f3152df5f?s=128

zehfernandes

May 09, 2015
Tweet

Transcript

  1. None
  2. ZEH FERNANDES

  3. None
  4. THE GOLDEN AGE OF FLASH THE GOLDEN AGE OF FLASH

  5. None
  6. None
  7. =

  8. The web entered in a aesthetic limbo after the death

    of flash
  9. None
  10. None
  11. None
  12. MEANINGFUL TRANSITIONS MEANINGFUL TRANSITIONS

  13. Animation is a layer that helps the interface communicate with

    the user.
  14. None
  15. "Animation helps brains understand how the information flows." Pasquale D’Silva

    "Animation helps brains understand how the information flows."
  16. ANTECIPATION 01

  17. CALL ATTENTION 02

  18. GIVE CONTEXT 03

  19. FEEDBACK 04

  20. BE AWESOME 05

  21. “Animation is the new typography, so don’t use Comic Sans"

    - John Allsopp “Animation is the new typography, so don’t use Comic Sans"
  22. { } LET’S DO SOME CODES LET’S DO SOME CODES

  23. None
  24. None
  25. None
  26. Properties Properties

  27. Position Transform Opacity Color

  28. None
  29. Perfomance Perfomance

  30. 60 FPS

  31. None
  32. None
  33. LAYOUT PAINT COMPOSITE Redraw all elements in the page Redraw

    just the element and your children Create a new layer to be processed without affect other elements
  34. None
  35. None
  36. Easing Easing

  37. https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3

  38. None
  39. EASE-IN EASE-OUT CUSTOM EASE

  40. None
  41. None
  42. Timing Timing

  43. “.2s to .6s a happy place for small interactions" -

    Va Head ".2s to .6s a happy place for small interactions"
  44. None
  45. Workflow Workflow

  46. None
  47. TRANSITION VS ANIMATION TRANSITION VS ANIMATION

  48. KEYFRAMES IN KEYFRAMES OUT

  49. TICKET-IN TICKET OUT

  50. JAVASCRIPT JQUERY

  51. Debug Debug

  52. None
  53. ease

  54. None
  55. Reference Reference

  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. Animations give a lot of work, but the final result

    is like use the force Illustration by @garlic Animations give a lot of work, but the final result is like use the force
  63. None