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

1. Jedi Principles of UI animation
Animation by superwhite
fiorine

2. Animation by superwhite

4. Animation by superwhite

5. Blockbusting the UI
Animation by superwhite

6. Animation by Jakub Antalik

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

8. Functional

11. Functional animation fills
the comprehension gaps.

12. Animation by JEddie Lobanovskiy

13. Animation by Isil Uzum

14. Rachel Nabors

15. Animation by Xavier Coulombe-Murray

16. Material

17. Animation by Aurélien Salomon

18. Animation by Damian Kidd

19. Material animation makes
UI more predictable and
easier to navigate.

20. Animation by Kit Oliynyk

21. Animation by Jason Teunissen

22. Delightful

24. Animation by Chuan

25. Animation by Konstantine Trundayev

26. Animation by Brock Kenzler

27. Make animation a part of
your brand.

28. The Disney’s Canon
Animation by superwhite

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

30. Material
Solid Drawing

31. Material
Straight-ahead and Pose-to-pose

32. Material Delightful
Squash and Stretch

33. Animation by Kit Oliynyk

34. Material Delightful
Arcs

35. Animation by Ryan Roehl

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

37. Functional
Staging

38. Animation by Benedikt Matern

39. Functional Material
Timing

40. Animation by Kreativa Studio

41. Animation by BeardChicken

42. Functional Material
Ease In and Ease Out

43. Animation by Rustem Sirazetdinov

44. Animation by Andrej Radisic

45. Animation by Sebastiano Guerriero

46. Functional Material
Follow-Through and Overlapping

47. Animation by Sam Thibault

48. Animation by Oksana Kulishenko

49. Animation by Sergey Valiukh

50. Functional
Secondary Action

51. Animation by Justin Ruckman

52. Functional
Anticipation

53. Animation by Jakub Reis

54. Animation by Moldiv

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

56. Delightful Functional
Exaggeration

57. Animation by Tobias Arréhn

58. Animation by xjw

59. Delightful
Appeal

60. Animation by Thorarinn

61. Animation by Zee Young

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

63. dribbble.com/fiorine/buckets
twitter.com/fiorineThank you.
Animation by superwhite