UX Choreography

D7424ff0e1dc983d898de62c7496c321?s=47 uxindia
October 25, 2019

UX Choreography

UXINDIA2019: India's biggest international conference on User Experience Design which is being celebrated on Sep 9, 10 & 11 at Novotel HICC, Hyderabad.
www.ux-india.org/uxindia2019
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign

D7424ff0e1dc983d898de62c7496c321?s=128

uxindia

October 25, 2019
Tweet

Transcript

  1. None
  2. UX CHOREOGRAPHY Animations | After Effects Good Morning :)

  3. Ramakrishna Head of Design, Zeta @ramakrishnaux

  4. Rama Head of Design, Zeta @ramakrishnaux

  5. Saptarshi Design Manager, Swiggy @saptarshipr

  6. Sapta Design Manager, Swiggy @saptarshipr

  7. 80-20 Rule

  8. Pareto’s Principle 80-20 Rule

  9. Pareto’s Principle 80-20 Rule

  10. Rama Sapta’s Principle 80-20 Rule 95-5 Rule :D

  11. 95-5 Rule :D Rama Sapta’s Principle

  12. UX Choreography 1.

  13. WHAT YOU BUILD WHAT USERS SEE Your Product

  14. Your Product V2

  15. A Wireframe

  16. An Onboarding

  17. With some Motion

  18. Intuitive?

  19. When to use? Where should I go now? Is my

    task complete? I don’t understand what the text says! I don’t want to use this tool!
  20. Types of Motion 2.

  21. 1. Transitions
 Popups, Overlays, Expand / Contract etc.

  22. 2. Feedback
 Interactions, Button States, Loaders etc

  23. 3. Shifting Focus
 Interactions, Button States, Loaders etc.

  24. 4. Delighters :)
 Loaders, Ambient, Scroll, Parallax etc.

  25. A Big Problem! 3.

  26. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae

    nisi nec mauris porta blandit non in ex. Cras vulputate tellus at feugiat posuere. In hac habitasse platea dictumst. Pellentesque lobortis, enim ac tincidunt placerat, quam urna bibendum mauris, at volutpat lacus eros at diam. Sed ac arcu volutpat, cursus metus eget, ornare orci. Praesent quis nulla sapien. Morbi laoreet purus eu nunc accumsan vulputate. Integer a facilisis mauris, non ornare felis. Sed laoreet, enim eu efficitur. Construction Linked Plan Developer Payment Plans Sed ac arcu volutpat, cursus metus eget, ornare orci. Praesent quis nulla sapien. Morbi laoreet purus eu nunc accumsan vulputate. Integer a facilisis mauris, non ornare felis. Sed laoreet, enim eu efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae nisi nec mauris porta blandit non in ex. Cras vulputate tellus at feugiat posuere. In hac habitasse platea dictumst. Downpayment Plan In hac habitasse platea dictumst. Pellentesque lobortis, enim ac tincidunt placerat, quam urna bibendum mauris, at volutpat lacus eros at diam. Flexi Plan Sed ac arcu volutpat, cursus metus eget, ornare orci. Praesent quis nulla sapien. Morbi laoreet purus eu nunc accumsan vulputate. Integer a facilisis mauris, non Possession Linked Plan
  27. Content Shown Work Done Expectation

  28. Content Shown Work Done Expectation

  29. Content Shown Work Done Reality

  30. Content Shown Work Done Reality!

  31. Content Shown Work Done Sweet Spot

  32. Construction Linked Plan

  33. The Tools 4.

  34. None
  35. None
  36. Element Properties t=t2 t=t1 ` Values Keyframes

  37. Common Animatable Properties Position Scale Rotation Opacity

  38. 0s 1s 0.25s 0.50s 0.75s position: 230,200 rotation: 0x+0.00 position:

    1280,200 rotation: 1x+30.00
  39. Spicing it up! 4.

  40. 0s 1s 0.25s 0.50s 0.75s

  41. 0s 1s 0.25s 0.50s 0.75s

  42. Timing Functions

  43. Timing Functions

  44. EASE-OUT LINEAR

  45. Rich Design

  46. Hands On

  47. Let’s Start! saptarshipr