<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" version="2.0">

<channel>
	<title>Fuel Your Interface</title>
	
	<link>http://www.fuelyourinterface.com</link>
	<description />
	<lastBuildDate>Tue, 02 Feb 2010 13:00:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/FuelYourInterface" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="fuelyourinterface" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com" /><feedburner:emailServiceId xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">FuelYourInterface</feedburner:emailServiceId><feedburner:feedburnerHostname xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0">http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>eCommerce UI Part 2: Footers</title>
		<link>http://www.fuelyourinterface.com/ecommerce-ui-part-2-the-footer/</link>
		<comments>http://www.fuelyourinterface.com/ecommerce-ui-part-2-the-footer/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 13:00:42 +0000</pubDate>
		<dc:creator>Jeff Olson</dc:creator>
				<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Practices]]></category>
		<category><![CDATA[UI Design]]></category>
		<category><![CDATA[eCommerce]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1235</guid>
		<description><![CDATA[
In the first in the series last week we talked about the Product Detail page. We looked at two of the top 100 ecommerce sites and picking out the good parts and making suggestions to improve. In today&#8217;s post we&#8217;re going to take a trip downstairs and have a look at the footers of two [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.fuelyourinterface.com/files/headerimg-footers.jpg" alt="headerimg-footers" title="headerimg-footers" width="520" height="310" class="alignnone size-full wp-image-1248" /></p>
<p>In the first in the series last week we talked about the Product Detail page. We looked at two of the top 100 ecommerce sites and picking out the good parts and making suggestions to improve. In today&#8217;s post we&#8217;re going to take a trip downstairs and have a look at the footers of two more sites from the same list, Bluefly, and GAP but we won&#8217;t focus on the good and the bad but more of how the footer can be used in an overall UI design strategy. In the past footers were where you stuck information like copyright info and privacy policies but nowadays footers have become an integral  piece of the ecommerce puzzle. </p>
<p>Often times the forgotten child in the overall scheme of a sites design. Organizationally speaking, they are the last item on the page but are not any less important than any other element of a sites structure, and should be treated strategically equal. </p>
<h2 style="border-bottom: 2px solid #d53893; width: 630px;"><strong>Bluefly.com</strong></h2>
<div id="attachment_1253" class="wp-caption alignnone" style="width: 610px"><a href="http://www.fuelyourinterface.com/files/blueflyfooter.jpg"><img src="http://www.fuelyourinterface.com/files/blueflyfooter-600x123.jpg" alt="bluefly.com" title="blueflyfooter" width="600" height="123" class="size-medium wp-image-1253" /></a><p class="wp-caption-text">bluefly.com</p></div>
<h3>Email Solicitation</h3>
<p>Bluefly.com has a very basic footer. The first thing we see is an email signup form that&#8217;s titled, &#8220;be the first to know!&#8221;. But first to know what? There&#8217;s no context behind what I&#8217;m signing up for. Daily, weekly, monthly emails? Am I getting emails about the brands I&#8217;m interested in or when new items are added to their catalog? Being the first to know could be a good thing or bad thing depending of Bluefly&#8217;s email campaign strategy.</p>
<p>A better approach to soliciting email sign-ups in the footer would be to first give the customer some explanation of what they&#8217;re signing up for. Provide a link to more info or just come out and say it. something on the lines of&#8230;</p>
<p><a href="http://www.fuelyourinterface.com/files/newsignup.gif"><img src="http://www.fuelyourinterface.com/files/newsignup.gif" alt="email sign-up image" title="email sign-up image" width="236" height="93" class="alignnone size-full wp-image-1274" /></a></p>
<p>Now we know at least how frequent, and how many emails we&#8217;re actually signing up for. There is a fine line between too vague and over explanation. In this particular case, one short sentence would have sufficed.</p>
<h3>Link Relevance and Order</h3>
<p>Bluefly doesn&#8217;t have many links in their footer so my next point may be moot, but the grouping of links seem out of order. It could very well be for symmetrical appearance and to keep the four column of three links, this was the most logical order, but in general people (in most countries) read left to right and top to bottom, so we want to make sure that customers can find the most frequently used information first. My best guess would be, &#8220;ORDER STATUS&#8221; and &#8220;RETURNS&#8221; even before email sign up. </p>
<p>I don&#8217;t have any metrics from bluefly to base my assumptions on, but items we would look at changing would be moving the email sign-up to the far right and placing <em>order status</em> and <em>returns</em> in the first column, with <em>security</em> and <em>privacy</em> next to it one column over.</p>
<p>I also noticed <a href="http://www.bluefly.com/custom/custom.jsp?promoId=m480139">Bluefly is looking for a UI designer</a> on their careers page, so to any of you New York UI Designers, here&#8217;s an opportunity for you to make an impact. I won&#8217;t even ask for a kick back. :)</p>
<h2 style="border-bottom: 2px solid #d53893; width: 630px;"><strong>Gap.com</strong></h2>
<p><a href="http://www.fuelyourinterface.com/files/gapfooter.jpg"><img src="http://www.fuelyourinterface.com/files/gapfooter-600x329.jpg" alt="gap.com footer" title="gap.com footer" width="600" height="329" class="alignnone size-medium wp-image-1279" /></a></p>
<h3>Gaps</h3>
<p>Not as far as I can see. At least not in the footer. It&#8217;s a little odd to admire a footer, but Gap really did a good job. If we have to say something negative about it, we could look at how tall it is. Or if we REALLY wanted to split hairs, the orange color is a little on the heavy side, but over all a great example of good design.</p>
<h3>Email Solicitation</h3>
<p>I still have a small issue with the email solicitation. We still don&#8217;t know if we&#8217;re going to get one email or several. In fact they even say &#8220;email(s)&#8221; which leads me to believe that I will in fact get more than one, or at least have the option to select which emails I will get. The reason we&#8217;re not picking apart Gap on their email solicitation is because that&#8217;s exactly what they do. </p>
<p>After enter your email address you&#8217;re taken to a page where you can select which emails you will receive and Bluefly does not. This is truly a User Experience faux pas for Bluefly and leave it to Gap to pull it together nicely.</p>
<h2 style="border-bottom: 2px solid #d53893; width: 630px;"><strong>Wrap Up</strong></h2>
<p>Next time you&#8217;re shopping online, take a look at the footer. See if you can spot things that don&#8217;t seem to fit. Think about what you would do to improve the design. We don&#8217;t only learn from our own mistakes, but we can also improve our skills by analyzing good ui design and thinking about the user experience.</p>
<p><strong>Photo Credit</strong><br />
Header image courtesy of <a href="http://www.flickr.com/photos/george_eastman_house/3122870673/">George Eastman House</a> and has no known copyright on it&#8217;s usage</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=YTsFsOs14WI:-XSHEXK4T2Y:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=YTsFsOs14WI:-XSHEXK4T2Y:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=YTsFsOs14WI:-XSHEXK4T2Y:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=YTsFsOs14WI:-XSHEXK4T2Y:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=YTsFsOs14WI:-XSHEXK4T2Y:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=YTsFsOs14WI:-XSHEXK4T2Y:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=YTsFsOs14WI:-XSHEXK4T2Y:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=YTsFsOs14WI:-XSHEXK4T2Y:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=YTsFsOs14WI:-XSHEXK4T2Y:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=YTsFsOs14WI:-XSHEXK4T2Y:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/ecommerce-ui-part-2-the-footer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>eCommerce UI Part 1: The Product Detail Page</title>
		<link>http://www.fuelyourinterface.com/ecommerce-ui-part-1-the-product-detail-page/</link>
		<comments>http://www.fuelyourinterface.com/ecommerce-ui-part-1-the-product-detail-page/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 13:00:14 +0000</pubDate>
		<dc:creator>Jeff Olson</dc:creator>
				<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[UI Design]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[eCommerce]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1145</guid>
		<description><![CDATA[When it comes to eCommerce design there are plenty of Do&#8217;s &#38; Don&#8217;ts, a ton of &#8220;best practices&#8221; and even more people claiming they have the keys to successful eCommerce design.
Is there a magical recipe that will convert that browsing customer to a paying one? Perhaps the key is a magical button, so magnificent that [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1186" title="ecomuiheader" src="http://www.fuelyourinterface.com/files/ecomuiheader1.jpg" alt="ecomuiheader" width="600" height="162" />When it comes to eCommerce design there are plenty of Do&#8217;s &amp; Don&#8217;ts, a ton of &#8220;best practices&#8221; and even more people claiming they have the keys to successful eCommerce design.</p>
<p>Is there a magical recipe that will convert that browsing customer to a paying one? Perhaps the key is a magical button, so magnificent that the user has no choice but to click. Or maybe it is the number of licks it takes to get to the center of a tootsie roll tootsie pop?</p>
<p>In this series of posts over the next several weeks we&#8217;ll look at some of the top internet retailers, and see what they&#8217;re doing to achieve their success. I think you will be surprised at what we find.</p>
<p>The Product Detail page or PD page is where most online shoppers will spend their time. Whether it&#8217;s reading reviews, product information, or looking at alternative (alt) images, the PD page is the heart an soul of the online eCommerce experience.</p>
<p>For the purposes of this part of the series we will take a look at two of the Top 100 eCommerce websites of 2009, straight from the Internet Retailers Top 100 list. Well look at 1 well designed page and 1 not so well designed, and talk about the good and the bad of both.</p>
<h2 style="border-bottom: 2px solid #d53893; width: 630px;"><strong>Anthropologie</strong></h2>
<p><a href="http://www.fuelyourinterface.com/files/anthropologiePD.jpg"><img class="alignleft size-thumbnail wp-image-1180" title="Anthropologie.com" src="http://www.fuelyourinterface.com/files/anthropologiePD-150x150.jpg" alt="Anthropologie.com" width="150" height="150" /></a>Creatively speaking this entire site is gorgeous. Anthropologie certainly has their brand down, and it&#8217;s reflected from page to page. The PD page is no exception.</p>
<p><strong><br />
</strong></p>
<h3><strong>WHAT THEY DID RIGHT</strong></h3>
<p><strong> </strong>Simple, concise information. The customer can get all the information about the product within a glance. This works well for sites like Anthropologie who&#8217;s clientele may be more concerned with what the label says, than what it&#8217;s actually made of. But that&#8217;s ok. <a href="http://twitter.com/inetwebguy/">Some of us</a> do the same thing with Apple products. :)</p>
<p>From the on mouseover zoom to the tooltip message on the &#8220;Add To Bag&#8221; button when you don&#8217;t select a color or size. It&#8217;s those little touches that improve user experience and make the sites usability effortless.</p>
<p>Nice use of whitespace, and typography as well as the consistent product photography, and great use of a left nav, especially the strong call out to where you are as well as breadcrumbs, this site makes my top list for the design alone.</p>
<p><strong><br />
</strong></p>
<h3><strong>WHAT THEY COULD DO BETTER</strong></h3>
<p><strong> </strong>Just as I mentioned typography as a strong point I&#8217;d also like to point out the inconsistencies. I&#8217;m not going to make a big deal about it because it is more than likely part of the quirkiness of the brand and if this is true then who am I to tell them differently.</p>
<p>Next I have to point out that the placement of some features seem odd to me. Grouping &#8220;add to wish list&#8221; with &#8220;send to a friend&#8221; and social network sharing feels a little off.</p>
<p>On to the &#8220;Add To Bag&#8221; button itself. It is the same color as the left nav and even though the page is clean and uncluttered it could benefit from standing out a bit more. I&#8217;m not saying they need a BOB (Big Orange Button) but perhaps just a simple color change would make a stronger call to action.</p>
<p>Overall, Anthropologie is definitely one of the better designed eCommerce sites. Easy to navigate, consistent user interface and branding. They have carved their niche, and provide their customers with a great shopping experience. They are able to achieve this great experience because they don&#8217;t try to be all things to all people. which is a perfect transition to our next site.</p>
<h2 style="border-bottom: 2px solid #d53893; width: 630px;"><strong>Amazon</strong></h2>
<p><a href="http://www.fuelyourinterface.com/files/AmazonPD.jpg"><img class="alignleft size-thumbnail wp-image-1180" title="Amazon.com" src="http://www.fuelyourinterface.com/files/amazon150.jpg" alt="Amazon.com" width="150" height="150" /></a>Amazon.com is the #1 eCommerce website. It&#8217;s the first place I go when I want to compare pricing. They will typically be the best price on the net and often have free shipping. Their product catalog is larger than Han Solo&#8217;s ego, and they outperform most, if not all of the competition by billions (with a &#8220;B&#8221;) in annual revenue year after year.</p>
<p><strong><br />
</strong></p>
<h3><strong>WHAT THEY DID RIGHT</strong></h3>
<p><strong> </strong>As cluttered and confusing as Amazon may look there is actually some method to the madness so to speak. Scrolling down a PD page on Amazon is like long checkout lines at the world&#8217;s largest flea market on Christmas Eve. If you want it, it&#8217;s there and probably cheaper than anyone else. But we&#8217;re here to talk about the UI and overall design.</p>
<p>Amazon has clearly defined each section as you move down the page, and even though there are a million things that could distract you, Amazon does a nice job at grouping it&#8217;s content so that each section is easily distinguished.</p>
<p>Another thing they did right was putting the &#8220;Add To Cart&#8221; button in the same place on each PD page. With all the variable content, can you image what it would be like if the button was under, oh lets say the &#8220;Product Description&#8221;? On some products you would have to scroll 4 screens down to get to it. So, as much of a no-brainer this was, they did it right.</p>
<p>They also put the basic info right at the top and left a plethora of statistical info for further reading if you so choose. I think Amazon knows they are not a browsing site per se. I don&#8217;t know anyone who goes there to see what&#8217;s new, or to watch videos about a product specifically. You go there when you already have something in mind.</p>
<p><strong><br />
</strong></p>
<h3><strong>WHAT THEY COULD DO BETTER</strong></h3>
<p><strong> </strong>Well, firstly you might be thinking who am I to tell the #1 online retailer they could do better. Well, I buy stuff from Amazon all the time. I&#8217;m a customer. The customer is always right! :)</p>
<p>I have a lot of issues with Amazon.com. As a designer, I wouldn&#8217;t know where to begin with attempting a redesign but lets start with the PD page. Amazon could really benefit from a tabbed structure to clean up some of the clutter. I realize this would put some things an extra click away, but from a user experience standpoint, choice suppresses conversion. <a href="http://www.fuelyourapps.com/why-your-next-app-will-fail/">I&#8217;ve said this before</a> in a different context, but the principle is the same.</p>
<blockquote><p>&#8230;people, confronted with a large pool of options will be less satisfied with a decision. The more options there are, the higher their expectation. So even if they have made the best possible choice, their satisfaction level has by default, dropped.</p></blockquote>
<p>Amazon could also stand to drop so many of the up-sells or at the least moving some of the less relevant ones to a click away. Things like &#8220;Customers Who Bought Also Bought&#8221; is fine, but &#8220;What Do Customers Ultimately Buy After Viewing This Item&#8221;? Seriously? I&#8217;m sure these are extremely valuable metrics for their business, but I could care less if 2% of the people viewing this product bought some other product. The only thing this does is make me second guess my decision, potentially abandoning my cart for fear of making the wrong choice.</p>
<p>These aren&#8217;t just business decisions. As interaction designers, we need to take on some accountability. We&#8217;re supposed to be improving the customers experience through well thought out UI and persuading them to convert. Amazon somehow manages the conversion part very well, but leaves user experience at the door quicker than Luke left Dagobah to save Leia.</p>
<p>I could write pages on how we could improve Amazon&#8217;s Product Detail page, but the truth of the matter is, they&#8217;re #1 and probably will be for the foreseeable future so the point really is moot.</p>
<h2 style="border-bottom: 2px solid #d53893; width: 630px;"><strong>Summary</strong></h2>
<p>We&#8217;ve taken a look at 2 of the top100 eComemrce sites PD pages and talked about their good points and bad points. To recap:</p>
<p><strong>ANTHROPOLOGIE</strong><br />
The Good</p>
<ul>
<li>Great design</li>
<li>Clean layout</li>
<li>Nice use of whitespace and typography</li>
<li>Good usability</li>
<li>Strong brand definition</li>
</ul>
<p>The Bad</p>
<ul>
<li>Strange link grouping (wish list  with sharing)</li>
<li> Need stronger call out for &#8220;Add To Bag&#8221; button</li>
</ul>
<p><strong>AMAZON</strong><br />
The Good</p>
<ul>
<li>Clearly defined sections</li>
<li>Great Add To Cart/Wishlist placement</li>
<li>Important description info at the top</li>
<li>Plenty of product images</li>
</ul>
<p>The Bad</p>
<ul>
<li>Clutter</li>
<li>Too many up-sells</li>
<li>Poor layout</li>
<li>Too much useless information</li>
</ul>
<p>What say you? We would love to hear your thoughts.</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZDOyZ9Og3as:hVAJs0ipenM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZDOyZ9Og3as:hVAJs0ipenM:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZDOyZ9Og3as:hVAJs0ipenM:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZDOyZ9Og3as:hVAJs0ipenM:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZDOyZ9Og3as:hVAJs0ipenM:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZDOyZ9Og3as:hVAJs0ipenM:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZDOyZ9Og3as:hVAJs0ipenM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZDOyZ9Og3as:hVAJs0ipenM:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZDOyZ9Og3as:hVAJs0ipenM:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZDOyZ9Og3as:hVAJs0ipenM:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/ecommerce-ui-part-1-the-product-detail-page/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>WordPress Announces OpenSource Design</title>
		<link>http://www.fuelyourinterface.com/wordpress-announces-opensource-design/</link>
		<comments>http://www.fuelyourinterface.com/wordpress-announces-opensource-design/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 13:00:24 +0000</pubDate>
		<dc:creator>Jeff Olson</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[UI Design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1209</guid>
		<description><![CDATA[The popular blog platform WordPress announced last Wednesday that it is reaching out to the Community to improve it&#8217;s UI. 
According to Automatic&#8217;s email list-group, the basic framing, left nav, and other modular elements aren&#8217;t up for grabs, but the Settings, Site Admin from MU, and Media Uploader are looking at a UI facelift. Pages [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.fuelyourinterface.com/files/wordpress-icon-512-150x150.png" alt="wordpress-icon-512" title="wordpress-icon-512" width="150" height="150" class="alignleft size-thumbnail wp-image-1228" />The popular blog platform WordPress announced last Wednesday that it is reaching out to the Community to <a href="http://wordpress.org/development/2010/01/2010-open-source-design/">improve it&#8217;s UI.</a> </p>
<p>According to <a href="http://lists.automattic.com/mailman/listinfo/wp-ui">Automatic&#8217;s email list-group</a>, the basic framing, left nav, and other modular elements aren&#8217;t up for grabs, but the Settings, Site Admin from MU, and Media Uploader are looking at a UI facelift. Pages like Comments and Plugins in the Admin are also being looked at, but it seems as if the 2.7 redesign will stick with us for a while. There is also an irc channel created at <a href="http://webchat.freenode.net/?channels=wordpress-ui">#wordpress-ui on irc.freenode.net</a>.</p>
<p>In the SlideShare below you will see that at slide 55, Jane talks about &#8220;More UI/UX Contributors&#8221;! If you&#8217;re a UI designer who has been using this awesome piece of OpenSource software, here&#8217;s your chance to contribute back to the community and to WP by helping out. You don&#8217;t need to actually help with the UI design, but you can participate in usability tests, or just lurk and learn in the list or irc.</p>
<div style="width:425px"><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wordpress-resolutions-wells-wcatl-100109214046-phpapp02&#038;rel=0&#038;stripped_title=wordpress-resolutions-what-to-expect-in-2010-2873997" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=wordpress-resolutions-wells-wcatl-100109214046-phpapp02&#038;rel=0&#038;stripped_title=wordpress-resolutions-what-to-expect-in-2010-2873997" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object></div>
<p><em><br />
WordPress icon courtesy of <a href="http://factoryjoe.com/projects/wordpress-icon/">Factory Joe</a></em></p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=pdbDAlTBJDg:zqXUwJatcHo:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=pdbDAlTBJDg:zqXUwJatcHo:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=pdbDAlTBJDg:zqXUwJatcHo:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=pdbDAlTBJDg:zqXUwJatcHo:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=pdbDAlTBJDg:zqXUwJatcHo:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=pdbDAlTBJDg:zqXUwJatcHo:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=pdbDAlTBJDg:zqXUwJatcHo:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=pdbDAlTBJDg:zqXUwJatcHo:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=pdbDAlTBJDg:zqXUwJatcHo:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=pdbDAlTBJDg:zqXUwJatcHo:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/wordpress-announces-opensource-design/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>3 Practical Ways To Improve Your Productivity</title>
		<link>http://www.fuelyourinterface.com/3-practical-ways-to-improve-your-productivity/</link>
		<comments>http://www.fuelyourinterface.com/3-practical-ways-to-improve-your-productivity/#comments</comments>
		<pubDate>Fri, 15 Jan 2010 18:53:33 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Discussions]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1127</guid>
		<description><![CDATA[We all hit points in our work, especially as designers, that seem a little hopeless. Whether it&#8217;s from the creative design aspect or from the technical coding side, or even the flow of business, there&#8217;s no way around it &#8211; we will have a few dull moments. But, dear reader, never fear &#8211; there are [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>We all hit points in our work, especially as designers, that seem a little hopeless. Whether it&#8217;s from the creative design aspect or from the technical coding side, or even the flow of business, there&#8217;s no way around it &#8211; we will have a few dull moments. But, dear reader, never fear &#8211; there are always ways to minimize these low points, and allow our high points to reach new heights.</p>
<h2>First off, a warning</h2>
<p>This warning goes for anyone really, both designers and non-designers; be careful when defining just what being &#8220;productive&#8221; really means. We often can mistakenly equate productivity with the amount of money or the number of jobs we receive; productivity, in all reality, is a much broader term than we give it credit for. Productivity, in its most natural form, is the verb form of production; it basically means the act of producing, and creation. With that said, productivity is often measured conventionally in order to assess the different methods and practices we employ, and that does deserve the respect it requires. So, don&#8217;t throw away your benchmarks just yet, but do realize that it will benefit you to redefine your holistic view of productivity. Examples:</p>
<ul>
<li>Learning about your area of practice can be very productive.</li>
<li>Learning about surrounding areas of practices that are related to yours can also be very productive.</li>
<li>Taking time off can be very productive.</li>
</ul>
<p>Say what? You mean, I can walk into my boss&#8217;s office and let them know I&#8217;m not coming in for the rest of the week, and they will give me a raise?</p>
<p>No.</p>
<p>The world isn&#8217;t quite <em>that</em> easy. Here&#8217;s a few ways to increase your productivity.</p>
<p><em>Note: As you can see above, some of these &#8220;productivity tips&#8221; may not necessarily be what your boss believes to be productive (unless, of course, he&#8217;s as high-class as you and is reading FUEL blogs&#8230;). Be careful in the application of the following, and remember that sometimes you do have to follow the definition of productivity as outlined by your boss&#8217;s standards. Of course, if you&#8217;re your own boss&#8230; This is article may just change your life. Or not. Let&#8217;s find out, shall we?<br />
</em></p>
<p><strong>On to the list&#8230;</strong></p>
<h2>1. Become an Expert</h2>
<p><img src="http://www.fuelyourinterface.com/files/expert.jpg" alt="expert" title="expert" width="600" height="165" class="alignnone size-full wp-image-1135" /><br />
We&#8217;ve said it before, folks &#8211; it makes much more sense for you to find an area in which to focus (whether that is design, front-end development, backend development, or even just creative production) and hone in on it. Don&#8217;t just get to the point where you know your stuff pretty well&#8230; Instead, know it so well you could teach it from front to back.<br />
Memorize things. Read through jQuery documentation or tutorials in your downtime, or practice with pro bono work to sharpen your production skills. Find your niche, and sprint towards that direction.<br />
<strong>The why:</strong> Being an expert will allow you to move forward in your job unhindered. Having the knowledge available to you will cut out the unneeded &#8220;guess and check&#8221; time, and will open up your freedom for creative expression.</p>
<h2>2. Exercise</h2>
<p><img src="http://www.fuelyourinterface.com/files/yoga.jpg" alt="yoga" title="yoga" width="600" height="165" class="alignnone size-full wp-image-1136" /><br />
Bet you didn&#8217;t see that one coming. Don&#8217;t worry, I&#8217;m not giving you a workout plan and a bottle of overly-priced herb pills&#8230; It&#8217;s a well-known-fact that exercise will help your productivity. In particular, exercise has been studied <a href="http://serendip.brynmawr.edu/bb/neuro/neuro05/web2/mmcgovern.html">and shown</a> to increase your ability to learn. There&#8217;s quite a bit of science behind it, but the proof is in the pudding&#8230; What does that even mean? Anyway, just try it out yourself. &#8220;Exercise&#8221; doesn&#8217;t mean that you have to kill yourself in the gym for 3 hours a day. Listen to the latest <a href="http://www.yayquery.com">YayQuery podcast</a> while you take a jog around your neighborhood (or on a treadmill if it&#8217;s too cold) or go get a cheap bike from Wal-Mart and ride around town with a few friends. Even if it&#8217;s thirty minutes a day, exercise can drastically improve the way you work and the way you feel about yourself.</p>
<h2>3. Get a Google Calendar</h2>
<p><img src="http://www.fuelyourinterface.com/files/googleCal-600x165.jpg" alt="googleCal" title="googleCal" width="600" height="165" class="alignnone size-medium wp-image-1137" /><br />
A much more specific example, admittedly&#8230; It&#8217;s a well known fact around FUEL that the tools Google offers are pretty great. Specifically, Google Calendar is very useful, especially if you already have a Google account.</p>
<p>Here&#8217;s the big deal: Google Calendar syncs via CalDAV, which means it comes automatically to your iPhone or Android, iCal, Outlook, and any other calendar program worth its salt. We know you may already be using some kind of calendar that you love. Google allows you to import calendars from feeds and local files as well. There&#8217;s no way we could list every feature here, but this would mean that you could create a collaborative calendar between you and any specific employee/coworker/family member/client/you-get-the-idea; these shared calendars also can be controlled to be &#8220;only viewable&#8221; or &#8220;show only busy/free&#8221; or &#8220;completely editable.&#8221; The flexibility is incredible.</p>
<p>Oh, and don&#8217;t forget, Google users&#8230; with so much of your information available on Google already as a Google account holder, integration is pretty simple with your other everyday tasks, and Google is making it a point to consolidate functionality across their different products.<br />
<em>Note: Don&#8217;t forget to back up your appointments before moving them to Google, just in case your computer you all of a sudden for something.</em></p>
<p><strong>Okay, so why is this such a big deal?</strong><br />
Once you get in the swing of using your Google calendar, it will be accessible from anywhere you are. You don&#8217;t have to worry about downloading or adding the same entry multiple times. If you are an employer/supervisor, this could be the solution to scheduling, or any number of other things.</p>
<h2>A Few Other Tools</h2>
<h3>Surprise for Windows users!</h3>
<p>Since we&#8217;ve admittedly been a bit biased towards Mac OS X in the past, we figure it&#8217;s about time to throw Windows users a bone or two. (Oh come on, you can take a joke.) <a href="http://do.davebsd.com/download.shtml">GNOME Do</a> is a similar program to <a href="http://www.blacktree.com/">Blacktree&#8217;s Quicksilver</a> for Mac users. This will change your workflow forever! Be sure to read up on its capabilities. Also, take a look at <a href="http://www.flickr.com/photos/73617363@N00/sets/72157602349337246/">this Flickr set</a> to see some of GNOME Do in action.</p>
<h3>A Little bit of 7 in your X</h3>
<p>For mac users, you may want to check out <a href="http://www.irradiatedsoftware.com/cinch/">Cinch</a>. One of the cool features introduced in Windows 7 is its window resizing shortcuts. If you haven&#8217;t seen it yet, just give it a glance at least.</p>
<p>What are ways you&#8217;ve employed that have made you more productive?</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=i-EXV1UjZgU:V-e5OgFeI0U:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=i-EXV1UjZgU:V-e5OgFeI0U:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=i-EXV1UjZgU:V-e5OgFeI0U:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=i-EXV1UjZgU:V-e5OgFeI0U:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=i-EXV1UjZgU:V-e5OgFeI0U:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=i-EXV1UjZgU:V-e5OgFeI0U:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=i-EXV1UjZgU:V-e5OgFeI0U:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=i-EXV1UjZgU:V-e5OgFeI0U:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=i-EXV1UjZgU:V-e5OgFeI0U:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=i-EXV1UjZgU:V-e5OgFeI0U:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/3-practical-ways-to-improve-your-productivity/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Making Your Desktop Look Awesome Again</title>
		<link>http://www.fuelyourinterface.com/making-your-desktop-look-awesome-again/</link>
		<comments>http://www.fuelyourinterface.com/making-your-desktop-look-awesome-again/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 11:00:02 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Freebies]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[Tools]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1111</guid>
		<description><![CDATA[For those of you who spend hours at your computer (who reading this blog doesn&#8217;t?), you probably remember the time you thought your desktop looked awesome. Maybe you found a cool wallpaper or a neat icon. But it&#8217;s time to take it to the next level. NerdTool is a nice little enhancement for Mac users [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>For those of you who spend hours at your computer (who reading this blog doesn&#8217;t?), you probably remember the time you thought your desktop looked awesome. Maybe you found a cool wallpaper or a neat icon. But it&#8217;s time to take it to the next level. <a href="http://mac.softpedia.com/get/Utilities/NerdTool.shtml">NerdTool</a> is a nice little enhancement for Mac users who want to move past a static desktop. Sure, we know VLC can play a video as your desktop background&#8230; You might even know about <a href="http://projects.tynsoe.org/en/geektool/">GeekTool</a>, which is kind of the grandfather of NerdTool. Cool thing about this one is that it has a pretty good following. You can display the results of a shell script on your desktop, and refresh by the second. Check out the <a href="http://wiki.github.com/balthamos/geektool-3/tipstricks">Github</a> wiki tips and tricks, or if you&#8217;re one of those guys who knows terminal better than correct English grammar, jump in and experiment. Also, all of the GeekTool scripts will naturally work, so digging through forums will provide for pretty easy copy-and-paste scripting to get cool results like these:<br />
<img src="http://www.fuelyourinterface.com/files/coolweather-600x375.jpg" alt="coolweather" title="coolweather" width="600" height="375" class="alignnone size-medium wp-image-1120" /><br />
<img src="http://www.fuelyourinterface.com/files/coolWeather.jpg" alt="coolWeather" title="coolWeather" width="600" height="375" class="alignnone size-full wp-image-1121" /><br />
(Check out the cool iTunes progress bar on the one above)<br />
<img src="http://www.fuelyourinterface.com/files/herotop-600x375.jpg" alt="Flickr user &lt;a href=&quot;http://www.flickr.com/photos/zackshackleton&quot;&gt;zackshackleton&lt;/a&gt;." title="herotop" width="600" height="375" class="size-medium wp-image-1115" /><br />
<img src="http://www.fuelyourinterface.com/files/metalclock-600x375.jpg" alt="metalclock" title="metalclock" width="600" height="375" class="alignnone size-medium wp-image-1122" /><br />
<img src="http://www.fuelyourinterface.com/files/music-600x375.png" alt="music" title="music" width="600" height="375" class="alignnone size-medium wp-image-1123" /><br />
<img src="http://www.fuelyourinterface.com/files/sshot-600x375.png" alt="From Twitter user &lt;a href=&quot;http://twitter.com/jamboud&quot;&gt;@jamboud&lt;/a&gt;" title="sshot" width="600" height="375" class="size-medium wp-image-1114" /><br />
Thanks to <a href="http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/">this blog post full of awesome scripts for Geektool</a> and a <a href="http://www.flickr.com/search/?q=geektool">quick Flickr search</a> for the first several of those shots, and my friend <a href="http://www.twitter.com/jamboud/">@JamBoud</a> for the last one.</p>
<p>There&#8217;s a ton of these little applications floating around to change up your desktop. Check out <a href="http://bowtieapp.com/">Bowtie</a> for iTunes, <a href="http://www.bresink.com/osx/TinkerTool.html">TinkerTool</a> for a bunch of cool hidden preference tweaking for things like shifting your dock around from it&#8217;s normal centered position.</p>
<p>This doesn&#8217;t even touch the surface, but I found this stuff over the course of the past few days and thought it way too interesting to not share.</p>
<h3>A cool idea</h3>
<p>Nerdtool actually allows you to use a snippet of a website as part of your background. As I was looking through the program, I thought of a cool idea for those of you who have a domain and hosting; with a little bit of time and work, you could set up your own little networking, blogging, or RSS home right in your &#8220;wallpaper&#8221;.</p>
<p>So what have you done with your desktop? Show us by posting in the <a href="http://www.flickr.com/groups/fuelyourinterface/pool/">FYI Flickr group</a>!</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=tRrlgb8_Gjc:8wxZJALOnXE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=tRrlgb8_Gjc:8wxZJALOnXE:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=tRrlgb8_Gjc:8wxZJALOnXE:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=tRrlgb8_Gjc:8wxZJALOnXE:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=tRrlgb8_Gjc:8wxZJALOnXE:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=tRrlgb8_Gjc:8wxZJALOnXE:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=tRrlgb8_Gjc:8wxZJALOnXE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=tRrlgb8_Gjc:8wxZJALOnXE:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=tRrlgb8_Gjc:8wxZJALOnXE:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=tRrlgb8_Gjc:8wxZJALOnXE:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/making-your-desktop-look-awesome-again/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Best of 2009 in the UI/UX Industry</title>
		<link>http://www.fuelyourinterface.com/best-of-2009/</link>
		<comments>http://www.fuelyourinterface.com/best-of-2009/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 11:00:18 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Discussions]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[best of 2009]]></category>
		<category><![CDATA[UI/UX industry]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1046</guid>
		<description><![CDATA[There&#8217;s no doubt that 2009 was the year of Social Media. Just look  at this Top 9 of 2009 list. It&#8217;s dominated by Interface and experience improvements for the topic.  There were so many to choose from but we could only pick 9. I mean come on,  Top 14 of 2009? Seems a little odd, [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>There&#8217;s no doubt that 2009 was the year of Social Media. Just look  at this Top 9 of 2009 list. It&#8217;s dominated by Interface and experience improvements for the topic.  There were so many to choose from but we could only pick 9. I mean come on,  Top 14 of 2009? Seems a little odd, huh? Anyway, without further ado, here are the <strong>Top 9 UI Enhancements That Improved User Experience in 2009</strong>!<br />
<a href="http://www.dropbox.com"><br />
</a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"> </a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"> </a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"> </a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"> </a></p>
<p><a href="http://www.dropbox.com"></a></p>
<p><a href="http://www.dropbox.com"> </a></p>
<p><a href="http://www.dropbox.com"></p>
<h2>9) Dropbox</h2>
<p></a></p>
<p><a href="http://www.dropbox.com"> <img class="alignnone size-full wp-image-1047" title="dbox" src="http://www.fuelyourinterface.com/files/dbox.jpg" alt="dbox" width="600" height="320" /><br />
</a><br />
Whether you are a light user wanting to transfer your twenty-something kilobyte documents between computers across town, or you run a multi-national business and want to transfer large presentations, video files, and many other things between you and hundreds of co-workers, Dropbox has an account for you. It&#8217;s like a jump drive that gets to where you&#8217;re going before you do&#8230; and also, doesn&#8217;t ever take up space on your keychain. Oh, did we mention it has a mobile interface <em>and</em> a dedicated iPhone application? There&#8217;s way too much to say about Dropbox. Just go check it out <a href="http://www.dropbox.com">here</a>.</p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"><br />
</a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"> </a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"> </a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"> </a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"> </a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"> </a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"></p>
<h2>8) Twitter Lists</h2>
<p></a></p>
<p><a href="http://help.twitter.com/forums/10711/entries/76460"><img class="alignnone size-full wp-image-1054" title="twitterlist" src="http://www.fuelyourinterface.com/files/twitterlist.jpg" alt="twitterlist" width="600" height="320" /><br />
</a><br />
It&#8217;s pretty obvious how big of an impact Twitter has had on the world of Social Media, and therefore the entire web, and therefore interface design. Twitter began this year, however, with some experimental things (a la Google); one of these experiments is Twitter Lists. Obviously, because of the immense number of people who tweet daily, you can quickly end up with quite a few folks on your Follow list. How do you keep track of them? Some apps implemented lists before Twitter finally caught on. And, of course, because Twitter now supports lists, they are going to be a lot more functional (and universal) for Twitter users. Check it out <a href="http://help.twitter.com/forums/10711/entries/76460">here</a>.</p>
<p><a href="http://www.facebook.com"><br />
</a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"> </a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"> </a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"> </a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"> </a></p>
<p><a href="http://www.facebook.com"></a></p>
<p><a href="http://www.facebook.com"> </a></p>
<p><a href="http://www.facebook.com"></p>
<h2>7) Facebook iPhone app v1 and v2, Facebook Realtime updates</h2>
<p></a></p>
<p><a href="http://www.facebook.com"><img class="alignnone size-full wp-image-1055" title="facebook" src="http://www.fuelyourinterface.com/files/facebook.jpg" alt="facebook" width="600" height="320" /><br />
</a><br />
Everyone has wasted time on Facebook. If you haven&#8217;t, then maybe now is a good time to start. Why, you ask? Well, instead of wasting time pressing the refresh button, you now can waste time stalking your old classmates from &#8216;95. Or, perhaps you just want to watch the feed, as if it were a tv show. Thanks to Facebook implementing real time updates, you can do that. Thanks for making us more productive at being less productive, Facebook!</p>
<p>Also, don&#8217;t forget those wonderful Facebook iPhone applications. Not only are we more productive at wasting time when we&#8217;re supposed to be finishing up some spreadsheet or another&#8230; we also are able to have Facebook Chat at our fingertips while we drive! But seriously&#8230; Facebook really has taken some leaps and bounds in making the world more connected this year by changing the way we see the dynamic abilities of Social Media.</p>
<p><a href="http://wave.google.com"><br />
</a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"> </a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"> </a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"> </a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"> </a></p>
<p><a href="http://wave.google.com"></a></p>
<p><a href="http://wave.google.com"> </a></p>
<p><a href="http://wave.google.com"></p>
<h2>6) Google Wave</h2>
<p></a></p>
<p><a href="http://wave.google.com"><img class="alignnone size-full wp-image-1059" title="wavelogovig" src="http://www.fuelyourinterface.com/files/wavelogovig.jpg" alt="wavelogovig" width="600" height="320" /></a><br />
If you haven&#8217;t watched Google&#8217;s super-long introduction video to Google Wave, you can do so <a href="http://wave.google.com/help/wave/about.html#video">here</a>. That will tell you a lot of the details&#8230; but even Google doesn&#8217;t tell you everything in that video. The truth of the matter is, Google Wave&#8217;s long-anticipated arrival will slowly but (almost) surely become a big player in the game of collaboration and Social Media, as well as blogging, in the future. As it is currently in beta (what else do you expect from Google?), not everyone can use it just yet. Remind you of any other successful social networking stories? (Okay, in case you didn&#8217;t know&#8230; Facebook was limited to college students until 2005, and only in 2006 was it opened to anyone and everyone.) Get to Waving, folks &#8211; there&#8217;s a LOT of capability here, and the more people who use it, the more powerful and useful the platform will become.</p>
<p><a><br />
</a></p>
<p><a></a></p>
<p><a></a></p>
<p><a> </a></p>
<p><a></a></p>
<p><a> </a></p>
<p><a></a></p>
<p><a></a></p>
<p><a></a></p>
<p><a> </a></p>
<p><a></a></p>
<p><a> </a></p>
<p><a></a></p>
<p><a> </a></p>
<p><a></p>
<h2>5) iPhone OS 3.0 Cut/Copy/Paste</h2>
<p></a></p>
<p><a><img class="alignnone size-full wp-image-1068" title="iphoneccp" src="http://www.fuelyourinterface.com/files/iphoneccp.jpg" alt="iphoneccp" width="600" height="320" /><br />
</a><br />
For those of you who are iPhone users, you know why this is such a big deal. It made the list not because it&#8217;s groundbreaking or because it changed any game. No, it just changed hundreds of thousands of users&#8217; experiences. Why is this genius (and, make no mistake, it IS genius)? Well, we can&#8217;t promise these things, but it&#8217;s quite likely that Apple knew from the beginning just how badly people would want this feature. So customers sit and wait on a &#8220;big feature&#8221; of iPhone OS 3.0, which, turns out, Apple knew how to do a long time ago. So a brand new selling point of the iPhone comes out of what is, for other phones, just a normal feature. This is just another great example of why Apple easily garners lasting brand loyalty that is built on excitement and buzz. I mean, what iPhone user <em>didn&#8217;t</em> get excited when they heard about cut/copy/paste for iPhone? Exactly.</p>
<p><a href="http://cotweet.com"><br />
</a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"> </a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"> </a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"> </a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"> </a></p>
<p><a href="http://cotweet.com"></a></p>
<p><a href="http://cotweet.com"> </a></p>
<p><a href="http://cotweet.com"></p>
<h2>4) CoTweet</h2>
<p></a></p>
<p><a href="http://cotweet.com"><img class="alignnone size-full wp-image-1063" title="cotweetvig" src="http://www.fuelyourinterface.com/files/cotweetvig.jpg" alt="cotweetvig" width="600" height="320" /><br />
</a><br />
CoTweet is a platform that helps companies reach and engage customers using Twitter. Or so it says on their homepage. And yet, it&#8217;s so much more! Do you have multiple Twitter accounts? Or one account that you need multiple people to post to? CoTweet is the tool for you. A gorgeous web-app in the purest sense. You can schedule your tweets to post at a later date, assign DMs to users, automatically repost your tweets to dozens of other social network sites like, Facebook, LinkedIn and MySpace, monitor keywords and trends and even click tracking via Bit.ly integration. The list goes on and on! But don&#8217;t take our word for it, one look at the <a href="http://cotweet.com/features">features page</a> and you will easily see how this interface makes the list.<br />
<a href="http://www.windows.com/windows7"><br />
</a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"> </a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"> </a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"> </a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"> </a></p>
<p><a href="http://www.windows.com/windows7"></a></p>
<p><a href="http://www.windows.com/windows7"> </a></p>
<p><a href="http://www.windows.com/windows7"></p>
<h2>3) Windows 7</h2>
<p></a></p>
<p><a href="http://www.windows.com/windows7"><img class="alignnone size-full wp-image-1065" title="windows7" src="http://www.fuelyourinterface.com/files/windows7.jpg" alt="windows7" width="600" height="320" /><br />
</a><br />
Alright, we lay down arms for a minute here to recognize the beauty of the new operating system from Windows. Sure, the editor of FYI (that&#8217;d be me) owns and uses two Apple computers, but for Christmas this year, it may just be time to spring for a dual-boot endeavor. Why? Well, there are simply a litany of really cool interface enhancements to make everyday workflow incredibly easier. It&#8217;s the little things, folks, and Microsoft has (finally) learned how little things can stack up to be quite huge. (For instance, the <a href="http://www.microsoft.com/windows/windows-7/features/snap.aspx">&#8220;Snap&#8221;</a> feature may just make us Mac fanboys a little&#8230; territorial. Jealous is a strong word&#8230;)<br />
<a href="http://www.apple.com/snowleopard"><br />
</a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"> </a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"> </a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"> </a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"> </a></p>
<p><a href="http://www.apple.com/snowleopard"></a></p>
<p><a href="http://www.apple.com/snowleopard"> </a></p>
<p><a href="http://www.apple.com/snowleopard"></p>
<h2>2) OS X Snow Leopard</h2>
<p></a></p>
<p><a href="http://www.apple.com/snowleopard"><img class="alignnone size-full wp-image-1066" title="snowleopard" src="http://www.fuelyourinterface.com/files/snowleopard.jpg" alt="snowleopard" width="600" height="320" /><br />
</a><br />
Apple&#8217;s Snow Leopard fixes a lot of usability issues that have been around since Leopard (10.5). Stacks works better, Spaces and Exposé&#8230; oh, and did we mention the fact that it upgrades the entire operating system and all Apple applications to 64-bit? Just you all wait until CS5 comes out&#8230; if it finally supports 64-bit, it is expected that Mac users will see some enjoyable speed increases. The usability of every day processes has been laid out wonderfully by Snow Leopard, both for now and for the future.</p>
<p>There are also a lot of brand new features Apple introduced (for instance, GPU accelerated processing).</p>
<p><a href="http://www.meebo.com"><br />
</a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"> </a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"> </a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"> </a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"> </a></p>
<p><a href="http://www.meebo.com"></a></p>
<p><a href="http://www.meebo.com"> </a></p>
<p><a href="http://www.meebo.com"></p>
<h2>1) Meebo Sharing tool</h2>
<p></a></p>
<p><a href="http://www.meebo.com"><img class="alignnone size-full wp-image-1073" title="meebo" src="http://www.fuelyourinterface.com/files/meebo.jpg" alt="meebo" width="600" height="320" /><br />
</a><br />
This tool can be seen in use on <a href="http://www.abduzeedo.com">Abduzeedo</a>; basically it allows all of these wonderful social networking tools that work on their own (Facebook, Twitter, etc.) to be integrated together, right on a website, such as Abduzeedo. This tool is simply fantastic for bringing it all together; talk about usability! Not only can you drag photos straight from the page to the sharing tool, but you can also traverse across multiple chat clients (that&#8217;s what Meebo does best anyway). This made the top of our list for many reasons. One, it&#8217;s extremely powerful and time saving; instead of popping open seven tabs for each and every sharing service, you just drag and drop. It just simply rocks. And we like things (and people) that rock. It&#8217;s pretty simple, don&#8217;t you think? <del datetime="2009-12-22T01:44:09+00:00">The only negative points so far is that it&#8217;s not available to the public just yet&#8230; hearsay says 2010 will bring it to your domains.</del> <strong>UPDATE:</strong> Thanks to one of the comments below from Meebo for this update &#8211; there is now a version of the Meebo sharing bar available! Check it out here: <a href="http://bar.meebo.com">http://bar.meebo.com</a></p>
<h3>Now, what are your top picks of 2009?</h3>
<h2>WANT MORE?</h2>
<p><a href="http://droplr.com/3Hbt"><img class="alignleft size-full wp-image-1689" title="network-best-of" src="http://www.fuelyourapps.com/files/network-best-of.png" alt="network-best-of" width="600" height="137" /></a></p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=7jiW_B6mHXo:7OUPaJLW8-I:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=7jiW_B6mHXo:7OUPaJLW8-I:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=7jiW_B6mHXo:7OUPaJLW8-I:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=7jiW_B6mHXo:7OUPaJLW8-I:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=7jiW_B6mHXo:7OUPaJLW8-I:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=7jiW_B6mHXo:7OUPaJLW8-I:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=7jiW_B6mHXo:7OUPaJLW8-I:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=7jiW_B6mHXo:7OUPaJLW8-I:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=7jiW_B6mHXo:7OUPaJLW8-I:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=7jiW_B6mHXo:7OUPaJLW8-I:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/best-of-2009/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Wanna kick some interface designing butt? Hit the stacks.</title>
		<link>http://www.fuelyourinterface.com/wanna-kick-some-interface-designing-butt-hit-the-stacks/</link>
		<comments>http://www.fuelyourinterface.com/wanna-kick-some-interface-designing-butt-hit-the-stacks/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 13:00:54 +0000</pubDate>
		<dc:creator>amyhoy</dc:creator>
				<category><![CDATA[Discussions]]></category>
		<category><![CDATA[Learn]]></category>
		<category><![CDATA[Practices]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1085</guid>
		<description><![CDATA[Hi there. I&#8217;m Amy. I design interactive experiences that are so unexpectedly nice, people write me to tell me that they wish they had a need for my software, just so they could have an excuse to use it.
I&#8217;m no superhero, I just have a secret weapon. Which I&#8217;m going to share with you, right [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>Hi there. I&#8217;m Amy. I design <a href="http://twistori.com"><span style="text-decoration: none">interactive</span></a> <a href="http://letsfreckle.com"><span style="text-decoration: none">experiences</span></a> that are so unexpectedly nice, people write me to tell me that they wish they had a need for my software, just so they could have an excuse to use it.</p>
<p>I&#8217;m no superhero, I just have a secret weapon. Which I&#8217;m going to share with you, right now.</p>
<p>Let me step out of the usual coy article-writing character, and say it up front:</p>
<p><strong>You wanna kick butt? Read a lot of research papers.</strong><br />
<img class="alignnone size-full wp-image-1099" src="http://www.fuelyourinterface.com/files/stacks.jpg" alt="stacks" width="600" height="320" /><br />
Yes, research papers. The <em>publish</em> half of publish or perish. Dry, academic, boring, inaccessible (and sometimes expensive) research papers.</p>
<p>They&#8217;re simply a gold mine.</p>
<p>They will make you smarter, better, and yes, even hotter (when your eyes start going bad from all the tiny type, you&#8217;ll resort to getting yourself a sexy monocle).</p>
<p>I know, you&#8217;re thinking that this is the very definition of <a href="http://dictionary.reference.com/browse/hyperbole"><em>hyperbole</em></a>. But stick with me til the end of this article. I obviously can&#8217;t force you to read citations til your eyes blur, but I would bet you money I can convince you that you should.</p>
<p><strong>We all agree that great interaction design is important, or we wouldn&#8217;t be here.</strong></p>
<p>So, let&#8217;s talk about interaction for a moment.</p>
<p>Everybody says that excellent interface is one of the big reasons Google wins. It&#8217;s so simple; it just works; it&#8217;s a big friendly question box, just sitting there, waiting to help us. And, of course, Google was founded by two very ambitious PhD students.</p>
<p>So, if some research came out that totally demolished our view of <em>how</em> people search for information, you&#8217;d think that Google would be first on the scene. Right?</p>
<p>Sadly, wrong.</p>
<p>Let&#8217;s take a look at what they&#8217;re missing out on.</p>
<h2>The Berry-Picking Model of Search</h2>
<p>According to Marcia J. Bates, graduate researcher in the Library and Information Sciences department of UCLA, our existing models of search are dead wrong.</p>
<p>She proposes a different model, more accurate by her measure (and also by mine). She calls it <em>berry-picking</em>.</p>
<p>In reality, she says, users almost never find the desired result on the first try. This isn&#8217;t just because they don&#8217;t enter the correct terms. Their very idea of what they are looking for evolves over multiple searches and their desired documents extend across multiple searches, too.</p>
<p>Imagine a little girl tra-la-la-ing through the forest as she picks berries. She stops at <em>this</em> berry bush, and <em>that</em> berry bush, then returning to the first because it just <em>looks so good</em>, taking some berries from each. Then you pretty much have got it down.<br />
<img class="alignnone size-full wp-image-1100" src="http://www.fuelyourinterface.com/files/berrypicking.jpg" alt="berrypicking" width="600" height="320" /><br />
Imagine, then, a search engine that helped you when you searched like that—the natural way to search. It would show you your old search terms, so you could revisit them, in case your newest forays were unproductive. You could &#8220;pin&#8221; results to some part of the page for later, in case you found nothing better, or wanted them <em>in addition</em> to the new goodies you found.</p>
<h3>Wouldn&#8217;t that be great?</h3>
<p>Doesn&#8217;t that sound exactly like the kind of thing Google should be doing, to push the boundaries of search engine design?</p>
<p>Or, if not them, then a competitor trying to get a leg up?</p>
<p><strong>Now: I want you to guess when this research paper came out.</strong></p>
<p>I&#8217;ve never seen any of these feature ideas implemented on any search engine, ever. Have you? So this paper must be really cutting-edge, right?</p>
<p>Actually, it wasn&#8217;t even published in this decade. Or this century. In fact, Marcia Bates published this remarkable paper in 1989.</p>
<p><strong>You could be first on the scene with a practical application.</strong></p>
<p>There are tons of research papers out there, like this one, that are just ripe for the picking (no pun intended).</p>
<p>Thanks to the publishing model of science, there are many people who spend their entire academic careers doing research in user interface-related topics. They don&#8217;t typically develop or release software. They often don&#8217;t even offer specific feature suggestions. But they do describe reality, and tests they made, and what does and doesn&#8217;t work.</p>
<p>You can read their papers and come up with the features and design them yourself.</p>
<p><strong>Convinced yet?</strong></p>
<h2>How to get started</h2>
<p>There are four major sources for computer-related research papers online:</p>
<ol>
<li><strong>The General Web</strong><br />
Many researchers and/or their universities publish their papers online for free. If you read papers, or books, that cite papers, you can often find their citation lists online for free. You can find Marcia J. Bates&#8217; paper,<strong><a href="http://www.gseis.ucla.edu/faculty/bates/berrypicking.html">THE DESIGN OF BROWSING AND BERRYPICKING TECHNIQUES FOR THE ONLINE SEARCH INTERFACE</a></strong>for free. I recommend it.</li>
<li><strong><a href="http://portal.acm.org/">The ACM</a></strong><br />
The Association for Computing Machinery offers a yearly subscription of about $200 for anybody off the street, and this gives you access to a large portion of their online library. It dates back decades and is fairly searchable. You can also buy individual papers instead of a membership.</li>
<li><strong>Other online services</strong><br />
The other two major sources I&#8217;d recommend are <a href="http://www.questia.com/Index.jsp">Questia</a> and <a href="http://www.highbeam.com/">Highbeam</a>, although not in any specific order. They are not as affordable or comprehensive as the ACM, but the ACM does not have everything.</li>
<li><strong>Books</strong><br />
There are also many available books that compile industry research papers. Some analyze a whole body of papers so you don&#8217;t have to read and digest them yourself.</li>
</ol>
<h3>One more easy place to get started</h3>
<p>If you&#8217;re new to research, I can recommend no better place to start than the personal information textbook <strong>Keeping Things Found</strong>. The author talks about berry-picking, among other things. (It&#8217;s not a bad read, either.)</p>
<h2>In conclusion&#8230;</h2>
<p>Most user interaction professionals never bother to read a single research paper. Those who do, have a huge leg up on the competition. And a greater chance of making happier users.</p>
<p>Research papers are available, they give you a professional &amp; competitive edge, and they&#8217;re not terribly expensive (sometimes they&#8217;re free). Usability researchers even tend to write better than, say, philosophy PhD&#8217;s.</p>
<p>You&#8217;ve got nothing to lose, and everything to gain.</p>
<p>It&#8217;s time to kick some interface designing butt! Now, go read.</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DJDjzH2uL_c:7nZwwsRbCP4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DJDjzH2uL_c:7nZwwsRbCP4:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DJDjzH2uL_c:7nZwwsRbCP4:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DJDjzH2uL_c:7nZwwsRbCP4:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DJDjzH2uL_c:7nZwwsRbCP4:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DJDjzH2uL_c:7nZwwsRbCP4:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DJDjzH2uL_c:7nZwwsRbCP4:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DJDjzH2uL_c:7nZwwsRbCP4:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DJDjzH2uL_c:7nZwwsRbCP4:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DJDjzH2uL_c:7nZwwsRbCP4:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/wanna-kick-some-interface-designing-butt-hit-the-stacks/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Take a Breath Already!</title>
		<link>http://www.fuelyourinterface.com/take-a-breath-already/</link>
		<comments>http://www.fuelyourinterface.com/take-a-breath-already/#comments</comments>
		<pubDate>Thu, 10 Dec 2009 13:21:07 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[UI Design]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1029</guid>
		<description><![CDATA[
One very important concept in any area of design, including interface design, is that of space. What is space?
Well, obviously we aren&#8217;t talking about needing any kind of extended astronomical knowledge; space is the area with which we choose to do things. Today we will talk about this area in many different ways.
White space
White space [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.fuelyourinterface.com/files/taba.jpg" alt="taba" title="taba" width="600" height="225" class="alignnone size-full wp-image-1039" /><br />
One very important concept in any area of design, including interface design, is that of space. What is space?</p>
<p>Well, obviously we aren&#8217;t talking about needing any kind of extended astronomical knowledge; space is the area with which we choose to do things. Today we will talk about this area in many different ways.</p>
<h3>White space</h3>
<p>White space is the area within a design where there is no imagery or text; it is instead a solid color (more often than not it is actually white). White space is an essential part of any design. Our eyes naturally desire balance; but balance doesn&#8217;t mean a fifty-fifty draw of color space &#8220;A&#8221; versus color space &#8220;B&#8221;. Rather, it is a psychological interpretation of a physical visualization. (Don&#8217;t worry&#8230; it&#8217;s not as confusing as it sounds.) The use of white space allows for a place for your eyes to move in order to escape the text; this makes the text itself a much more effective means of communicating.</p>
<h3>Huh?</h3>
<p>Okay, so if you don&#8217;t understand, white space is essentially the &#8220;breathing room&#8221; in your design. If it looks crowded, well&#8230; it probably is. The way our minds perceive things is different from the way we might calculate them. Reason might tell us that as long as the letter isn&#8217;t misconstrued by another color object, too small, or too large, then it is readable. But as we have learned in the past, design itself is not a <em>science</em>; rather, it is an art that observes science and rationality within the process of execution.</p>
<h3>What does this mean for me?</h3>
<p>Essentially, it means think about your design and the amount of resting space you have. Since we are talking about interfaces, obviously you should go through the process of using the interface multiple times; if anything stands in your way of using the interface, it&#8217;s probably time to shift some things around. Don&#8217;t be afraid to space out your body copy and headers. Use this breathing room to section different portions off from other portions (for instance, navigation from content, and content from sidebar, or whatever is applicable).</p>
<p>On the other side of the coin, if the white space you are incorporating detracts from usability, it is probably time to reconsider; for instance, body copy line spacing shouldn&#8217;t be so large that you aren&#8217;t able to differentiate between a new paragraph and a new line. Use white space, as we have already said, to your <em>advantage</em>, not for your to-do checklist.</p>
<h3>Rule of Thirds</h3>
<p>One easy way to ensure a good use of white space is by employing the design principles of composition; allow your design to follow the rule of thirds or the <a href="http://en.wikipedia.org/wiki/Golden_ratio">golden ratio</a>, both of which are very common and effective design practices that apply a little bit of science to the art. The rule of thirds splits the composition into nine equal parts (separated by two horizontal and two vertical lines). The golden ratio is based on many historically congruent sources, including the human body; it has been used for the design of sculpture and the progression of many types of art.</p>
<h3>Read the White Space</h3>
<p>Of course we have talked about visual white space; but what about textual white space? When people read, they look for resting points in the dialogue. This, in a way, can be considered white space. Be sure to allow your creative vocabulary its time to shimmer <strong>AND</strong> its time to stay sheathed. Not everyone necessarily appreciates your large vocabulary, much less do they care to take the time to read your seventeen-syllable words and overly-complex sentences. Take a breath! Haven&#8217;t we already said this?</p>
<h2>If all else fails&#8230;</h2>
<p>Sometimes in design, we realize that every tip we heard about &#8220;best practices&#8221; doesn&#8217;t apply to a particular job. As much as it pains me to say it, there are times when white space just simply doesn&#8217;t have its place in the design (newspapers are a perfect example for those of you print and page layout designers). Consider the psychological implications of the design, always. Understanding your audience is the first step to success, and ultimately is the most important concept in interface design.</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=MESQXOGd4_Q:a9vJGJCWvw4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=MESQXOGd4_Q:a9vJGJCWvw4:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=MESQXOGd4_Q:a9vJGJCWvw4:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=MESQXOGd4_Q:a9vJGJCWvw4:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=MESQXOGd4_Q:a9vJGJCWvw4:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=MESQXOGd4_Q:a9vJGJCWvw4:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=MESQXOGd4_Q:a9vJGJCWvw4:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=MESQXOGd4_Q:a9vJGJCWvw4:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=MESQXOGd4_Q:a9vJGJCWvw4:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=MESQXOGd4_Q:a9vJGJCWvw4:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/take-a-breath-already/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Why Making Everyone Happy Is a Bad Idea</title>
		<link>http://www.fuelyourinterface.com/why-making-everyone-happy-is-a-bad-idea/</link>
		<comments>http://www.fuelyourinterface.com/why-making-everyone-happy-is-a-bad-idea/#comments</comments>
		<pubDate>Mon, 30 Nov 2009 11:44:36 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Discussions]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=1004</guid>
		<description><![CDATA[
Big Goal Number Two
As an interface designer, you are often given assignments with one big goal in mind: make this interface as usable as possible.
Now, ancillary to this goal are a lot of &#8220;mini-goals&#8221;, such as maintaining a holistically congruent branding image, communicating certain messages, conveying certain feelings, developing for certain platforms, and the list [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.fuelyourinterface.com/files/happyBanner31.jpg" alt="happyBanner3" title="happyBanner3" width="600" height="236" class="alignnone size-full wp-image-1027" /></p>
<h2>Big Goal Number Two</h2>
<p>As an interface designer, you are often given assignments with one big goal in mind: make this interface as usable as possible.</p>
<p>Now, ancillary to this goal are a lot of &#8220;mini-goals&#8221;, such as maintaining a holistically congruent branding image, communicating certain messages, conveying certain feelings, developing for certain platforms, and the list goes on.</p>
<p>But what if we have been missing out on <strong>big goal number two?</strong></p>
<p>Let&#8217;s take a step back, as many of us probably often forget to do, and look at the reality of our situation.</p>
<p>On a daily basis, we as interface designers don&#8217;t have the task of designing an interface that targets everyone in the entire world (such as Google, eBay, Amazon, or Yahoo). Instead, we are given a <em>target audience</em> to build an interface for. This usually takes a backseat as one of our mini-goals, but we need to change our thinking. This needs to become our <strong>Big Goal Number Two</strong>.</p>
<p>&#8220;Target audience&#8221; is a pretty familiar term for most interface designers. Most of us know that we have to understand demographics and psychographics of the target audience, and study them in both quantitative and qualitative ways. We know that we should take into consideration all of the data we gather about the target audience in order to build our specific interface, and so on and so forth&#8230;</p>
<h2>The Principle of Disagreeable Design</h2>
<p>What we often forget to realize is that while we are designing <em>for</em> a specific group of people, we are effectively designing <em><strong>against</strong></em> everyone who is left over. What this means is that you are no longer designing with the &#8220;accidental audience&#8221; in the back of your mind. The target audience becomes the only focus, and therefore you estrange the rest of the world. This is an important principle to understand, for one simple reason.</p>
<h2>Designing for an elite group is more effective!</h2>
<p>Okay, so of course, you build your rules and boundaries around that ever-so-important target audience. But without the Principle of Disagreeable Design, you wouldn&#8217;t really be able to commit to that group completely. You still employ your overarching &#8220;best practices&#8221; and ideas that are rooted in the status quo&#8217;s opinion of what is usable, &#8220;good&#8221; design, or any of a number of other adjectives we use to describe our somewhat shaky &#8220;objective&#8221; design standards. Sometimes these shaky standards are the cause for a compromise when it comes to Big Goal Number Two, and we don&#8217;t connect with our target audience as efficiently.</p>
<p>But what happens when you take a daring leap towards an elite group that rejects almost everyone in the whole world? In fact, it <em>DOES</em> reject everyone except your target audience (the elite group)? That same daring leap that rejects an enormous number of people, as a tradeoff, very closely knits you as the communicator to your target audience.</p>
<p>That leap may be the difference that your interface needed to go from functional to <strong>awesome.</strong></p>
<p><strong>Note:</strong> I know what you&#8217;re thinking. Don&#8217;t take me out of context here and say that &#8220;that crazy editor at Fuel Your Interface is an interface-design-usability-relativist!&#8221; (Okay, let&#8217;s face it&#8230; none of us are <em>that</em> dramatic&#8230; I hope). Of course, there are almost always some things we retain as understood musts. For instance, text that is meant to be read must be <em>able</em> to be read. These are the obvious ideas.</p>
<h2>Why does this work?</h2>
<div id="attachment_1012" class="wp-caption alignnone" style="width: 610px"><a href="http://www.squidoo.com/tribesbook"><img src="http://www.fuelyourinterface.com/files/tribesBook.jpg" alt="Tribes, by Seth Godin; Published by Portfolio Hardcover, 2008" title="tribesBook" width="600" height="365" class="size-full wp-image-1012" /></a><p class="wp-caption-text">Tribes, by Seth Godin; Published by Portfolio Hardcover, 2008</p></div>
<h6></h6>
<p>Web marketing guru Seth Godin discusses this idea in his book, Tribes (check it out <a href="http://www.squidoo.com/tribesbook" target="blank">here</a>). Seth&#8217;s big idea is that everyone belongs to at least one tribe, and almost certainly to more than one tribe. Each of our tribes have distinguishing characteristics that set them apart from other tribes. These have been referred to as &#8220;sub-cultures&#8221;, &#8220;sects&#8221;, and, in our case, &#8220;target audiences.&#8221; What is it about your target audience tribe that sets them apart from every other tribe? What are their defining characteristics? Do they have quirks or a specific language and terminology that is unique to only them (can I get a shout out from the Star Trek fanatics!)? Do they have a corporate emotional connection to a certain object, animal, idea, or even person? Maybe they all wear a purple shirt on a certain day of the year, or perhaps they are committed to going environmentally &#8220;green&#8221;. Asking these questions will push you towards taking the leap that will knit you closer with your target audience (while unashamedly rejecting everyone else).</p>
<p>It works because this tribes psychology goes beyond the simple process of categorization of people. People find a sense of belonging within a tribe. If everyone was allowed to be a part of every tribe, there would be nothing special about being a part of it. So, tribes allow only those who subscribe to their particularities to &#8220;join,&#8221; though the process of joining is rarely formal.</p>
<p>So, in the same way, if everyone uses your interface, what&#8217;s so special about using your interface? Instead, very acutely pursue your target audience. This will, in the end, be the most effective way to achieve BOTH of your big goals.</p>
<h2>Conclusion</h2>
<p>In conclusion, it should be noted that this in no way means that you should reject outsiders <em>directly</em> or <em>textually</em>; this article, rather, is to help you realize the value in rejecting traditional practice if it means a more accurate and efficient communication to the people that matter: <strong>your target audience</strong>. They are by far the most important objective, even if focusing on them means that you end up estranging the &#8220;accidental audience&#8221;.</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZqM0MV4BjKk:XBC0McZUHkM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZqM0MV4BjKk:XBC0McZUHkM:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZqM0MV4BjKk:XBC0McZUHkM:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZqM0MV4BjKk:XBC0McZUHkM:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZqM0MV4BjKk:XBC0McZUHkM:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZqM0MV4BjKk:XBC0McZUHkM:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZqM0MV4BjKk:XBC0McZUHkM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZqM0MV4BjKk:XBC0McZUHkM:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ZqM0MV4BjKk:XBC0McZUHkM:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ZqM0MV4BjKk:XBC0McZUHkM:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/why-making-everyone-happy-is-a-bad-idea/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>A Thanks to You: 4 Google Wave Invites!</title>
		<link>http://www.fuelyourinterface.com/a-thanks-to-you-4-google-wave-invites/</link>
		<comments>http://www.fuelyourinterface.com/a-thanks-to-you-4-google-wave-invites/#comments</comments>
		<pubDate>Thu, 26 Nov 2009 16:35:45 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Discussions]]></category>
		<category><![CDATA[Freebies]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=999</guid>
		<description><![CDATA[
http://www.flickr.com/photos/benimoto/ / CC BY 2.0
It&#8217;s Thanksgiving. A day to eat turkey and pie. A day to watch a parade, and then football. A day to think about the Mayflower, if you feel like it. A day to&#8230; give thanks. And I, as editor, am very thankful for the readers of FYI. That&#8217;s why I am [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.fuelyourinterface.com/files/hthanksgiving.jpg" alt="hthanksgiving" title="hthanksgiving" width="600" height="230" class="aligncenter size-full wp-image-1002" /></p>
<div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/benimoto/2109973292/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/benimoto/">http://www.flickr.com/photos/benimoto/</a> / <a rel="license" href="http://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a></div>
<p>It&#8217;s Thanksgiving. A day to eat turkey and pie. A day to watch a parade, and then football. A day to think about the Mayflower, if you feel like it. A day to&#8230; give thanks. And I, as editor, am very thankful for the readers of FYI. <strong>That&#8217;s why I am giving out four Google Wave invitations to four of you.</strong></p>
<p>The selection process will be random as always, but to be eligible, you must either add <a href="http://www.twitter.com/fuelinterface">@fuelinterface</a> on Twitter and tweet an @reply with the following message: &#8220;@fuelinterface A Thanksgiving Google Wave invite would be awesome!&#8221; (or something along those lines), or comment here on this post.</p>
<p>Thank you all for reading, commenting, and tweeting around with us!</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DGWXNXHiGXg:Y6OghT6TUJc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DGWXNXHiGXg:Y6OghT6TUJc:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DGWXNXHiGXg:Y6OghT6TUJc:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DGWXNXHiGXg:Y6OghT6TUJc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DGWXNXHiGXg:Y6OghT6TUJc:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DGWXNXHiGXg:Y6OghT6TUJc:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DGWXNXHiGXg:Y6OghT6TUJc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DGWXNXHiGXg:Y6OghT6TUJc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DGWXNXHiGXg:Y6OghT6TUJc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DGWXNXHiGXg:Y6OghT6TUJc:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/a-thanks-to-you-4-google-wave-invites/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>3MT – Working Better With Smart Objects</title>
		<link>http://www.fuelyourinterface.com/3mt-working-better-with-smart-objects/</link>
		<comments>http://www.fuelyourinterface.com/3mt-working-better-with-smart-objects/#comments</comments>
		<pubDate>Wed, 25 Nov 2009 13:00:23 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Learn]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=967</guid>
		<description><![CDATA[Today&#8217;s three-minute-tip will again revolve around Photoshop. We will take a look at a few ways of working better with smart objects. For this tip, you will need both Illustrator and Photoshop. I&#8217;ll be working in CS4.

Vector vs. Raster
A smart object is basically a vector object inside Photoshop&#8217;s (mostly) raster world. If you don&#8217;t know [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>Today&#8217;s three-minute-tip will again revolve around Photoshop. We will take a look at a few ways of working better with smart objects. For this tip, you will need both Illustrator and Photoshop. I&#8217;ll be working in CS4.<br />
<img src="http://www.fuelyourinterface.com/files/3mt1.jpg" alt="3mt" title="3mt" width="600" height="340" class="aligncenter size-full wp-image-996" /></p>
<h2>Vector vs. Raster</h2>
<p>A smart object is basically a vector object inside Photoshop&#8217;s (mostly) raster world. If you don&#8217;t know the difference between vector and raster, a basic rundown goes like this;</p>
<p><strong>Vector images</strong> are created by using calculated lines. This essentially means that the curves, shapes, lines, et cetera are displayed as a result of a lot of calculations on the part of the program you are using (in this case, Illustrator and Photoshop). It&#8217;s kind of like an extended version of what you learned with point-plotting, sine waves, and function graphs in geometry, mixed with colors and transparency values.</p>
<p><strong>Raster images</strong> are basically plots of color on a pixel map. This means that each pixel in your image is assigned a color, and depending on what kind of file, sometimes an alpha value.</p>
<p><strong>If this still doesn&#8217;t make sense,</strong> the best thing to remember is basically that vector images can be blown up or shrunk to any size and will not lose quality; a raster image will lose quality if blown-up above its original size. Vector, thus, is the preferred format for logo design and typographically based design. However, vector images are somewhat limited in their ability to be manipulated in Photoshop. Be sure to check out the last tip in the article for a possible workflow-based solution to this problem!</p>
<h2>What is a smart object?</h2>
<p>A smart object in Photoshop can be one of two things.</p>
<ol>
<li>A version of a raster layer that doesn&#8217;t lose quality when it is transformed down and then back up</li>
<li>One or multiple vector lines/shapes/information</li>
</ol>
<p>Today, we will only be dealing with the second variety.</p>
<p>Traditionally, vector images are created inside Illustrator; however, as many designers have found, it helps to be able to move from Illustrator to Photoshop fluidly. One of the easiest ways to do this is by using &#8211; you guessed it &#8211; copy and paste.</p>
<p>So, say we need a striped design we have created inside Illustrator for a design we&#8217;d like to finalize in Photoshop. What is an easy way to get it into Photoshop? Cmd or Ctrl + C, of course! With the document open, copy either with the copy keyboard shortcut (Cmd or Ctrl + C) or by going to Edit > Copy.<br />
<img src="http://www.fuelyourinterface.com/files/originalIlly.png" alt="originalIlly" title="originalIlly" width="512" height="640" class="alignnone size-full wp-image-974" /></p>
<p>Switch to your active document in Photoshop and either use the keyboard shortcut for paste (Cmd or Ctrl + V) or choose Edit > Paste. You are given the option to paste with different forms. Smart Object is one of the choices. Make sure the radio button next to smart object is selected, and press OK.<br />
<img src="http://www.fuelyourinterface.com/files/pasteAs-600x507.png" alt="pasteAs" title="pasteAs" width="600" height="507" class="aligncenter size-medium wp-image-977" /></p>
<p>You then have the option of transforming the object in the same manner as you would if you chose Edit > Free Transform. Here, you can scale, skew, etc.<br />
<img src="http://www.fuelyourinterface.com/files/preTransform-600x511.png" alt="preTransform" title="preTransform" width="600" height="511" class="aligncenter size-medium wp-image-980" /></p>
<p>Once you have made any transformations you&#8217;d like to make, press Enter to accept the transformation. In your layers palette you will see a smart object layer.<br />
<img src="http://www.fuelyourinterface.com/files/postTransform-600x507.png" alt="postTransform" title="postTransform" width="600" height="507" class="aligncenter size-medium wp-image-979" /><br />
<img src="http://www.fuelyourinterface.com/files/layerSObject.png" alt="layerSObject" title="layerSObject" width="214" height="266" class="aligncenter size-full wp-image-973" /></p>
<p>If you decide later that you&#8217;d like to change something about the object, simply double-click the layer thumbnail. This will open an Illustrator editing window. Once you have made any changes you&#8217;d like to make, choose File > Save and exit the window.<br />
<img src="http://www.fuelyourinterface.com/files/postPasteEditing-600x640.png" alt="postPasteEditing" title="postPasteEditing" width="600" height="640" class="aligncenter size-medium wp-image-978" /></p>
<p>The Photoshop document will automatically reflect the changes.<br />
<img src="http://www.fuelyourinterface.com/files/afterEdit-600x508.png" alt="afterEdit" title="afterEdit" width="600" height="508" class="aligncenter size-medium wp-image-971" /></p>
<p><em>Tip: It helps to duplicate smart objects up front so that if you decide to use any kind of filters or warping on the layer that requires you to rasterize it, you will have a copy of the original vector object. An easy way to duplicate layers is to first select the layer you&#8217;d like to duplicate, then press Cmd or Ctrl + j. After doing this, you can place it in a folder, such as the &#8220;Originals&#8221; folder below, along with any other layers you&#8217;d like to preserve the original version of. This is mostly effective when using effects or filters that &#8220;destroy&#8221;, or change the value or location of, the actual pixels in the layer.</em><br />
<img src="http://www.fuelyourinterface.com/files/originalsExpanded.png" alt="originalsExpanded" title="originalsExpanded" width="327" height="353" class="aligncenter size-full wp-image-975" /></p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=dqYWH_gAfQE:iBgT3-NZIA8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=dqYWH_gAfQE:iBgT3-NZIA8:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=dqYWH_gAfQE:iBgT3-NZIA8:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=dqYWH_gAfQE:iBgT3-NZIA8:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=dqYWH_gAfQE:iBgT3-NZIA8:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=dqYWH_gAfQE:iBgT3-NZIA8:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=dqYWH_gAfQE:iBgT3-NZIA8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=dqYWH_gAfQE:iBgT3-NZIA8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=dqYWH_gAfQE:iBgT3-NZIA8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=dqYWH_gAfQE:iBgT3-NZIA8:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/3mt-working-better-with-smart-objects/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Tongue-in-Cheek is Serious Business</title>
		<link>http://www.fuelyourinterface.com/tongue-in-cheek-is-serious-business/</link>
		<comments>http://www.fuelyourinterface.com/tongue-in-cheek-is-serious-business/#comments</comments>
		<pubDate>Fri, 20 Nov 2009 14:53:47 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Trends]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=946</guid>
		<description><![CDATA[We can all enjoy a good conversation. Many companies, including &#8220;big business,&#8221; have learned this and, as of late, have implemented it more than ever before. The truth of the matter is that people are more willing to trust a laid-back, conversational person than they are the stiff-necked (ex-)marketing guru. We can see this conversational [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>We can all enjoy a good conversation. Many companies, including &#8220;big business,&#8221; have learned this and, as of late, have implemented it more than ever before. The truth of the matter is that people are more willing to trust a laid-back, conversational person than they are the stiff-necked (ex-)marketing guru. We can see this conversational style all over the advertising world. For instance, Apple&#8217;s campaign of Mac and PC. Apple isn&#8217;t lambasting Windows like a cheesy, poorly created 1970&#8217;s political ad. Rather, they are approaching the situation from a humorous, ironic perspective. What we mean by irony is this: the dichotomy of the seriousness of the subject matter juxtaposed to the humorous nature of the ad.<br />
<img src="http://www.fuelyourinterface.com/files/macvpc.jpg" alt="macvpc" title="macvpc" width="600" height="339" class="alignleft size-full wp-image-947" /></p>
<h3>Cheeky Web</h3>
<p>This tongue in cheek has made it&#8217;s way all over the web, and doesn&#8217;t show signs of slowing down. With Twitter, we first saw the &#8220;Fail Whale&#8221;; another juxtaposition of a fairly odd theme for a 404 page. Also, with Twitter, the entire branding concept is wrapped around a small, cartoon bird. Ten years ago, seemingly, this kind of branding and user experience was limited to cereal boxes. But &#8220;Silly rabbit, Trix are for kids&#8221; has turned into &#8220;silly PC, Macs are for grownups.&#8221; Leading social platform Facebook has adopted the tongue-in-cheek concept as well, offering &#8220;Pirate&#8221; as a language choice, extending support even for the automated emails sent to notify the user of a new wall post or message.<br />
<div id="attachment_948" class="wp-caption alignnone" style="width: 610px"><img src="http://www.fuelyourinterface.com/files/fbookpirate.jpg" alt="Facebook&#039;s Pirate language let&#039;s you log-in with your &#039;Lectric Parrot and Secret Code" title="fbookpirate" width="600" height="253" class="size-full wp-image-948" /><p class="wp-caption-text">Facebook's Pirate language let's you log-in with your 'Lectric Parrot and Secret Code</p></div></p>
<h3> </h3>
<p>Google (long known for their sense of humor, anyway) has even adopted the conversational idea with their latest video push for Chrome OS.<br />
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/0QRO3gKj3qw&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/0QRO3gKj3qw&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="630" height="344"></embed></object></p>
<h3>Why does funny work so well?</h3>
<p>Well, there&#8217;s no proof necessarily as to why the slightly ironic tinge of the latest web-trends appeals to us (maybe the Trix rabbit is the real cause for it all). But one theory suggests that, especially for those in the United States, the economic crisis and the media surrounding it are &#8220;heavy,&#8221; so to speak; the light-hearted jabs Apple takes at Microsoft are a relief from the weight of the situation at hand.</p>
<p>But hey, nobody really knows why mullets caught on in the eighties, except that the popular guys did it. When it comes down to it, it could be said that a lot of it is simply a stylistic trend that is spearheaded by some guys up top that have a good sense of humor, and know that laughter, even in advertising, is like medicine. And it seems like it&#8217;s an addicting pill.</p>
<h3>The Bandwagon</h3>
<p>Other players in the humor game pop up daily. Just taking a quick glance over at sites like <a href="http://logopond.com/">LogoPond</a> will show the toyish-look of branding. Often resembling caricatures, a &#8220;hot trend&#8221; in logo design is to give the mark some &#8220;personality.&#8221; This is all a huge part of the user experience.<br />
<div id="attachment_961" class="wp-caption alignnone" style="width: 610px"><img src="http://www.fuelyourinterface.com/files/cheekyLogos.jpg" alt="Source: LogoPond.com" title="cheekyLogos" width="600" height="650" class="size-full wp-image-961" /><p class="wp-caption-text">Source: LogoPond.com</p></div></p>
<h3>User Experience</h3>
<p>The result of the conversational, tongue-in-cheek attitude towards business is a strong brand loyalty, and at least positive recognition of the humor, if it is done well. We&#8217;ve all met the Windows user who chuckled at the most recent &#8220;promise&#8221; ad from Apple. The front end of a person&#8217;s experience with a company is extremely important; whether that person becomes a customer or not, the companies implementing this into their advertising and branding understand the importance of perception; even though PC users may never use Apple&#8217;s OS, they quite possibly (more probably) will own an iPod, or perhaps an iPhone; by maintaining a humorous stance, Apple doesn&#8217;t estrange the opponent&#8217;s customers.</p>
<h3>Conclusion</h3>
<p>We can see quite clearly that the cheeky attitude of companies on and off the web has had a major impact on user experience study as we know it. What have you found to be effective, or anti-effective, about this kind of front-end user experience?</p>
<p><em>Note: This article talks about advertising and branding quite a bit. This is because advertising is a very significant portion of the user experience, whether the advertising targets new customers or existing customers. Often, advertising and branding are the only communication between a company and its potential, new, or loyal customers.</em></p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DaQOKpLH-yk:w7GoG65Gxk8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DaQOKpLH-yk:w7GoG65Gxk8:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DaQOKpLH-yk:w7GoG65Gxk8:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DaQOKpLH-yk:w7GoG65Gxk8:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DaQOKpLH-yk:w7GoG65Gxk8:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DaQOKpLH-yk:w7GoG65Gxk8:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DaQOKpLH-yk:w7GoG65Gxk8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DaQOKpLH-yk:w7GoG65Gxk8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=DaQOKpLH-yk:w7GoG65Gxk8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=DaQOKpLH-yk:w7GoG65Gxk8:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/tongue-in-cheek-is-serious-business/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Three Big Mistakes that Can Make or Break Your Design Career</title>
		<link>http://www.fuelyourinterface.com/three-big-mistakes-that-can-make-or-break-your-design-career/</link>
		<comments>http://www.fuelyourinterface.com/three-big-mistakes-that-can-make-or-break-your-design-career/#comments</comments>
		<pubDate>Mon, 16 Nov 2009 11:30:44 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Discussions]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=924</guid>
		<description><![CDATA[The name says it all. If you&#8217;ve come here, we mean no offense &#8211; there&#8217;s just a few career killers that we probably all have been guilty of at one point or another. These concepts definitely apply to interface designers, but if you&#8217;ve arrived at this post and you aren&#8217;t an interface designer, don&#8217;t check [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>The name says it all. If you&#8217;ve come here, we mean no offense &#8211; there&#8217;s just a few career killers that we probably all have been guilty of at one point or another. These concepts definitely apply to interface designers, but if you&#8217;ve arrived at this post and you aren&#8217;t an interface designer, don&#8217;t check out yet &#8211; there&#8217;s probably a few things here you can apply to whatever field you are working in. Also, realize that these are not the only mistakes you can make. So, with that said, let&#8217;s get started.</p>
<h2>Mistake #1: Waiting</h2>
<p>You&#8217;ve done countless hours of studying. You&#8217;ve visited hundreds of tutorials and spent hours in classes and conferences. You&#8217;ve heard, read, and practiced the best practices, and you know Photoshop shortcuts like the back of your hand. You can quote every line of jQuery, and you could reproduce every Flash site on the FWA. You can type 90 words per minute. You <em>know</em> a lot. So, you&#8217;ve made a few interfaces, and you&#8217;ve posted your stuff online on Behance, Flickr, or even your own online portfolio. This is the important part, ladies and gentlemen: <strong>now what?</strong></p>
<p>The mistake most people make is simply sitting back and waiting. Even if your work is top-notch, and you eventually are hired, there is no positive motion that happens as a result of waiting. So, what do you do? <strong>Now what?</strong> This happens often with freelancers at the beginning of their careers. They get a little bit of work under their belts, and then sit back and wait on customers or employers to come their way; this is one of the worst steps for your career for many reasons. First of all, you are not guaranteed that <em>anything</em> will happen. Secondly, most clients and employers would much rather see someone who is active in their field and informed about the latest aspects of that field than someone who is, essentially, a “has-been.” In most other occupations, a “has-been” is one that is from years past; however, in professional media, a “has-been” can be someone who is just a few months out of the loop. So what are a few ways to stay active in interface design?</p>
<ul>
<li>Do mock jobs</li>
<li>Involve yourself in a community of other designers and developers, and offer advice or help.<em>Note: A good way to do this is through Twitter, Facebook, and other social networks. Also, by leaving comments here on the Fuel Network sites! Be sure to follow FYI on Twitter <a href="http://www.twitter.com/fuelinterface" target="_blank">@fuelinterface</a>, and feel free to follow me personally as well <a href="http://www.twitter.com/jcutrell" target="_blank">@jcutrell</a><br />
</em></li>
<li>Take old designs and improve on them.</li>
<li>Work for free (for non-profit companies, friends, etc.)<em>Note: Be sure that working for free will not affect the quality of the product you release!</em></li>
<li>Explore new facets of your occupation, or cross over into another practice to supplement your interface design skills. For instance, try out typeface design or art illustration.</li>
</ul>
<h2>Mistake #2: Ignoring The Garmon Principle</h2>
<p>Don&#8217;t worry if you haven&#8217;t heard of The Garmon Principle. Considering it was invented about 30 seconds ago, you’re probably not the only one. Chris Garmon is a good friend of mine that recently sat me down and changed my thinking about all of my professional media work. Garmon isn&#8217;t necessarily a design professional, nor could he write more than a line of HTML.</p>
<p>I showed him an interface idea I was working with at the time. I was very excited; it used some jQuery effects and Ajax loading that I had just learned, and the CSS and HTML were both on-spot. It was designed with intentional design theory, and it was ready to have content infused. As I showed him the product, his face disfigured a little bit, and he said, &#8220;it&#8217;s not really that great.&#8221; In the back of my mind, I thought, &#8220;Oh yes it is. You have no clue what it took to make this do that, and that do this. And the jQuery is cool, and the black and white theme is really <em>in</em>&#8230;&#8221; But then I realized, you know&#8230; it really <em>isn&#8217;t</em> that great. In fact, it&#8217;s nothing but a waste of time. Then, Garmon went on to tell me what I have come to know as The Garmon Principle.</p>
<blockquote><p>The first thing you should do is close your laptop, put away your cool bag of tricks, and <strong>think</strong>. Think, &#8220;What would be the perfect site for this? What would it look like? If there were no boundaries, what is the coolest thing, or the most functional way, to make this happen?&#8221; Also think, &#8220;What will make this worth existing as much or more than the next guy&#8217;s interface?&#8221; Once you have decided what the best possible solution would be, figure out how to do it. If there is something in your original idea that just simply isn&#8217;t possible, then amend it. &#8220;Re-idea,&#8221; if you will. But never, ever, EVER sit down and start doing things simply because you know how to do them. Because the truth is, no one really cares how much you know about coding or development. The people who are looking at this site aren&#8217;t thinking about what it took to make it, or how many advanced lines of code you wrote. They&#8217;re thinking about how it is <strong>now</strong>, as a whole.</p></blockquote>
<p>All Garmon was telling me was that the concept is far more important than the method. The function trumps form. It is easy for us, as designers and developers, to get caught up with our practical coding knowledge; but the truth is, it&#8217;s not a bunch of little things that make a site good. It is, almost infallibly, one thing. Now, what that one thing is, you have to figure out before you ever type a single line of code or push a single pixel.</p>
<h2>Mistake #3: Spreading Too Thin</h2>
<p>This is the most often committed mistake in every professional field. Without going into too much detail, we can understand this concept fairly easily. In international trade, different countries trade a limited number of goods that they have the <em>comparative advantage</em> creating. For instance, the United States isn&#8217;t nearly as good at producing bananas than a tropical island would be, and the tropical island isn&#8217;t at good at producing commercial aircraft as the United States is. Therefore, for a certain number of airplanes, the United States can trade the tropical island for a certain number of bananas. The reason this works well is because each country is doing what it does best, thus being as productive as possible.</p>
<p>The same concept can be applied to people! If you are really great at designing ecommerce or photo gallery sites, then don&#8217;t be afraid to focus solely on ecommerce or photo gallery sites. By doing any other kind of interface design, you will be taking away time from the thing you are best at, and therefore you are not being nearly as productive as you could be. This can be detrimental to your career; If you were free to focus on what you do best, you would produce your best possible product.</p>
<p>Note that this doesn&#8217;t mean, however, that you completely ignore every other practice surrounding your field. Sometimes, other practices supplement your practice. An example of this, for many designers, is photography. Practicing some in photography will increase your knowledge and understanding of color, 3D space, composition, and many other important concepts that cross over into your practical knowledge of design. The important thing is that you focus mostly or completely on what you are best at.</p>
<h2>Conclusion</h2>
<p>In conclusion, we can be a lot more successful if we avoid these three things. What are some other mistakes you&#8217;ve learned from? Comment here, or tell us through Twitter!</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ARd8Zo7_nNk:qYzASslJxbw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ARd8Zo7_nNk:qYzASslJxbw:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ARd8Zo7_nNk:qYzASslJxbw:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ARd8Zo7_nNk:qYzASslJxbw:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ARd8Zo7_nNk:qYzASslJxbw:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ARd8Zo7_nNk:qYzASslJxbw:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ARd8Zo7_nNk:qYzASslJxbw:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ARd8Zo7_nNk:qYzASslJxbw:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=ARd8Zo7_nNk:qYzASslJxbw:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=ARd8Zo7_nNk:qYzASslJxbw:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/three-big-mistakes-that-can-make-or-break-your-design-career/feed/</wfw:commentRss>
		<slash:comments>48</slash:comments>
		</item>
		<item>
		<title>Interview with David Platt</title>
		<link>http://www.fuelyourinterface.com/interview-with-david-platt/</link>
		<comments>http://www.fuelyourinterface.com/interview-with-david-platt/#comments</comments>
		<pubDate>Sat, 14 Nov 2009 12:00:06 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Interviews]]></category>
		<category><![CDATA[UI Design]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=900</guid>
		<description><![CDATA[We recently were given the opportunity to interview one of our (awesome) readers, David Platt. David is an interaction, print, and identity designer and artist. Check out his interactive portfolio here, and also head on over and take a look at his artwork here. David had a lot to say, so let&#8217;s dive in!
FYI: So [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p>We recently were given the opportunity to interview one of our (awesome) readers, David Platt. David is an interaction, print, and identity designer and artist. Check out his interactive portfolio <a href="http://www.martiandesign.com/">here</a>, and also head on over and take a look at his artwork <a href="url">here</a>. David had a lot to say, so let&#8217;s dive in!</p>
<div id="attachment_908" class="wp-caption alignnone" style="width: 610px"><a href="http://www.davidplattart.com"><img class="size-full wp-image-908" title="dplattArt" src="http://www.fuelyourinterface.com/files/dplattArt.jpg" alt="David Platt's art portfolio (DavidPlattArt.com)" width="600" height="210" /></a><p class="wp-caption-text">David Platt&#39;s art portfolio (DavidPlattArt.com)</p></div>
<p><span style="color: #d53893;"><span style="color: #d53893;"><strong>FYI:</strong></span></span> So tell us a little about what you do.</p>
<p><strong>DP:</strong> I am usually hired by agencies to do the layout and concept-side of websites; I don&#8217;t really do the coding. I do some Flash animation as well, but recently agencies have been using me more for website designs.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> Speaking of flash, cool Martian animation on your site!</p>
<p><strong>DP:</strong> Haha, yea, that is actually based on an algorithm I found in a Flash book.</p>
<div id="attachment_907" class="wp-caption alignnone" style="width: 610px"><a href="http://www.martiandesign.com"><img class="size-full wp-image-907" title="dPlattMartianSite" src="http://www.fuelyourinterface.com/files/dPlattMartianSite.jpg" alt="David's interactive portfolio, MartianDesign.com" width="600" height="210" /></a><p class="wp-caption-text">David&#39;s interactive portfolio, MartianDesign.com</p></div>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> At the early part of your career, what did you find to be the biggest step forward? Also, what was the biggest challenge?</p>
<p><strong>DP:</strong> Well, I started off in print. My biggest challenge was learning Flash, actually. In terms of freelancing and working with people, I still find managing people to be quite challenging. <em>(pause)</em> How do I answer that question&#8230;</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> Haha! It is a tough one.</p>
<p><strong>DP:</strong> You know, I think one of the biggest challenges for any young designer is to realize their own vision, and avoid trends. If I&#8217;m looking for a junior designer to hire, it seems to me that a lot of junior designers jump on a trend&#8230; Like a Wordpress theme that looks like all the other Wordpress themes out there. Branding your own company is the biggest challenge, I&#8217;d say. If you can brand your own company, then you can show potential clients that you can brand their company. I developed the Martian site, and that was very challenging. Designing for yourself is taking on the hardest client you&#8217;ll ever have.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span>Most definitely. Recently, we wrote a post about thinking outside of the box, and how that wasn&#8217;t necessarily the best practice. If you approach a project with the goal of thinking outside the box for the sake of it, you are already putting yourself out, because you might abandon good practice.</p>
<p><strong>DP:</strong>Yea, totally agree. When I approach a project, I keep in mind that I have to <em>know</em> the rules before I can break them.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> So that when you break them, you have a good reason. Along the same lines, if you use a trend, use it for a reason.</p>
<p><strong>DP:</strong> Absolutely. If it doesn&#8217;t have a function, I&#8217;d just as soon leave it out completely.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> Shifting gears a bit here, what is your most enjoyable project type?</p>
<p><strong>DP:</strong> To tell you the truth, the most enjoyable jobs I receive are when the client is a good client. If I, for instance, get a good wireframe up front, then I am freed up to focus on the design rather than the content. There&#8217;s some places I go into and the design director is so much better than me, and that&#8217;s great. I get a chance to learn so often in my job.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> So when did you get your start with interactive work?</p>
<p><strong>DP:</strong> I started interactive stuff before the web existed. I started with CD-Roms with Director and Shockwave, and then when the web came around, I learned basic HTML and Javascript rollovers. And then when Flash came out, I saw the very first couple of sites done with Flash and was totally blown away by them. The first one that really blew me away was for a company called Gabocorp (view the 1997 archived version of Gabocorp&#8217;s site <a href="http://www.thefwa.com/flash10/gabo.html">here</a>). At that point, I knew that Flash was the future of web design, which was true until recently. People have decided that Flash is <em>too much</em> eye candy, and so they are reverting to XHTML and CSS, and using Flash for banners.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> Yea, we&#8217;ve seen a lot of a move towards Javascript libraries and things of that nature that interact with the web elements and DOM directly.</p>
<p><strong>DP:</strong> There&#8217;s definitely a debate about it. Flash isn&#8217;t dead, for sure. In fact, the <a href="http://www.thefwa.com/">FWA site</a> is done completely in Flash. I&#8217;m kind of on the fence on the issue; I like the quietude of the move towards mostly static sites, but I also think that the eye-candy Flash provides can be a good thing when used correctly.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> Where did you first start with your work? Did you start out as a freelancer, or did you go to college for design?</p>
<p><strong>DP:</strong> I went to college for film and television. My dad was a creative director at an agency; I taught myself all of the programs, starting with Quark and then going through Photoshop and Illustrator. I learned my basic design principles from my father though. I don&#8217;t know where I would have learned that otherwise.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> It&#8217;s a bit different these days, wouldn&#8217;t you agree? You can jump online and learn a slew of Photoshop tricks and design principles from blogs and Twitter friends.</p>
<p><strong>DP:</strong> Most definitely. I read a lot of design blogs, and I guess a lot of people learn that way today.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> You started to mention a few programs you use. What would you say are your top five programs that you use on a daily basis?</p>
<p><strong>DP:</strong> Can I mention Photoshop five times? Haha. Truly, Photoshop, Illustrator, Flash, InDesign for print stuff, Fireworks, Dreamweaver, Acrobat&#8230; Those are the top programs I work with these days.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> And how about your top inspirational content online?</p>
<p><strong>DP:</strong> I read most of the Fuel blogs, and a few of the blogs on the <a href="http://envato.com/">Envato</a> network. I also hit the main big design blogs, as well as the <a href="http://www.thefwa.com/">FWA</a> to check out some of the better Flash sites. A lot of the content on most of these blogs, though, are targeting younger, less experienced readers; at least once a day, I get to read a great article that I can learn from.</p>
<p><span style="color: #d53893;"><strong>FYI:</strong></span> Absolutely. Thank you so much for doing this interview with us! Where can we look at some of your work?</p>
<p><strong>DP:</strong> My <a href="http://www.martiandesign.com">Martian Design site</a> and my <a href="http://www.davidplattart.com">art site</a> both have some of my work content on them.</p>
<p><img class="alignleft size-full wp-image-915" title="martianLogo" src="http://www.fuelyourinterface.com/files/martianLogo.jpg" alt="martianLogo" width="150" height="150" />Again, thanks so much to David for doing this interview with us! We look forward to hearing more from David and the rest of you all in the future.</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=wm_--3zZsYU:dplNlh6yfX8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=wm_--3zZsYU:dplNlh6yfX8:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=wm_--3zZsYU:dplNlh6yfX8:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=wm_--3zZsYU:dplNlh6yfX8:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=wm_--3zZsYU:dplNlh6yfX8:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=wm_--3zZsYU:dplNlh6yfX8:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=wm_--3zZsYU:dplNlh6yfX8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=wm_--3zZsYU:dplNlh6yfX8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=wm_--3zZsYU:dplNlh6yfX8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=wm_--3zZsYU:dplNlh6yfX8:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/interview-with-david-platt/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Three Minute Tip! An Easy Way to Create an Inactive-state Button in Photoshop</title>
		<link>http://www.fuelyourinterface.com/three-minute-tip-an-easy-way-to-create-an-inactive-state-button-in-photoshop/</link>
		<comments>http://www.fuelyourinterface.com/three-minute-tip-an-easy-way-to-create-an-inactive-state-button-in-photoshop/#comments</comments>
		<pubDate>Sun, 08 Nov 2009 17:30:43 +0000</pubDate>
		<dc:creator>Jonathan Cutrell</dc:creator>
				<category><![CDATA[Learn]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://www.fuelyourinterface.com/?p=885</guid>
		<description><![CDATA[
For today&#8217;s Three Minute Tip, we will once again take a look at a very effective technique in Photoshop that just about anyone could master.
Many sites are adorned with wonderful looking, full color button sets (look for some possible freebies in the future!). A popular and effective practice in interface design is to have a [...]<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.fuelyourinterface.com/files/3mt.jpg" alt="3mt" title="3mt" width="600" height="340" class="alignnone size-full wp-image-799" /><br />
For today&#8217;s Three Minute Tip, we will once again take a look at a very effective technique in Photoshop that just about anyone could master.<br />
Many sites are adorned with wonderful looking, full color button sets (look for some possible freebies in the future!). A popular and effective practice in interface design is to have a button that has multiple states (hover, inactive, down, visited, etc). These different states help the user understand how they are interacting with the interface.</p>
<p>One of the easiest ways to create a color state is to use an adjustment layer in Photoshop. In basically one step, you can create great looking buttons for your interface!</p>
<h3>Let&#8217;s get it done.</h3>
<p>Open your color button in Photoshop. It is important that your button has a transparent background; you will likely be opening a png image unless you have a layered PSD file. If you do have a layered PSD file, it would be easier to put the button layers into a layer folder.<br />
<img src="http://www.fuelyourinterface.com/files/startOutWith.jpg" alt="startOutWith" title="startOutWith" width="600" height="266" class="alignnone size-full wp-image-889" /></p>
<p>Next, click the &#8220;Create a New Fill or Adjustment Layer&#8221; button at the bottom of the Layers Palette. This will give you a flyout menu with multiple options, some of which you may be familiar with from the Image > Adjustments menu. For this tutorial, we will select the Hue/Saturation option.<br />
<img src="http://www.fuelyourinterface.com/files/selectHueSat.jpg" alt="selectHueSat" title="selectHueSat" width="600" height="318" class="alignnone size-full wp-image-888" /></p>
<p>Adjust the settings in the Hue/Saturation window (the screenshot is of Photoshop CS4, but the options are very similar in other CS versions) until you are happy with the result. I&#8217;ve chosen to desaturate the button entirely, and add a bit of lightness into the button (value for saturation: -100; value for lightness: +20). These aren&#8217;t the only settings possible, of course; perhaps you only want to desaturate the button slightly, or even just add lightness? This is the place where your discretion is in play.<br />
<img src="http://www.fuelyourinterface.com/files/saturationsettings-600x431.png" alt="saturationsettings" title="saturationsettings" width="600" height="431" class="alignnone size-medium wp-image-887" /></p>
<p>So your final result will look something like this if you chose the options suggested.<br />
<img src="http://www.fuelyourinterface.com/files/finalResult.png" alt="finalResult" title="finalResult" width="600" height="319" class="alignnone size-full wp-image-886" /></p>
<h3>The Best Part is&#8230;</h3>
<p>But wait! It gets better. There are a few perks with using this technique. Adjustment layers are <em>non-destructive;</em> this basically means you can always change your values later if you don&#8217;t like the result. This also means you always keep the original button underneath the adjustment layer.<br />
<img src="http://www.fuelyourinterface.com/files/bestPart.png" alt="bestPart" title="bestPart" width="600" height="366" class="alignnone size-full wp-image-890" /><br />
Also, you can always drag adjustment layers between multiple Photoshop documents; you can even take all of your buttons and place them beneath a single adjustment layer in one Photoshop document, and voilà! You&#8217;ve created another button state for all of your buttons with just <em>one</em> layer. From there, all you have to do is save as a PNG with transparency, and you&#8217;re set!</p>
<h3>We could go on, but&#8230;</h3>
<p>There are a million things we could say about adjustment layers in Photoshop, and how effective and time saving they are; but hey, we&#8217;re trying to get this done in three minutes, right? Don&#8217;t worry, you can always come back for more FYI tips in the future. Follow use on <a href="Http://www.twitter.com/fuelinterface">Twitter</a> for the latest information!</p>
<p><p><strong>Sponsored by</strong></p>
<a href='http://madebytinder.com' target='_blank'><img src='http://fuelbrand.s3.amazonaws.com/downloads/WhatisTinder250x250.jpg' border='0' alt='Made By Tinder' /></a>
<p><a href="http://www.fuelbrandnetwork.com/advertise/">Advertise on Fuel Brand Network</a>. <br />
  <a href="http://www.fuelbrandnetwork.com">Fuel Brand Network</a> 2010 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">cc</a> (creative commons license)
</p></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=EDbfYLsFUT8:Tb-DyBDpI7s:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=EDbfYLsFUT8:Tb-DyBDpI7s:F7zBnMyn0Lo"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=EDbfYLsFUT8:Tb-DyBDpI7s:F7zBnMyn0Lo" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=EDbfYLsFUT8:Tb-DyBDpI7s:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=EDbfYLsFUT8:Tb-DyBDpI7s:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=EDbfYLsFUT8:Tb-DyBDpI7s:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=EDbfYLsFUT8:Tb-DyBDpI7s:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=EDbfYLsFUT8:Tb-DyBDpI7s:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/FuelYourInterface?a=EDbfYLsFUT8:Tb-DyBDpI7s:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/FuelYourInterface?i=EDbfYLsFUT8:Tb-DyBDpI7s:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.fuelyourinterface.com/three-minute-tip-an-easy-way-to-create-an-inactive-state-button-in-photoshop/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
