Designing Motion - FITC TO

374 views

Published on

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

  • Be the first to like this

Designing Motion - FITC TO

  1. 1. Designing MotionMake Animation On The Web Extra Awesome!
  2. 2. I CSS
  3. 3. Behaviour Layer Style LayerContent Layer
  4. 4. Experience Behaviour ContentPresentation
  5. 5. These changing times
  6. 6. “ Experience is now the material, not ceramic or plastic. ” Liz Danzico, SVA
  7. 7. Transformitionamations
  8. 8. easelinearease-inease-outease-in-out
  9. 9. easelinearease-inease-outease-in-outcubic-bezier
  10. 10. A B
  11. 11. {...}
  12. 12. Animation for UI
  13. 13. Animation for storytelling
  14. 14. MetaphorWhat are you imitating?
  15. 15. Weight & Physics Light as a feather. Stiff as a board.
  16. 16. Transference
  17. 17. AppealThe idea that various aspects of the character’sattributes come together to just feel “right”.
  18. 18. “... 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]
  19. 19. Internet != Cartoon
  20. 20. Are we there yet? “Point B” isn’t static.
  21. 21. Semantics Matter We care about that codestuffs
  22. 22. The DOM
  23. 23. New Things!! yay?
  24. 24. Fallbacks+browsers, devices, the future, oh my!
  25. 25. Multiples &Workflow
  26. 26. Behaviour Layer Style LayerContent Layer
  27. 27. Limitationsthink of them as your friend. for real.
  28. 28. Go Play!Experiment. Make things. Have fun.
  29. 29. Files & Slides:valhead.comLet’s Chat:val@valhead.com • @vlh

×