<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Amir Khella &#187; Prototyping</title>
	<atom:link href="http://blog.amirkhella.com/category/design/prototyping/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.amirkhella.com</link>
	<description></description>
	<lastBuildDate>Tue, 17 Jan 2012 06:40:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.3</generator>
		<item>
		<title>How to prototype like a pro using tools you already know</title>
		<link>http://blog.amirkhella.com/2010/12/07/how-to-prototype-like-a-pro/</link>
		<comments>http://blog.amirkhella.com/2010/12/07/how-to-prototype-like-a-pro/#comments</comments>
		<pubDate>Tue, 07 Dec 2010 19:24:45 +0000</pubDate>
		<dc:creator>Amir</dc:creator>
				<category><![CDATA[All]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Iphone]]></category>
		<category><![CDATA[Prototyping]]></category>
		<category><![CDATA[iPad]]></category>

		<guid isPermaLink="false">http://blog.amirkhella.com/?p=1459</guid>
		<description><![CDATA[An uncommon guide to designing user interfaces and interactive application prototypes using Apple Keynote Related posts: How to prototype iPad apps in 30 minutes or less using Apple Keynote You might also like reading...How to make the right decision every time (3 minute story)Docverse acquired: An Inspiring Success Story2008 &#8211; A year in review]]></description>
			<content:encoded><![CDATA[<p>An uncommon guide to designing user interfaces and interactive application prototypes using Apple Keynote</p>
<p><object id="__sse6064071" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="615" height="500" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=prototypelikeapro-101207130954-phpapp02&amp;stripped_title=how-to-prototype-like-a-pro&amp;userName=akhella" /><param name="name" value="__sse6064071" /><param name="allowfullscreen" value="true" /><embed id="__sse6064071" type="application/x-shockwave-flash" width="615" height="500" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=prototypelikeapro-101207130954-phpapp02&amp;stripped_title=how-to-prototype-like-a-pro&amp;userName=akhella" name="__sse6064071" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<h4>Related posts:</h4>
<p><a href="http://bit.ly/iPadSD" target="_blank">How to prototype iPad apps in 30 minutes or less using Apple Keynote</a></p>
<h2  class="related_post_title">You might also like reading...</h2><ul class="related_post"><li><a href="http://blog.amirkhella.com/2011/03/01/breaking-the-curse-of-the-perfect-product-launch/" title="Why A Launched Product Beats A Perfect Idea">Why A Launched Product Beats A Perfect Idea</a></li><li><a href="http://blog.amirkhella.com/2010/09/21/the-story-of-keynotopia-how-i-launched-a-profitable-product-in-3-hours/" title="How I launched a profitable product in 3 hours">How I launched a profitable product in 3 hours</a></li><li><a href="http://blog.amirkhella.com/2011/05/24/how-i-outsourced-product-development-to-customers/" title="How I Outsourced Product Development to Customers">How I Outsourced Product Development to Customers</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.amirkhella.com/2010/12/07/how-to-prototype-like-a-pro/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lean Interactive Requirements &#8211; The End of Specification Documents</title>
		<link>http://blog.amirkhella.com/2010/07/28/interactive-requirements-the-end-of-specification-documents/</link>
		<comments>http://blog.amirkhella.com/2010/07/28/interactive-requirements-the-end-of-specification-documents/#comments</comments>
		<pubDate>Wed, 28 Jul 2010 19:08:22 +0000</pubDate>
		<dc:creator>Amir</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Prototyping]]></category>
		<category><![CDATA[Stories]]></category>

		<guid isPermaLink="false">http://blog.amirkhella.com/2010/07/28/interactive-requirements-the-end-of-specification-documents/</guid>
		<description><![CDATA[One of my most dreaded tasks as a program manager has been writing product specifications. It seemed unintuitive that, after brainstorming and discovering the details of the user interface and interaction, the best way to describe it all would be screenshots and endless pages of pre-conditions, action, post-condition, edge cases, etc&#8230; I wasn&#8217;t surprised that ...]]></description>
			<content:encoded><![CDATA[<p>One of my most dreaded tasks as a program manager has been writing product specifications. It seemed unintuitive that, after brainstorming and discovering the details of the user interface and interaction, the best way to describe it all would be screenshots and endless pages of pre-conditions, action, post-condition, edge cases, etc&#8230;</p>
<p>I wasn&#8217;t surprised that developers didn&#8217;t like reading them. Spec review meetings used to feel like one of the scenes from office space &#8211; and I didn&#8217;t even have my red stapler.</p>
<p><span id="more-1302"></span></p>
<p>An interesting shift happens when a fellow PM started prototyping instead of writing specs. And because we were basically creating a prototyping tool, he was testing the tool along the way. Dog-food’ing, as we used to call it at Microsoft. I followed his footsteps immediately. And not only I was having a lot of fun creating prototypes instead of writing requirements, developers were having fun using them and providing feedback, and spec review meetings went by like a breeze. Instead of spending time on making sure everyone understand the description of the interaction, everyone was on the same page much faster.</p>
<p>Needless to say, the final product matched the interactive requirements far more than it ever did with written spec documents.</p>
<p>As I recently started using Keynote to create interactive prototypes, I found more startups teams willing to use the prototype as their requirements. I realized that Keynote is ideal for this task.</p>
<h3>Here is how I use Keynote to capture and communicate requirements</h3>
<p>I won&#8217;t go through the detail of creating an interactive prototype in Keynote, as this has been covered in <a href="http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-or-less-using-apple-keynote/" target="_blank">several</a> <a href="http://blog.amirkhella.com/2010/07/06/rapid-web-application-prototyping-with-apple-keynote/" target="_blank">previous</a> <a href="http://blog.amirkhella.com/2010/07/13/teaser-iphone-running-an-interactive-prototype-built-with-keynote/" target="_blank">posts</a>. Once you&#8217;re done iterating on the prototypes, it&#8217;s very easy to annotate them in Keynote using <strong>comments and presenter notes.</strong></p>
<p>Comments are sticky-notes that you attach anywhere on the slides to indicate a special case for user interaction or a message for development or testing teams.</p>
<p><strong><br />
</strong></p>
<p><strong><a href="http://www.keynotopia.com" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="72612b83-c7cd-4b4a-9929-b0a1071fc358" src="http://blog.amirkhella.com/wp-content/uploads/2010/07/72612b83c7cd4b4a9929b0a1071fc358.png" border="0" alt="72612b83-c7cd-4b4a-9929-b0a1071fc358" width="640" height="430" /></a><br />
</strong></p>
<p>And presenter notes are great way to track discussions on a specific screen or interaction.</p>
<p><strong><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="f2598d1a-4c84-465c-9cd1-c84cb2c825c5" src="http://blog.amirkhella.com/wp-content/uploads/2010/07/f2598d1a4c84465c9cd1c84cb2c825c5.png" border="0" alt="f2598d1a-4c84-465c-9cd1-c84cb2c825c5" width="640" height="421" /><br />
</strong></p>
<p><strong><br />
</strong></p>
<p>The best thing about this workflow is that neither presenter notes nor comments show up in slideshow mode. So they won&#8217;t be interfering with the actual interaction when the prototype is being tested.</p>
<p>You can also export to PDF with presenter notes included, and still maintain the interaction within the prototype &#8211; in this case, the sticky notes will not hide/show nicely in slideshow mode as they do in Keynote. This is a screenshot of the PDF export:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="ac2e7491-cdb4-4323-b5d5-c1e4b39b2ea8" src="http://blog.amirkhella.com/wp-content/uploads/2010/07/ac2e7491cdb44323b5d5c1e4b39b2ea8.png" border="0" alt="ac2e7491-cdb4-4323-b5d5-c1e4b39b2ea8" width="561" height="480" /></p>
<p>If you’ve been writing long spec documents, give Keynote a spin. This is the lean approach to capturing and communicating requirements. And you don’t need to use different tools to create your prototypes, take screenshots, embed them in documents or wiki, and make sure the screenshots are synchronized with written requirements.</p>
<p>If you&#8217;ve been using better tools/techniques for faster requirements, please let me know about them in the comments.</p>
<p><a href="http://www.keynotopia.com/" target="_blank"><img src="http://www.amirkhella.com/images/large_blog_button.png"/></a></p>
<h2  class="related_post_title">You might also like reading...</h2><ul class="related_post"><li><a href="http://blog.amirkhella.com/2011/04/27/hackers-and-coders/" title="Hackers vs. Coders">Hackers vs. Coders</a></li><li><a href="http://blog.amirkhella.com/2012/01/16/escape-velocity/" title="Escape Velocity">Escape Velocity</a></li><li><a href="http://blog.amirkhella.com/2010/03/03/the-elephant-in-the-dark-a-story/" title="The Elephant in the Dark: A Story">The Elephant in the Dark: A Story</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.amirkhella.com/2010/07/28/interactive-requirements-the-end-of-specification-documents/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>How to create an iPhone app prototype in 13 minutes using Apple Keynote [Video Tutorial]</title>
		<link>http://blog.amirkhella.com/2010/07/13/teaser-iphone-running-an-interactive-prototype-built-with-keynote/</link>
		<comments>http://blog.amirkhella.com/2010/07/13/teaser-iphone-running-an-interactive-prototype-built-with-keynote/#comments</comments>
		<pubDate>Tue, 13 Jul 2010 19:47:20 +0000</pubDate>
		<dc:creator>Amir</dc:creator>
				<category><![CDATA[Iphone]]></category>
		<category><![CDATA[Prototyping]]></category>
		<category><![CDATA[iPad]]></category>

		<guid isPermaLink="false">http://blog.amirkhella.com/?p=1207</guid>
		<description><![CDATA[After posting the previous tutorial on prototyping an iPad app in 30 minutes , I was asked by several peeps to put together a video tutorial on how I&#8217;d create an iPhone app prototype using the same technique: No design tools Zero lines of code Prototype can be tested on the iPhone All created under ...]]></description>
			<content:encoded><![CDATA[<p>After posting the previous tutorial on <a href="http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-or-less-using-apple-keynote/" target="_blank">prototyping an iPad app in 30 minutes</a> , I was asked by several peeps to put together a video tutorial on how I&#8217;d create an iPhone app prototype using the same technique:</p>
<ul>
<li>No design tools</li>
<li>Zero lines of code</li>
<li>Prototype can be tested on the iPhone</li>
<li>All created under 30 minutes</li>
</ul>
<p>The video below shows how to use Apple Keynote and Keynotopia interface libraries to create a prototype for an iPhone apartment hunting application <b>in 13 minutes</b>.</p>
<p><span id="more-1207"></span><br />
<iframe src="http://player.vimeo.com/video/13892268?title=0&amp;byline=0&amp;portrait=0" width="625" height="469" frameborder="0"></iframe></p>
<p>The video goes through the same steps from the <a href="http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-or-less-using-apple-keynote/" target="_blank">iPad post</a>:</p>
<p>1- Create a new presentation based on the <a href="http://keynotopia.com/iphone-prototyping/" target="_blank">iPhone template</a> (480&#215;960 resolution)</p>
<p>2- Create main application screens</p>
<p>3- Add pop-ups,  highlights, etc&#8230;</p>
<p>4- Create hyperlinks to make the interface clickable</p>
<p>5- Export as a PDF file and test on the iPhone (I use the free version of GoodReader to render the final prototype)</p>
<p>And here are some of the UI controls used in the video (courtesy of <a href="http://www.keynotopia.com" target="_blank">Keynotopia</a>).</p>
<div style="float:left;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.001.png" height="65%"/>
</div>
<div style="float:right;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.002.png" height="65%"/>
</div>
<div style="float:left;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.004.png" height="65%"/>
</div>
<div style="float:right;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.005.png" height="65%"/>
</div>
<div style="float:left;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.006.png" height="65%"/>
</div>
<div style="float:right;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.007.png" height="65%"/>
</div>
<div style="float:left;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.010.png" height="65%"/>
</div>
<div style="float:right;margin-bottom:15px;">
<img src="http://keynotopia.com/images/screenshots/iPhone/iPhone%20library%20for%20Keynote%2009.003.png" height="65%"/>
</div>
<div style="clear:both"></div>
<p><em>Note: The UI controls are available in both Keynote and Powerpoint formats.</em></p>
<p>Give it a try, I guarantee it will dramatically improve your productivity. And if you have any questions, leave me a comment below.</p>
<p><a href="http://www.keynotopia.com" target="_blank"><img src="http://www.amirkhella.com/images/large_blog_button.png"/></a></p>
<h2>Related posts:</h2>
<ul>
<li><a href="http://blog.amirkhella.com/2010/06/16/how-to-prototype-interactive-ipad-applications-in-30-minutes-or-less-using-apple-keynote/" target="_blank">Creating an interactive iPad app prototype in 30 minutes</a></li>
<li><a href="http://blog.amirkhella.com/2010/12/07/how-to-prototype-like-a-pro/" target="_blank">How to prototype like a pro using tools  you already know</a></li>
</ul>
<h2  class="related_post_title">You might also like reading...</h2><ul class="related_post"><li><a href="http://blog.amirkhella.com/2009/09/26/best-startup-advice-from-lao-tzu/" title="Useful advice from Lao Tzu">Useful advice from Lao Tzu</a></li><li><a href="http://blog.amirkhella.com/2011/08/11/access-denied/" title="How I had one hour wiped out from my memory forever">How I had one hour wiped out from my memory forever</a></li><li><a href="http://blog.amirkhella.com/2010/08/04/ux-advice-from-xkcd/" title="UX advice from XKCD">UX advice from XKCD</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://blog.amirkhella.com/2010/07/13/teaser-iphone-running-an-interactive-prototype-built-with-keynote/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

