jedi principles of ui animation
TRANSCRIPT
Jedi Principles of UI animation
Animation by superwhite
fiorine
Animation by superwhite
Animation by superwhite
Blockbusting the UI
Animation by superwhite
Animation by Jakub Antalik
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
Functional
Functional animation fills the comprehension gaps.
Animation by JEddie Lobanovskiy
Animation by Isil Uzum
Rachel Nabors
Animation by Xavier Coulombe-Murray
Material
Animation by Aurélien Salomon
Animation by Damian Kidd
Material animation makes UI more predictable and
easier to navigate.
Animation by Kit Oliynyk
Animation by Jason Teunissen
Delightful
Animation by Chuan
Animation by Konstantine Trundayev
Animation by Brock Kenzler
Make animation a part of your brand.
The Disney’s Canon
Animation by superwhite
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
Material
Solid Drawing
Material
Straight-ahead and Pose-to-pose
Material Delightful
Squash and Stretch
Animation by Kit Oliynyk
Material Delightful
Arcs
Animation by Ryan Roehl
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
Functional
Staging
Animation by Benedikt Matern
Functional Material
Timing
Animation by Kreativa Studio
Animation by BeardChicken
Functional Material
Ease In and Ease Out
Animation by Rustem Sirazetdinov
Animation by Andrej Radisic
Animation by Sebastiano Guerriero
Functional Material
Follow-Through and Overlapping
Animation by Sam Thibault
Animation by Oksana Kulishenko
Animation by Sergey Valiukh
Functional
Secondary Action
Animation by Justin Ruckman
Functional
Anticipation
Animation by Jakub Reis
Animation by Moldiv
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
Delightful Functional
Exaggeration
Animation by Tobias Arréhn
Animation by xjw
Delightful
Appeal
Animation by Thorarinn
Animation by Zee Young
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.
dribbble.com/fiorine/bucketstwitter.com/fiorineThank you.
Animation by superwhite