designing motion
DESCRIPTION
(As seen at Web Design Day 2011) "With great power comes great responsibility" is something you hear often about making things move on the modern web. Well, if that's the case, then we had better really mean it!We'll look at how to get the most out of your CSS transitions and transforms by going beyond just start and end points and applying our design eye to those ever important in-between parts. That's where the real power of animation lies. We want elegant and meaningful animation, not obtrusive or meaningless fluff! What can we borrow from traditional animation? And what do we need to make our own rules for? We'll find some answers and (I hope) you'll never think of a simple transition the same again.TRANSCRIPT
Designing Motion
EVENTS!MAKING THINGS!DESIGN!
Designing Motion
DetailsDetails
Details
with great
POWERcomes
GREATresponsibility
{...}
Animation for UI
OPEN, CLOSE!BUTTONS, LINKS!BASED ON USER INPUT
FADES
Animation for Experience
BREAK IT DOWN
{...}
So So Many Options!How do we decide?
What are you imitating?
Metaphor
Light as a feather
Stiff as a board
Weight & Physics
The idea that various aspects of the character’s attributes come together to just feel “right”.
Appeal
“... it’s easy to forget that when you’re building a game you’re not just building a set of rules or a pile of content. You’re crafting and experience...
Animation happens to be my weapon of choice to achieve this”
[Mika Mobile blog post]
The internet is not a cartoon.
(usually)
Yeah,I changed my mind…
We kinda care about our code…
Hi, I’m a link!
Hi, I’m a link!
Hi, I’m a link!
YAY! New Things!
BOO! New Things!
Transference
Time Signatures
and with that…
