Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designing Motion
SIG N!DE          ING S!      ING TH M AK     EN TS!  EV
Designing Motion
D et ails D eta  ils  D et ails
with greatPOWER         comesGREAT         responsibility
{...}
Animation for UI
INPUT             US ER    ED  ONBAS           INK  S!      ON  S, L BU TT            LO SE!  O PE N, C   FAD  ES
Animation for Experience
BREAK        IT             DOWN
{...}
So   So Many Options!How do we decide?
MetaphorWhat are you imitating?
Weight & PhysicsLight as a featherStiff as a board
AppealThe idea that various aspects of thecharacter’s attributes come together tojust feel “right”.
“... it’s easy to forget that when you’rebuilding a game you’re not just building aset of rules or a pile of content. You’...
The internet is not acartoon.(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…
THANKS!Files & Slides:valhead.com/WDD2011Let’s Chat:val@valhead.com • @vlh
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Designing Motion
Upcoming SlideShare
Loading in …5
×

Designing Motion

1,025 views

Published on

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

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

Designing Motion

  1. 1. Designing Motion
  2. 2. SIG N!DE ING S! ING TH M AK EN TS! EV
  3. 3. Designing Motion
  4. 4. D et ails D eta ils D et ails
  5. 5. with greatPOWER comesGREAT responsibility
  6. 6. {...}
  7. 7. Animation for UI
  8. 8. INPUT US ER ED ONBAS INK S! ON S, L BU TT LO SE! O PE N, C FAD ES
  9. 9. Animation for Experience
  10. 10. BREAK IT DOWN
  11. 11. {...}
  12. 12. So So Many Options!How do we decide?
  13. 13. MetaphorWhat are you imitating?
  14. 14. Weight & PhysicsLight as a featherStiff as a board
  15. 15. AppealThe idea that various aspects of thecharacter’s attributes come together tojust feel “right”.
  16. 16. “... it’s easy to forget that when you’rebuilding a game you’re not just building aset of rules or a pile of content. You’recrafting and experience...Animation happens to be my weapon ofchoice to achieve this”  [Mika Mobile blog post]
  17. 17. The internet is not acartoon.(usually)
  18. 18. Yeah,I changed my mind…
  19. 19. We kinda care about our code…
  20. 20. Hi, I’m a link!Hi, I’m a link!Hi, I’m a link!
  21. 21. YAY! New Things!BOO! New Things!
  22. 22. Transference
  23. 23. Time Signatures
  24. 24. and with that…
  25. 25. THANKS!Files & Slides:valhead.com/WDD2011Let’s Chat:val@valhead.com • @vlh

×