Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 of 32

UX Choreography - Motion in UI (Metarefresh 2016)

3

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

UX Choreography - Motion in UI (Metarefresh 2016)

  1. 1. UX Choreography M O T I O N I N U I
  2. 2. Saptarshi Prakash Product Designer Motion Enthusiast Dribbbler Engineer Non-Coder
  3. 3. 6 Seconds Attention Span
  4. 4. Humans Not Goldfish
  5. 5. WHAT YOU BUILD WHAT USERS SEE Your Product
  6. 6. Your Product V2
  7. 7. Types of Motion1.
  8. 8. 1. Transitions
 Popups, Overlays, Expand / Contract etc.
  9. 9. 2. Feedback
 Interactions, Button States, Loaders etc
  10. 10. 3. Shifting Focus
 Interactions, Button States, Loaders etc.
  11. 11. 4. Delighters :)
 Loaders, Ambient, Scroll, Parallax etc.
  12. 12. A Big Problem!2.
  13. 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
  14. 14. Effects, After Effects3.
  15. 15. Element Properties t=t2t=t1Values Keyframes
  16. 16. Animatable Properties Position Scale Rotation Opacity
  17. 17. 0s 1s0.25s 0.50s 0.75s position: 230,200 rotation: 0x+0.00 position: 1280,200 rotation: 1x+30.00
  18. 18. @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%
  19. 19. 0s 1s0.25s 0.50s 0.75s EASY EASE
  20. 20. 0s 1s0.25s 0.50s 0.75s EASY EASE LINEAR
  21. 21. Spicing it up!4.
  22. 22. Animation Duration - UI 400 ms
 Large, complex, full screen transitions 300 ms
 Objects entering the screen 200 ms
 Objects leaving the screen 600 ms
  23. 23. Timing Functions
  24. 24. Timing Functions
  25. 25. EASE-OUT LINEAR
  26. 26. Okay. But how do I code it?
  27. 27. CSS cubic-bezier(x1,y1,x2,y2); http://cubic-bezier.com/
  28. 28. @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; }
  29. 29. Questions? :) saptarshipr saptarshipr

×