Prototyping Animations using Keynote

#Boltworks

How to prototype animations using keynote - these slides are from a tutorial on how to use keynote to create simple and complex animations. The workshop started with this presentation, after which the group was lead through exercises to create a prototype version of animations they found in Google's Inbox app.

** Two slides have videos which do not play properly in Speaker Deck **

1) Page 7 (Peek App) http://capptivate.co/tag/squash-and-stretch/
2) Page 11 (Woah) http://vimeo.com/100377108

** Further resources **
http://blog.thoughtbrain.com/2014/04/03/prototyping-animations-with-keynote/
http://scotthurff.com/posts/how-to-get-animations-out-of-your-head
http://robots.thoughtbot.com/animating-with-keynote

Check out http://www.boltmade.com/events for upcoming #boltworks events!

Transcript

3. Rapid Prototyping Animated Transitions (with Keynote!)
4. Agenda • Why prototype interactions and animations? • What options are there? • Pros and cons of using Keynote • Keynote features • Build a prototype using Keynote • Dance Party
5. Why prototype animated things?
6. Why Prototype Animated Things? • Get it out of your head • Test with users • Determine technical feasibility or tradeoffs • Documentation for developers • Make people excited!!
7. Peek App How could you describe this to someone?
8. What options do you have?
9. Options • Paper • Video • Quartz Composer and Origami • Adobe After Effects • HTML/CSS/Javascript/Jquery • Keynote and Powerpoint
10. Keynote is Awesome! • Surprisingly flexible and powerful • Easy to learn • No programming • You can link pages together with hyperlinks • Conveys ideas quickly • $20 or FREE!
11. Woah.
12. Keynote Sucks • You can’t tweak everything • Doesn’t do everything • It can be hard to send to others remotely • You need to spend time creating assets • Doesn’t integrate with anything else
13. People think you’re weird at first.
14. Prototyping Animated Transitions with Keynote 101
15. Assets with Animations 1. Add an image or shape to the slide 2. Apply an animation to the object 3. Specify when the animation happens 4. Stack ‘em
16. My Steps 1. Decide what you want to animate 2. Isolate animation “chunks” between user interactions 3. Create a script of which object does what, and when 4. Generate assets 5. Build one “chunk” per slide
17. Onto the fun stuff!
18. Thanks! Questions? Check out our Meetup group for upcoming events and workshops: boltmade.com/events www.boltmade.com @boltmade #boltworks @katiecerar
19. Further Reading These three resources have great tips on how to prototype animations and specifically how to get keynote to work for you: • http://blog.thoughtbrain.com/2014/04/03/prototyping-animations-with-keynote/ • http://scotthurff.com/posts/how-to-get-animations-out-of-your-head • http://robots.thoughtbot.com/animating-with-keynote