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

Motional Intelligence - How Animation Brings Your Product to Life

Motional Intelligence - How Animation Brings Your Product to Life

Gone are the days when animations used to simply add flair to a design.
Today, animation plays a key role in bringing an extra layer of
information and adding personality to your brand.

In this talk we will focus on how motion guides your users, keeps them focused
on what’s important, educates them about information hierarchy, guides their
focus through experience, and adds delight to your product.

Said differently, tune in to learn how animation can bring your product to life 🧟‍♂️.

Cyril Mottier

June 01, 2022
Tweet

More Decks by Cyril Mottier

Other Decks in Design

Transcript

  1. How animation can bring your product to life
    Cyril Mottier
    otional Intelligence
    M

    View Slide

  2. How animation can bring your product to life
    Cyril Mottier
    Emotional Intelligence

    View Slide

  3. Emotional Intelligence
    How animation can bring your product to life
    Cyril Mottier
    M

    View Slide

  4. gensdecon
    fi
    GensDeCon
    fi

    View Slide

  5. gensdecon
    fi
    ance.com GensDeCon
    fi
    ance
    is hiring!

    View Slide

  6. is hiring!

    View Slide

  7. This is where it all began…

    View Slide

  8. Why are animations


    so important?

    View Slide

  9. View Slide

  10. Information hierarchy

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. Brand expression

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. Feedback and status

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. User education

    View Slide

  24. View Slide

  25. View Slide

  26. Immersion

    View Slide

  27. View Slide

  28. nike.com/fr/
    Nike Shop

    View Slide

  29. The 5 additions


    of motion

    View Slide

  30. The 5 additions


    of motion
    🧠 Emphasize information hierarchy

    View Slide

  31. The 5 additions


    of motion
    🧠 Emphasize information hierarchy
    👌 Add delight to your product

    View Slide

  32. The 5 additions


    of motion
    🧠 Emphasize information hierarchy
    👌 Add delight to your product
    🚦 Provide feedback and status

    View Slide

  33. The 5 additions


    of motion
    🧠 Emphasize information hierarchy
    👌 Add delight to your product
    🚦 Provide feedback and status
    👉 Educate and guide users

    View Slide

  34. The 5 additions


    of motion
    🧠 Emphasize information hierarchy
    👌 Add delight to your product
    🚦 Provide feedback and status
    👉 Educate and guide users
    🤿 Create immersive experiences

    View Slide

  35. The 5 additions


    of motion
    🧠 Emphasize information hierarchy
    👌 Add delight to your product
    🚦 Provide feedback and status
    👉 Educate and guide users
    🤿 Create immersive experiences

    View Slide

  36. Thank You!
    Cyril Mottier • gensdecon
    fi

    View Slide