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. ZEH FERNANDES

    View full-size slide

  2. THE GOLDEN AGE
    OF FLASH
    THE GOLDEN AGE
    OF FLASH

    View full-size slide

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

    View full-size slide

  4. MEANINGFUL
    TRANSITIONS
    MEANINGFUL
    TRANSITIONS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. ANTECIPATION
    01

    View full-size slide

  8. CALL ATTENTION
    02

    View full-size slide

  9. GIVE CONTEXT
    03

    View full-size slide

  10. BE AWESOME
    05

    View full-size slide

  11. “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 full-size slide

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

    View full-size slide

  13. Properties
    Properties

    View full-size slide

  14. Position Transform Opacity Color

    View full-size slide

  15. Perfomance
    Perfomance

    View full-size slide

  16. 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 full-size slide

  17. Easing
    Easing

    View full-size slide

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

    View full-size slide

  19. EASE-IN
    EASE-OUT
    CUSTOM EASE

    View full-size slide

  20. Timing
    Timing

    View full-size slide

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

    View full-size slide

  22. Workflow
    Workflow

    View full-size slide

  23. TRANSITION VS ANIMATION
    TRANSITION VS ANIMATION

    View full-size slide

  24. KEYFRAMES IN KEYFRAMES OUT

    View full-size slide

  25. TICKET-IN
    TICKET OUT

    View full-size slide

  26. JAVASCRIPT
    JQUERY

    View full-size slide

  27. Reference
    Reference

    View full-size slide

  28. 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 full-size slide