Making animations make sense
-
Upload
mariusz-ciesla -
Category
Design
-
view
202 -
download
2
description
Transcript of Making animations make sense
aMaking animations make sense
@dotmariusz — up.front UG, 11/11/2014
Hi there!
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz
@dotmariusz — up.front UG, 11/11/2014
Designer & developer(mostly designer)
@dotmariusz — up.front UG, 11/11/2014
thttp://j.mp/designing-ui-animation
@dotmariusz — up.front UG, 11/11/2014
<plug type=“shameless”>
</plug>
Animations are important.
@dotmariusz — up.front UG, 11/11/2014
Animations are awesome.
@dotmariusz — up.front UG, 11/11/2014
Animations are fun.
@dotmariusz — up.front UG, 11/11/2014
Animations are delightful.
@dotmariusz — up.front UG, 11/11/2014
Animations are hard.
@dotmariusz — up.front UG, 11/11/2014
Why should you care?
@dotmariusz — up.front UG, 11/11/2014
Animations are transitions.
@dotmariusz — up.front UG, 11/11/2014
Animations are explainers.
@dotmariusz — up.front UG, 11/11/2014
Animations are storytelling.
@dotmariusz — up.front UG, 11/11/2014
Animations are branding.
@dotmariusz — up.front UG, 11/11/2014
“With great power comes great responsibility”
— Uncle Ben
@dotmariusz — up.front UG, 11/11/2014
Good interaction design.
@dotmariusz — up.front UG, 11/11/2014
Engage the user.
@dotmariusz — up.front UG, 11/11/2014
Illustrate state.
@dotmariusz — up.front UG, 11/11/2014
Provide visual feedback.
@dotmariusz — up.front UG, 11/11/2014
Visualize relationships.
@dotmariusz — up.front UG, 11/11/2014
Guide.
@dotmariusz — up.front UG, 11/11/2014
Reassure.
@dotmariusz — up.front UG, 11/11/2014
Affordances.
@dotmariusz — up.front UG, 11/11/2014
Good animation. (12 principles of animation, from “The Old Men” at Disney)
@dotmariusz — up.front UG, 11/11/2014
Anticipation.
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
Squash & stretch.
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
Follow through.
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
Staging.
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
Pose to pose animation.
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
Exaggeration.
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
Personality.
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
@dotmariusz — up.front UG, 11/11/2014
The “nopes” of animation.
@dotmariusz — up.front UG, 11/11/2014
Do not annoy.
@dotmariusz — up.front UG, 11/11/2014
Do not distract.
@dotmariusz — up.front UG, 11/11/2014
Do not block.
@dotmariusz — up.front UG, 11/11/2014
The state of tools
@dotmariusz — up.front UG, 11/11/2014
Keynote
@dotmariusz — up.front UG, 11/11/2014
After Effects
@dotmariusz — up.front UG, 11/11/2014
Edge Animate
@dotmariusz — up.front UG, 11/11/2014
Framer Studio
@dotmariusz — up.front UG, 11/11/2014
Quartz Composer & Origami
@dotmariusz — up.front UG, 11/11/2014
HTML
@dotmariusz — up.front UG, 11/11/2014
“First company to come up with animation equivalent of Sketch will
earn a lot of money.”
@dotmariusz — up.front UG, 11/11/2014
Where to learn from?
@dotmariusz — up.front UG, 11/11/2014
Classic animation
@dotmariusz — up.front UG, 11/11/2014
http://the12principles.tumblr.com/
Other designers
@dotmariusz — up.front UG, 11/11/2014
https://dribbble.com/search?q=ui+gif
Video games
@dotmariusz — up.front UG, 11/11/2014
Material Design by Google
@dotmariusz — up.front UG, 11/11/2014
Have fun.
@dotmariusz — up.front UG, 11/11/2014