<?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>A Clean Design &#187; wireframe</title>
	<atom:link href="http://www.acleandesign.com/tag/wireframe/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.acleandesign.com</link>
	<description>Innovation in usability research and interaction design.</description>
	<lastBuildDate>Mon, 26 Jul 2010 17:25:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Speed Wireframing</title>
		<link>http://www.acleandesign.com/2009/01/speed-wireframing/</link>
		<comments>http://www.acleandesign.com/2009/01/speed-wireframing/#comments</comments>
		<pubDate>Mon, 05 Jan 2009 05:46:07 +0000</pubDate>
		<dc:creator>Loren</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[speed]]></category>
		<category><![CDATA[wireframe]]></category>

		<guid isPermaLink="false">http://www.acleandesign.com/?p=147</guid>
		<description><![CDATA[Wireframing is like playing a piano: I&#8217;ve seen designers ripping like Vivaldi, and others plodding along like a drunken Tom Waits.  Here are some techniques that can help ensure your designs make it from your whiteboard, or your head, into a digital wireframe as fast as possible. Get enough screen real estate.  Lots of it. [...]]]></description>
			<content:encoded><![CDATA[<p>Wireframing is like playing a piano: I&#8217;ve seen designers ripping like Vivaldi, and others plodding along like a drunken Tom Waits.  Here are some techniques that can help ensure your designs make it from your whiteboard, or your head, into a digital wireframe as fast as possible. <span id="more-147"></span></p>
<p><img class="alignnone size-full wp-image-156 screenshot" title="Speedy" src="http://www.acleandesign.com/wp-content/uploads/2009/01/speed.png" alt="Speedy" width="609" height="126" /></p>
<h4>Get enough screen real estate.  Lots of it.</h4>
<p>Studies have <a href="http://blogs.wsj.com/biztech/2008/03/10/bigger-computer-monitors-more-productivity/">shown</a> that larger screens can make people much more productive, reaching improvements of 40 &#8211; 75%.  This is especially true with design applications like Visio, Axure, OmniGraffle, and Fireworks.</p>
<p>Having a second monitor can allow you to have a reference file on one side while wireframing on the other, reducing the need for window management.</p>
<h4>Use scrolling shortcuts (and a mouse).</h4>
<p>Scrolling around a large wireframe by clicking the scrollbars requires a lot of extra targeting with the mouse.  Avoid scrollbars completely with the following shortcuts.</p>
<p>Most design applications follow these conventions:</p>
<ul>
<li>Scroll up/down: Mouse wheel</li>
<li>Scroll left/right: Shift + Mouse wheel</li>
<li>Zoom in/out: CTRL + Mouse wheel</li>
<li>General scrolling: Space + Mouse button 1</li>
</ul>
<ul>
<li>Copy+paste an element: CTRL + Click an element, drag it to the target location.</li>
<li>Move an element, maintain alignment: Shift + click and drag</li>
</ul>
<h4>Pimp your program.</h4>
<p>Adjust tools to fit your style of usage.  Remove unnecessary toolbars and buttons; add useful ones.  Learn keyboard shortcuts.  Move panels around.  Keep the process of making your <em>process</em> faster close at hand.  Improve your own User Experience.</p>
<h4>Watch your fidelity.</h4>
<p>The lower your fidelity, the faster you can work.  People&#8217;s natural tendency, though, is to make their designs look good.  Be wary of any visual flourishes. It&#8217;s tempting to round the corners on that box, or put a little gradient on that button, but that&#8217;s a slippery slope.  Wireframes can be made to look very good without many visual flourishes by using minimal colors (light grays work well), pleasing alignment, and appropriate whitespace.</p>
<h4>Use open source stencil and icon libraries.</h4>
<p>Don&#8217;t reinvent the wheel.  There are great stencil libraries for <a href="http://www.acleandesign.com/2008/11/the-top-10-axure-resources/">Axure</a>, <a href="http://developer.yahoo.com/ypatterns/wireframes/">Visio</a>, and <a href="http://urlgreyhot.com/personal/resources/omnigraffle_wireframe_palette">OmniGraffle</a>, and hundreds of <a href="http://commons.wikimedia.org/wiki/Crystal_Clear">quality</a> <a href="http://commons.wikimedia.org/wiki/Silk_icons">icons</a> can be found at <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>.  Build yourself a template or folder that has all of the elements you need prepacked for every project.</p>
<h4>Use masters / backgrounds / reusable elements wisely.</h4>
<p>When creating a widget, layout, navigation, or any other element that will be reused across pages, always consider making it a master or background.  Consider what it will be like to change the wireframe in the future.  Is there a complex widget that has been copied and pasted across many screens?  Updates to that widget will require a lot of extra editing.  Construct elements with the future in mind.</p>
<p>Do you have other techniques for speeding things up?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.acleandesign.com/2009/01/speed-wireframing/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
