Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Motion U.I with style

Motion U.I with style

zehfernandes

May 09, 2015
Tweet

More Decks by zehfernandes

Other Decks in Technology

Transcript

  1. View Slide

  2. ZEH FERNANDES

    View Slide

  3. View Slide

  4. THE GOLDEN AGE
    OF FLASH
    THE GOLDEN AGE
    OF FLASH

    View Slide

  5. View Slide

  6. View Slide

  7. =

    View Slide

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

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. MEANINGFUL
    TRANSITIONS
    MEANINGFUL
    TRANSITIONS

    View Slide

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

    View Slide

  14. View Slide

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

    View Slide

  16. ANTECIPATION
    01

    View Slide

  17. CALL ATTENTION
    02

    View Slide

  18. GIVE CONTEXT
    03

    View Slide

  19. FEEDBACK
    04

    View Slide

  20. BE AWESOME
    05

    View Slide

  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"

    View Slide

  22. { }
    LET’S DO
    SOME CODES
    LET’S DO
    SOME CODES

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. Properties
    Properties

    View Slide

  27. Position Transform Opacity Color

    View Slide

  28. View Slide

  29. Perfomance
    Perfomance

    View Slide

  30. 60 FPS

    View Slide

  31. View Slide

  32. View Slide

  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

    View Slide

  34. View Slide

  35. View Slide

  36. Easing
    Easing

    View Slide

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

    View Slide

  38. View Slide

  39. EASE-IN
    EASE-OUT
    CUSTOM EASE

    View Slide

  40. View Slide

  41. View Slide

  42. Timing
    Timing

    View Slide

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

    View Slide

  44. View Slide

  45. Workflow
    Workflow

    View Slide

  46. View Slide

  47. TRANSITION VS ANIMATION
    TRANSITION VS ANIMATION

    View Slide

  48. KEYFRAMES IN KEYFRAMES OUT

    View Slide

  49. TICKET-IN
    TICKET OUT

    View Slide

  50. JAVASCRIPT
    JQUERY

    View Slide

  51. Debug
    Debug

    View Slide

  52. View Slide

  53. ease

    View Slide

  54. View Slide

  55. Reference
    Reference

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  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

    View Slide

  63. View Slide