Designing Motion (The JavaScript Version)

Designing Motion presentation as seen at Pgh.Js() on Nov 29th 2011

Transcript

1. Designing Motion Make Animation On The Web Extra Awesome!
2. EVENTS! MAKING THINGS! DESIGN!
3. Designing Motion Make Animation On The Web Extra Awesome!
4. Details Insert cliche here
6. Why Now?
10. with great comes Responsibility Power Great
12. {...}
13. Animation for UI
14. OPEN, CLOSE! BUTTONS, LINKS! BASED ON USER INPUT FADES
18. Animation for Experience
22. BREAK IT DOWN
26. {...}
27. SO Many Options!
28. Metaphor What are you imitating?
33. Weight & Physics Light as a feather. Stiff as a board.
36. The idea that various aspects of the character’s attributes come together to just feel “right”. Appeal
37. “... 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]
38. Internet != Cartoon
39. Rules Just For Us :)
40. Are we there yet? “Point B” isn’t static.
41. Yeah I changed my mind
46. Semantics Matter We care about that codestuffs
47. That’s Mr. DOM respect!
48. Hi, I’m a link! Hi, I’m a link! Hi, I’m a link!
49. New Things!! yay?
50. Fallbacks+ browsers, devices, the future, oh my!
52. Limitations work with them, not against them. frenemies?
55. Dealing With Multiples
56. Transference
59. Time Signatures
65. Go Play! Experiment. Make things. Have fun. Edit later.
66. Slides & Things: valhead.com Let’s Chat: val@valhead.com • @vlh Thanks!