Jedi Principles of UI Animation
Transcript of Jedi Principles of UI Animation
![Page 1: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/1.jpg)
Jedi Principles of UI animation
Animation by superwhite
fiorine
![Page 2: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/2.jpg)
Animation by superwhite
![Page 3: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/3.jpg)
![Page 4: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/4.jpg)
Animation by superwhite
![Page 5: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/5.jpg)
Blockbusting the UI
Animation by superwhite
![Page 6: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/6.jpg)
Animation by Jakub Antalik
![Page 7: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/7.jpg)
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
![Page 8: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/8.jpg)
Functional
![Page 9: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/9.jpg)
![Page 10: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/10.jpg)
![Page 11: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/11.jpg)
Functional animation fills the comprehension gaps.
![Page 12: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/12.jpg)
Animation by JEddie Lobanovskiy
![Page 13: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/13.jpg)
Animation by Isil Uzum
![Page 14: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/14.jpg)
Rachel Nabors
![Page 15: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/15.jpg)
Animation by Xavier Coulombe-Murray
![Page 16: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/16.jpg)
Material
![Page 17: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/17.jpg)
Animation by Aurélien Salomon
![Page 18: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/18.jpg)
Animation by Damian Kidd
![Page 19: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/19.jpg)
Material animation makes UI more predictable and
easier to navigate.
![Page 20: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/20.jpg)
Animation by Kit Oliynyk
![Page 21: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/21.jpg)
Animation by Jason Teunissen
![Page 22: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/22.jpg)
Delightful
![Page 23: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/23.jpg)
![Page 24: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/24.jpg)
Animation by Chuan
![Page 25: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/25.jpg)
Animation by Konstantine Trundayev
![Page 26: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/26.jpg)
Animation by Brock Kenzler
![Page 27: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/27.jpg)
Make animation a part of your brand.
![Page 28: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/28.jpg)
The Disney’s Canon
Animation by superwhite
![Page 29: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/29.jpg)
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
![Page 30: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/30.jpg)
Material
Solid Drawing
![Page 31: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/31.jpg)
Material
Straight-ahead and Pose-to-pose
![Page 32: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/32.jpg)
Material Delightful
Squash and Stretch
![Page 33: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/33.jpg)
Animation by Kit Oliynyk
![Page 34: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/34.jpg)
Material Delightful
Arcs
![Page 35: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/35.jpg)
Animation by Ryan Roehl
![Page 36: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/36.jpg)
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
![Page 37: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/37.jpg)
Functional
Staging
![Page 38: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/38.jpg)
Animation by Benedikt Matern
![Page 39: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/39.jpg)
Functional Material
Timing
![Page 40: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/40.jpg)
Animation by Kreativa Studio
![Page 41: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/41.jpg)
Animation by BeardChicken
![Page 42: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/42.jpg)
Functional Material
Ease In and Ease Out
![Page 43: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/43.jpg)
Animation by Rustem Sirazetdinov
![Page 44: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/44.jpg)
Animation by Andrej Radisic
![Page 45: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/45.jpg)
Animation by Sebastiano Guerriero
![Page 46: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/46.jpg)
Functional Material
Follow-Through and Overlapping
![Page 47: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/47.jpg)
Animation by Sam Thibault
![Page 48: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/48.jpg)
Animation by Oksana Kulishenko
![Page 49: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/49.jpg)
Animation by Sergey Valiukh
![Page 50: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/50.jpg)
Functional
Secondary Action
![Page 51: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/51.jpg)
Animation by Justin Ruckman
![Page 52: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/52.jpg)
Functional
Anticipation
![Page 53: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/53.jpg)
Animation by Jakub Reis
![Page 54: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/54.jpg)
Animation by Moldiv
![Page 55: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/55.jpg)
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
![Page 56: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/56.jpg)
Delightful Functional
Exaggeration
![Page 57: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/57.jpg)
Animation by Tobias Arréhn
![Page 58: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/58.jpg)
Animation by xjw
![Page 59: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/59.jpg)
Delightful
Appeal
![Page 60: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/60.jpg)
Animation by Thorarinn
![Page 61: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/61.jpg)
Animation by Zee Young
![Page 62: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/62.jpg)
Functional fills the gapsfor 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.
![Page 63: Jedi Principles of UI Animation](https://reader035.fdocuments.us/reader035/viewer/2022081512/589d6c3b1a28abd91d8b6219/html5/thumbnails/63.jpg)
dribbble.com/fiorine/bucketstwitter.com/fiorineThank you.
Animation by superwhite