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

Transcript

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