Keynote Prototyping

Keynote Prototypingi198 - Spring 2013Tuesday, March 12, 13

Agenda Tuesday, March 12, 13Why Keynote?Planning your prototypeStandard vs. Custom UIAnimation & TransitionSamplesTry it!

Why Keynote?Tuesday, March 12, 13

Why Keynote? Easy to use. Nobody is afraid of Keynote! Allows for side notes and examples toclarify issues about the app screens Easy to share with non-technical people Export it as PDF and visualize it universallyTuesday, March 12, 13Prototype with very simplistic wireframeshapes (as well as more refined ones)Visualize the same mockup on the Macand on the iPad/ iPhone in Keynote format

Planninghttp://keynotopia.com/guides/Tuesday, March 12, 13

Standard Templates vs. Custom ElementsCan drastically reduce time Using basic shapes keeps things and effort to create highfidelity wireframes/prototypes.- Could narrow the designer’sscope and restrict creativity.abstract so people are forcedto focus on design issues. Notechnical or visual issues areinvolved at the prototypingphase. And its free! -It is difficult for some peopleto visualize the app watching atthis so simple rototyping-with-keynote/Tuesday, March 12, 13

Custom ElementsCreate custom elementsthat fit your app withthe ability to copy/ pastestylesButtonWireframeButtonAdd gradientButtonAdd shadowButtonAdd font color & shadowTutorial: http://vimeo.com/20778110Tuesday, March 12, 13

Standard Templateshttp://keynotopia.com/themes/Tuesday, March 12, 13

Standard Templateshttp://keynotopia.com/themes/Tuesday, March 12, 13

-prototyping-with-keynote/Tuesday, March 12, 13

Animation Every shape or object in Keynote can beenabled as -prototyping-with-keynote/Tuesday, March 12, 13

Animation Every shape or object in Keynote can beenabled as hyperlink Document pane: choose “Hyperlinksonly” to restrict navigation to buttonsand, mouse clicks, or -prototyping-with-keynote/Tuesday, March 12, 13

Animation Every shape or object in Keynote can beenabled as hyperlink Document pane: choose “Hyperlinksonly” to restrict navigation to buttonsand, mouse clicks, or gestures. Add transitions between slides tosimulate gestures (i.e. ototyping-with-keynote/Tuesday, March 12, 13

Sharing & Testing Export as clickablepdf Use the Keynotemobile app Third party apps?Tuesday, March 12, 13

Finally.The prototype is only intended to detect designissues at early stages of development and to unifythe mental views that every team member has aboutthe future otyping-with-keynote/Tuesday, March 12, 13

Examples Tuesday, March 12, 13Wireframe Tutorial: http://vimeo.com/31852265 http://www.youtube.com/watch?v fFwazWNu d0Concept: Location Q&A (with video)

Tuesday, March 12, 13

Tuesday, March 12, 13

Tuesday, March 12, 13

Location Q&ATuesday, March 12, 13

Location Q&ATuesday, March 12, 13

Location Q&AFind friends nearbyOh, there are 4 of them!I think ill ask KayTuesday, March 12, 13

Location Q&AKayAskTuesday, March 12, 13

Location Q&AKayCan you grab mea cup of coffeeon your way?AskTuesday, March 12, 13

Location Q&AKayCan you grab mea cup of coffeeon your way?Tuesday, March 12, 13

Location Q&AKayCan you grab mea cup of coffeeon your way?Sure!Thanks! see youat the I SchoolTuesday, March 12, 13

Location Q&ATuesday, March 12, 13

In class exampleButtonButtonTuesday, March 12, 13

In class exampleButtonButtonTuesday, March 12, 13

Try it!Build a Keynote prototype: Step 1: Plan ItStep 2: Prototype ItStep 3: Add InteractivityStep 4: Share It & Get Feedbackhttp://keynotopia.com/tutorials/Tuesday, March 12, 13

Why Keynote? Easy to use. Nobody is afraid of Keynote! Prototype with very simplistic wireframe shapes (as well as more refined ones) Allows for side notes and examples to clarify issues about the app screens Easy to share with non-technical people Visualize the same mockup on the Mac and on the iPad/ iPhone in Keynote format