UX Choreography - Motion in UI (Metarefresh 2016)

Here is the presentation that I used for my talk on UX Choreography at Metarefresh 2016, organised by HasGeek. The actual Keynote file had many embedded video animations. Unfortunately, Speaker Deck does not support Keynote files and hence I had to convert it to PDF, losing all the animations in the process. Please check out my work on https://dribbble.com/saptarshipr to get a flavour of the animations.

Transcript

1. UX Choreography M O T I O N I N U I
2. Saptarshi Prakash Product Designer Motion Enthusiast Dribbbler Engineer Non-Coder
3. 6 Seconds Attention Span
4. Humans Not Goldfish
5. WHAT YOU BUILD WHAT USERS SEE Your Product
6. Your Product V2
7. Types of Motion 1.
8. 1. Transitions
 Popups, Overlays, Expand / Contract etc.
9. 2. Feedback
 Interactions, Button States, Loaders etc
10. 3. Shifting Focus
 Interactions, Button States, Loaders etc.
11. 4. Delighters :)
 Loaders, Ambient, Scroll, Parallax etc.
12. A Big Problem! 2.
13. 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. Construction Linked 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 ornare felis. Sed laoreet, enim eu efficitur. 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 Possession Linked Plan Developer Payment Plans
15. Effects, After Effects 3.
17. Element Properties t=t2 t=t1 Values Keyframes
18. Animatable Properties Position Scale Rotation Opacity
19. 0s 1s 0.25s 0.50s 0.75s position: 230,200 rotation: 0x+0.00 position: 1280,200 rotation: 1x+30.00
20. @keyframes wheel-rotate{ 0%{ left: 230px; transform: rotate(0deg); } 100%{ left: 1280px; transform: rotate(390deg); } } CSS .wheel{ animation: wheel-rotate 1s; } 0 100% 25% 50% 75%
21. 0s 1s 0.25s 0.50s 0.75s EASY EASE
22. 0s 1s 0.25s 0.50s 0.75s EASY EASE LINEAR
23. Spicing it up! 4.
24. Animation Duration - UI 400 ms
 Large, complex, full screen transitions 300 ms
 Objects entering the screen 200 ms
 Objects leaving the screen 600 ms
25. Timing Functions
26. Timing Functions
27. EASE-OUT LINEAR
28. Okay. But how do I code it?
29. CSS cubic-bezier(x1,y1,x2,y2); http://cubic-bezier.com/
30. @keyframes card1-slide{ 0%{ top: 1500px; transform: rotate(-20deg); } 100%{ top: 200px; transform: rotate(0deg); } } .card1{ animation: card1-slide 1.5s cubic-bezier(.42,0,.58,1) forwards; } @keyframes card2-slide{ 0%{ top: 1500px; .card2{ animation: card2-slide 1.5s 0.2s cubic-bezier(. 42,0,.58,1) forwards; }
32. Questions? :) saptarshipr saptarshipr