<?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>IONCANNON &#187; inkscape</title>
	<atom:link href="http://www.ioncannon.net/tag/inkscape/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ioncannon.net</link>
	<description>Thoughts on Software Development and Engineering</description>
	<lastBuildDate>Tue, 03 Jan 2012 13:59:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
	<atom:link rel='hub' href='http://www.ioncannon.net/?pushpress=hub'/>
		<item>
		<title>How to create iPhone wireframes with Inkscape</title>
		<link>http://www.ioncannon.net/meta/313/how-to-create-iphone-wireframes-with-inkscape/</link>
		<comments>http://www.ioncannon.net/meta/313/how-to-create-iphone-wireframes-with-inkscape/#comments</comments>
		<pubDate>Thu, 16 Apr 2009 01:03:01 +0000</pubDate>
		<dc:creator>carson</dc:creator>
				<category><![CDATA[meta]]></category>
		<category><![CDATA[inkscape]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[mobile]]></category>

		<guid isPermaLink="false">http://www.ioncannon.net/?p=313</guid>
		<description><![CDATA[While developing ideas for iPhone applications I&#039;ve played around with just using Interface Builder to stub things out. This works reasonably well but I know how to use Interface Builder so that makes a difference. If you are designing an application and want to stick with graphical tools only you are in luck because Yahoo [...]]]></description>
			<content:encoded><![CDATA[<p>While developing ideas for iPhone applications I&#039;ve played around with just using Interface Builder to stub things out. This works reasonably well but I know how to use Interface Builder so that makes a difference. If you are designing an application and want to stick with graphical tools only you are in luck because Yahoo has produced a set of <a href="http://developer.yahoo.com/ypatterns/wireframes/">wireframing SVG stencils</a> for the iPhone that are very nice.</p>
<p><span id="more-313"></span></p>
<p>This is what the complete iPhone UI template set looks like:</p>
<p><a href="http://www.ioncannon.net/wp-content/uploads/2009/06/mobileiphoneall.png"><img src="http://www.ioncannon.net/wp-content/uploads/2009/06/mobileiphoneall-300x185.png" alt="Yahoo iPhone Template" title="Yahoo iPhone Template" width="300" height="185" class="alignnone size-medium wp-image-351" /></a></p>
<p>As you can see it has all of the standard UI elements of the iPhone.</p>
<p>Using the stencils is easy. Open the SVG file with Inkscape and then create a new empty project. Select the UI element you want and copy it into your project:</p>
<p><a href="http://www.ioncannon.net/wp-content/uploads/2009/06/step1screenshotexampl1.png"><img src="http://www.ioncannon.net/wp-content/uploads/2009/06/step1screenshotexampl1-300x176.png" alt="Example iPhone Screen Design" title="Example iPhone Screen Design" width="300" height="176" class="alignnone size-medium wp-image-355" /></a></p>
<p>Knowing some of the <a href="http://www.inkscape.org/doc/keys046.html">Inkscape shortcut keys</a> helps a lot in creating your wireframe. Being able to align and move elements in z-ordering is much easier if you know the correct shortcut keys to use.</p>
<p>Here are a few example images that I made using Inkscape for a demo application:</p>
<p><a href="http://www.ioncannon.net/wp-content/uploads/2009/06/screen3.png"><img src="http://www.ioncannon.net/wp-content/uploads/2009/06/screen3.png" alt="Example iPhone Screen with buttons" title="Example iPhone Screen with buttons" width="388" height="732" class="alignnone size-full wp-image-354" /></a></p>
<p><a href="http://www.ioncannon.net/wp-content/uploads/2009/06/screen2.png"><img src="http://www.ioncannon.net/wp-content/uploads/2009/06/screen2.png" alt="Example iPhone Screen with entry boxes" title="Example iPhone Screen with entry boxes" width="388" height="732" class="alignnone size-full wp-image-353" /></a></p>
<p><a href="http://www.ioncannon.net/wp-content/uploads/2009/06/screen1.png"><img src="http://www.ioncannon.net/wp-content/uploads/2009/06/screen1.png" alt="Example iPhone Screen with table" title="Example iPhone Screen with table" width="388" height="732" class="alignnone size-full wp-image-352" /></a></p>
<p>If you are new to wireframing it is worth reading the <a href="http://thinkvitamin.com/features/20-steps-to-better-wireframing/">20 steps to better wireframing</a> post by Think Vitamin. One of the 20 steps is not to worry about making your wireframes look exactly like the final product. If you need it to look perfect then using Interface Builder is probably going to work out better.</p>
<p>As a side note I wish Inkscape had a resource for stencils like <a href="http://www.omnigroup.com/applications/OmniGraffle/">OmniGraffle</a> does. There are any number of people who publish stencils on their blogs and there is even a site specifically for <a href="http://graffletopia.com/">OmniGraffle stencils</a>. I would add stencils to my list of <a href="http://www.ioncannon.net/utilities/123/10-tips-for-creating-good-looking-diagrams-using-inkscape/">tips for creating diagrams using Inkscape</a> if it existed. Right now it is seems like the best option is to look for SVG formatted stencils. The gstencil format doesn&#039;t seem too complicated so maybe someone will eventually find a way to convert the contents into SVG where they could then be used in Inkscape.</p>
<p>Update: If you have Adobe Fireworks or have money to spend on doing this you should check out this video on <a href="http://www.building43.com/videos/2009/06/23/mockup-iphone-app-adobe-fireworks/">building mockups for the iphone using Adobe Fireworks</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ioncannon.net/meta/313/how-to-create-iphone-wireframes-with-inkscape/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

