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