
<?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>Ivan Milanovic &#187; stop motion</title>
	<atom:link href="http://ivan.mivaco.com/tag/stop-motion/feed/" rel="self" type="application/rss+xml" />
	<link>http://ivan.mivaco.com</link>
	<description>Online portfolio</description>
	<lastBuildDate>Tue, 06 Jul 2010 22:59:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Paper prototyping, stop motion and navimation</title>
		<link>http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/</link>
		<comments>http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/#comments</comments>
		<pubDate>Sat, 22 Aug 2009 11:00:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AHO]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[navimation]]></category>
		<category><![CDATA[prototyping]]></category>
		<category><![CDATA[stop motion]]></category>

		<guid isPermaLink="false">http://ivan.mivaco.com/?p=100</guid>
		<description><![CDATA[This week I was introduced to some new terms; paper prototyping, stop motion and navimation. I&#8217;ve been heard about two of them, but navimation was totally new. An assignment that was handled out after the first lecture was about all these terms. So what does these terms mean and how did the assignment go?Paper prototyping [...]]]></description>
			<content:encoded><![CDATA[<p>This week I was introduced to some new terms; paper prototyping, stop motion and navimation. I&#8217;ve been heard about two of them, but navimation was totally new. An assignment that was handled out after the first lecture was about all these terms. So what does these terms mean and how did the assignment go?<span id="more-100"></span><strong>Paper prototyping</strong><br />
<em>&#8220;Paper prototyping is a variation                       of usability testing where representative users perform realistic                       tasks by interacting with a paper version of the interface                       that is manipulated by a person ‘playing computer,’                       who doesn’t explain how the interface is intended to                       work(source: <a title="paperprototyping" href="http://www.paperprototyping.com" target="_blank">paperprototyping.com</a>)</em>.</p>
<p>These is a quite good explanation on what it is. The term is explained even wider on wikipedia, so I&#8217;m not going to  further explanation here. Read more here: <a title="prototyping @ wikipedia" href="http://en.wikipedia.org/wiki/Paper_prototyping" target="_blank">what is prototyping?</a></p>
<p><strong>Stop motion<br />
</strong>My first association with stop motion was the motion term in flash, because I&#8217;ve been working a bit with the different elements in flash in the past. So I was kind of on the same track, because the frame by frame technique is involved. Shortly explained you crate a movie clip by capturing movement by movement. Again further reading can be done on <a title="stopmotion @wikipedia" href="http://en.wikipedia.org/wiki/Stop_motion" target="_blank">Wikipedia</a>.</p>
<p>One (among some other) positive exploration I did with this technique was that I finally understood how the step by step movies were made. I&#8217;ve seen a lot movies made using these technique, but I was always wondering HOW they were made. I also discovered that using these technique one can create and show concepts in a quick way.</p>
<p>The software we were introduced to use, was FrameByFrame (<a title="FrameByFrame" href="http://web.mac.com/philipp.brendel/Software/FrameByFrame.html" target="_blank">Download here</a>. Only for Mac) which is a pretty stripped and easy-to-use software for these kind of jobs.</p>
<p><strong>Navimation<br />
</strong>I must admit that this was quite an interesting term that I was introduced to. I&#8217;ve been working with software and websites for couple of years now, but have never heard about this before. I liked the the &#8220;concept&#8221; behind it; navigation + animation = navimation.<a title="Navimation" href="http://www.navimationresearch.net/2009/what-is-navimation/" target="_blank"> You can read more here about the term.</a></p>
<p><strong>The assignment: &#8220;Sketching with time&#8221;</strong></p>
<p>The task was to create an album interface that supports navigation through a set number of photos. The device was optional, and could be a web page, mobile, touchscreen etc. All methods explained above should be involved. The concept should be innovative, delightful and emotional evocative.</p>
<p><strong>The final result</strong></p>
<p>My first thoughts were that &#8220;there are some many image galleries for the computer&#8221; so I decided to focus on some other devices. I chose the iPhone, because I think that the built in image gallery on iPhone is a bit plain and boring, and could be done much better. I started to explore with some sketches and storyboards that can be seen below.</p>
<p><a href="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview21.png"> <img class="alignnone size-medium wp-image-117" title="sketchOverview2" src="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview21-300x197.png" alt="sketchOverview2" width="191" height="123" /></a><a href="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview3.png"> <img class="alignnone size-medium wp-image-113 " src="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview3-300x197.png" alt="sketchOverview3" width="187" height="122" /></a> <a href="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview4.png"><img class="alignnone size-medium wp-image-109  " src="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview4-300x197.png" alt="sketch overview" width="192" height="123" /></a> <a href="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview.png"><img class="alignnone size-medium wp-image-120" title="sketchOverview" src="http://ivan.mivaco.com/wp-content/uploads/2009/08/sketchOverview-300x197.png" alt="sketchOverview" width="193" height="123" /></a></p>
<p>The first thing that crossed my mind was a &#8220;globe like&#8221; gallery where one use the finger to navigate among the pictures. I was also looking on circular gallery, where the navigation goes in a circle, but must say that I did not like any of this to ideas. Therefore I ended up with a third one:</p>
<p><a href="http://ivan.mivaco.com/wp-content/uploads/2009/08/finalSketch.png"><img class="alignleft size-medium wp-image-125" style="margin-left: 2px; margin-right: 2px;" title="finalSketch" src="http://ivan.mivaco.com/wp-content/uploads/2009/08/finalSketch-300x197.png" alt="finalSketch" width="195" height="128" /></a> The concept here is that one starts an image gallery by pressing the image gallery button, and the gallery is fading in. By pressing somewhere in the gallery the row where the finger is, is getting highlighted and the pictures are getting a bit bigger than the ones that are outside the highlighted row. One can also use the finger to scroll up and down. Then by tapping the picture the picture grows into full size. By tilting the phone to the left and right one can browse the gallery. By shaking the phone one goes back one level.</p>
<p>I&#8217;ve also created a stop motion of the imagined scenario:<br />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" 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://vimeo.com/moogaloop.swf?clip_id=6221307&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="400" height="300" src="http://vimeo.com/moogaloop.swf?clip_id=6221307&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://vimeo.com/6221307">iPhoneImageBrowser</a> from <a href="http://vimeo.com/user2200293">IvanM</a> on <a href="http://vimeo.com">Vimeo</a>.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;title=Paper+prototyping%2C+stop+motion+and+navimation" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;title=Paper+prototyping%2C+stop+motion+and+navimation" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-diigo">
			<a href="http://www.diigo.com/post?url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;title=Paper+prototyping%2C+stop+motion+and+navimation&amp;desc=This%20week%20I%20was%20introduced%20to%20some%20new%20terms%3B%20paper%20prototyping%2C%20stop%20motion%20and%20navimation.%20I%27ve%20been%20heard%20about%20two%20of%20them%2C%20but%20navimation%20was%20totally%20new.%20An%20assignment%20that%20was%20handled%20out%20after%20the%20first%20lecture%20was%20about%20all%20these%20terms.%20So%20what%20does%20these%20terms%20mean%20and%20how%20did%20the%20assignme" rel="nofollow" class="external" title="Post this on Diigo">Post this on Diigo</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;t=Paper+prototyping%2C+stop+motion+and+navimation" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-friendfeed">
			<a href="http://www.friendfeed.com/share?title=Paper+prototyping%2C+stop+motion+and+navimation&amp;link=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/" rel="nofollow" class="external" title="Share this on FriendFeed">Share this on FriendFeed</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;title=Paper+prototyping%2C+stop+motion+and+navimation&amp;summary=This%20week%20I%20was%20introduced%20to%20some%20new%20terms%3B%20paper%20prototyping%2C%20stop%20motion%20and%20navimation.%20I%27ve%20been%20heard%20about%20two%20of%20them%2C%20but%20navimation%20was%20totally%20new.%20An%20assignment%20that%20was%20handled%20out%20after%20the%20first%20lecture%20was%20about%20all%20these%20terms.%20So%20what%20does%20these%20terms%20mean%20and%20how%20did%20the%20assignme&amp;source=Ivan Milanovic" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-misterwong">
			<a href="http://www.mister-wong.com/addurl/?bm_url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;bm_description=Paper+prototyping%2C+stop+motion+and+navimation&amp;plugin=sexybookmarks" rel="nofollow" class="external" title="Add this to Mister Wong">Add this to Mister Wong</a>
		</li>
		<li class="shr-mixx">
			<a href="http://www.mixx.com/submit?page_url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;title=Paper+prototyping%2C+stop+motion+and+navimation" rel="nofollow" class="external" title="Share this on Mixx">Share this on Mixx</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;title=Paper+prototyping%2C+stop+motion+and+navimation" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/&amp;title=Paper+prototyping%2C+stop+motion+and+navimation" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Paper+prototyping%2C+stop+motion+and+navimation+-+http://b2l.me/aaems2&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://ivan.mivaco.com/2009/08/paper-prototyping-stop-motion-and-navimation/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
