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.

Jedi Principles of UI Animation

575 views

Published on

Presented at Web Unleashed 2016 in Toronto
by Kit Oliynyk, Capital One

FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc

Overview
Over the past years, web and mobile designers started to use animation more and more often not just to delight, but also to tell the story and to drive user experience.

UI animation is a combination of the how with the when and why — the proper techniques of applying motion to UI and captivating an audience, combined with the most integral moments in user experience where you can start engaging your users in a two-way dialogue.

Objective

Empower designers and front-end developers to create UI animations in a functional, material and delightful way.

Target Audience

UI/UX designers, interaction designers, front-end developers

Assumed Audience Knowledge

Basic understanding of UI/UX

Five Things Audience Members Will Learn

How animation can vastly improve user experience
Why UI animations should be realistic and magical at the same time
What are the core principles of UI animation
What is UX choreography
Who shot first

Published in: Internet
  • Be the first to comment

Jedi Principles of UI Animation

  1. 1. Jedi Principles of UI animation Animation by superwhite fiorine
  2. 2. Animation by superwhite
  3. 3. Animation by superwhite
  4. 4. Blockbusting the UI Animation by superwhite
  5. 5. Animation by Jakub Antalik
  6. 6. Functional Material Delightful Tell the story, introduce your UX characters Make your UI universe feel real and consistent
 Make it fun,
 memorable and entertaining Perceived UX Attention drivers Feedback and Feedforward Predictable UI Material layers Spatial relationships and hierarchy Suspension of disbelief Entertainment Unique, recognizable motion brand
  7. 7. Functional
  8. 8. Functional animation fills the comprehension gaps.
  9. 9. Animation by JEddie Lobanovskiy
  10. 10. Animation by Isil Uzum
  11. 11. Rachel Nabors
  12. 12. Animation by Xavier Coulombe-Murray
  13. 13. Material
  14. 14. Animation by Aurélien Salomon
  15. 15. Animation by Damian Kidd
  16. 16. Material animation makes UI more predictable and easier to navigate.
  17. 17. Animation by Kit Oliynyk
  18. 18. Animation by Jason Teunissen
  19. 19. Delightful
  20. 20. Animation by Chuan
  21. 21. Animation by Konstantine Trundayev
  22. 22. Animation by Brock Kenzler
  23. 23. Make animation a part of your brand.
  24. 24. The Disney’s Canon Animation by superwhite
  25. 25. Solid Drawing Straight-ahead and Pose-to-pose Squash and Stretch Arcs Staging Timing Follow-through and Overlapping Secondary Action Ease In and Ease Out Anticipation Exaggeration Appeal
  26. 26. Material Solid Drawing
  27. 27. Material Straight-ahead and Pose-to-pose
  28. 28. Material Delightful Squash and Stretch
  29. 29. Animation by Kit Oliynyk
  30. 30. Material Delightful Arcs
  31. 31. Animation by Ryan Roehl
  32. 32. Staging Timing Follow-through and Overlapping Secondary Action Ease In and Ease Out Anticipation Solid Drawing Straight-ahead and Pose-to-pose Squash and Stretch Arcs Exaggeration Appeal
  33. 33. Functional Staging
  34. 34. Animation by Benedikt Matern
  35. 35. Functional Material Timing
  36. 36. Animation by Kreativa Studio
  37. 37. Animation by BeardChicken
  38. 38. Functional Material Ease In and Ease Out
  39. 39. Animation by Rustem Sirazetdinov
  40. 40. Animation by Andrej Radisic
  41. 41. Animation by Sebastiano Guerriero
  42. 42. Functional Material Follow-Through and Overlapping
  43. 43. Animation by Sam Thibault
  44. 44. Animation by Oksana Kulishenko
  45. 45. Animation by Sergey Valiukh
  46. 46. Functional Secondary Action
  47. 47. Animation by Justin Ruckman
  48. 48. Functional Anticipation
  49. 49. Animation by Jakub Reis
  50. 50. Animation by Moldiv
  51. 51. Staging Timing Follow-through and Overlapping Secondary Action Ease In and Ease Out Anticipation Solid Drawing Straight-ahead and Pose-to-pose Squash and Stretch Arcs Exaggeration Appeal
  52. 52. Delightful Functional Exaggeration
  53. 53. Animation by Tobias Arréhn
  54. 54. Animation by xjw
  55. 55. Delightful Appeal
  56. 56. Animation by Thorarinn
  57. 57. Animation by Zee Young
  58. 58. Functional 
 fills the gaps
 for people to follow your story. Material 
 helps people get from A to B and then back again. Delightful
 makes people
 love it and come back for more.
  59. 59. dribbble.com/fiorine/buckets twitter.com/fiorineThank you. Animation by superwhite

×