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

<channel>
	<title>Oaktree Creative &#187; ui</title>
	<atom:link href="http://oaktreecreative.com/tag/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://oaktreecreative.com</link>
	<description>The Pixels &#38; Prose of Chuck Mallott</description>
	<lastBuildDate>Mon, 07 May 2012 00:26:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Setting a Proper Corner Radius</title>
		<link>http://oaktreecreative.com/entries/setting-a-proper-corner-radius/</link>
		<comments>http://oaktreecreative.com/entries/setting-a-proper-corner-radius/#comments</comments>
		<pubDate>Fri, 09 Dec 2011 15:06:16 +0000</pubDate>
		<dc:creator>chuck</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://oaktreecreative.com/?p=632</guid>
		<description><![CDATA[Rounded corners are a key component in interface design. Apple&#8217;s iPhone, in particular, vaulted these little rounded-corner square-shaped icons into prominence. You see rounded corners everywhere these days. And all to often, I see rounded corners that seem to have been executed as an afterthought. Designers: please spent just a few extra minutes making sure [...]]]></description>
			<content:encoded><![CDATA[<p>Rounded corners are a key component in interface design. Apple&#8217;s iPhone, in particular, vaulted these little rounded-corner square-shaped icons into prominence. You see rounded corners everywhere these days. And all to often, I see rounded corners that seem to have been executed as an afterthought.</p>
<p>Designers: please spent just a few extra minutes making sure your rounded corners are done right. Examples of negligence are easiest to spot when a rounded-corner shape is inset inside another rounded-corner shape.</p>
<p>If the corner radius is the same for both shapes, you&#8217;ll have problems. If Square A sits inside of Square B and is smaller than Square B, the corner radius for Square A also has to be smaller. See the examples below:</p>
<p><a href="http://oaktreecreative.com/wp-content/uploads/2011/12/corner-radius.png"><img src="http://oaktreecreative.com/wp-content/uploads/2011/12/corner-radius.png" alt="Examples of proper and improper corner radii." title="corner-radius" width="600" height="300" class="alignnone size-full wp-image-633" /></a></p>
<p>Its entirely possible that there&#8217;s a Mr. Wizard math formula that will help you figure out how to adjust the corner radius depending on the change in size of the shape, but I&#8217;m not smart enough to figure that out. This doesn&#8217;t have to be rocket science, though.</p>
<p>A designer&#8217;s keen eye is often enough to prevent the problem. Spending just a couple of extra minutes paying attention to the details will make the world a better place, don&#8217;t you think?</p>
]]></content:encoded>
			<wfw:commentRss>http://oaktreecreative.com/entries/setting-a-proper-corner-radius/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>On Craftsmanship</title>
		<link>http://oaktreecreative.com/quotes/on-craftsmanship/</link>
		<comments>http://oaktreecreative.com/quotes/on-craftsmanship/#comments</comments>
		<pubDate>Thu, 17 Nov 2011 19:48:55 +0000</pubDate>
		<dc:creator>chuck</dc:creator>
				<category><![CDATA[quotes]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://oaktreecreative.com/?p=630</guid>
		<description><![CDATA[When you&#8217;re a carpenter making a beautiful chest of drawers, you&#8217;re not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You&#8217;ll know it&#8217;s there, so you&#8217;re going to use a beautiful piece of wood in the back. For you to sleep [...]]]></description>
			<content:encoded><![CDATA[<blockquote class="quote"><p>When you&#8217;re a carpenter making a beautiful chest of drawers, you&#8217;re not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You&#8217;ll know it&#8217;s there, so you&#8217;re going to use a beautiful piece of wood in the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.<cite>&#8212; Steve Jobs, explaining something his father taught him</cite></p></blockquote>
<p>Check out this article on Fast Company, which describes the <a href="http://www.fastcodesign.com/1665375/the-6-pillars-of-steve-jobss-design-philosophy">6 Pillars of Steve Jobs&#8217; Design Philosophy</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://oaktreecreative.com/quotes/on-craftsmanship/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fireworks Interviews</title>
		<link>http://oaktreecreative.com/entries/fireworks-interviews/</link>
		<comments>http://oaktreecreative.com/entries/fireworks-interviews/#comments</comments>
		<pubDate>Tue, 20 Sep 2011 11:21:46 +0000</pubDate>
		<dc:creator>chuck</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[fireworks]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[prototyping]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://oaktreecreative.com/?p=588</guid>
		<description><![CDATA[Linus Lim has put together some really good interviews on his site, Fireworks Interviews. I always enjoy engaging with other Fireworks users and I learned a thing or two by reading some of the interviews. If you&#8217;re a designer on the fence trying to decide between Fireworks or Photoshop, perhaps some of these interviews could [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://twitter.com/@chunwui">Linus Lim</a> has put together some <a href="http://fireworksinterviews.com">really good interviews</a> on his site, Fireworks Interviews. I always enjoy engaging with other Fireworks users and I learned a thing or two by reading some of the interviews.</p>
<p>If you&#8217;re a designer on the fence trying to decide between Fireworks or Photoshop, perhaps some of these interviews could help you decide. Or, if you&#8217;d just like to be inspired by some other Fireworks users, this is a nice resource.</p>
<p>Either way, check it out and while you&#8217;re there you can read <a href="http://fireworksinterviews.com/chuck-mallott">my answers</a> regarding some favorite Fireworks features, how I use it and my thoughts on Fireworks vs. Photoshop.</p>
]]></content:encoded>
			<wfw:commentRss>http://oaktreecreative.com/entries/fireworks-interviews/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS3 Buttons</title>
		<link>http://oaktreecreative.com/links/css3-buttons/</link>
		<comments>http://oaktreecreative.com/links/css3-buttons/#comments</comments>
		<pubDate>Mon, 03 May 2010 16:42:15 +0000</pubDate>
		<dc:creator>chuck</dc:creator>
				<category><![CDATA[links]]></category>
		<category><![CDATA[buttons]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[murmurs]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://localhost:8888/links/css3-buttons/</guid>
		<description><![CDATA[Slick buttons that degrade well in non-CSS3 supporting browsers from Web Designer Wall. &#8594;]]></description>
			<content:encoded><![CDATA[<p>Slick buttons that degrade well in non-CSS3 supporting browsers from Web Designer Wall. <a href="http://www.webdesignerwall.com/demo/css-buttons.html"><strong>&rarr;</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://oaktreecreative.com/links/css3-buttons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>4 Design Elements Behind a Good Call to Action</title>
		<link>http://oaktreecreative.com/links/4-design-elements-behind-a-good-call-to-action/</link>
		<comments>http://oaktreecreative.com/links/4-design-elements-behind-a-good-call-to-action/#comments</comments>
		<pubDate>Thu, 07 Jan 2010 16:14:42 +0000</pubDate>
		<dc:creator>chuck</dc:creator>
				<category><![CDATA[links]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[murmurs]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://localhost:8888/links/4-design-elements-behind-a-good-call-to-action/</guid>
		<description><![CDATA[Simple, straightforward tips on how to design a good call to action. Great stuff. &#8594;]]></description>
			<content:encoded><![CDATA[<p>Simple, straightforward tips on how to design a good call to action. Great stuff. <a href="http://www.shayhowe.com/web-design/designing-call-to-action/"><strong>&rarr;</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://oaktreecreative.com/links/4-design-elements-behind-a-good-call-to-action/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Complete Beginner&#8217;s Guide to Interaction Design</title>
		<link>http://oaktreecreative.com/links/complete-beginners-guide-to-interaction-design/</link>
		<comments>http://oaktreecreative.com/links/complete-beginners-guide-to-interaction-design/#comments</comments>
		<pubDate>Fri, 04 Dec 2009 00:37:32 +0000</pubDate>
		<dc:creator>chuck</dc:creator>
				<category><![CDATA[links]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[murmurs]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://localhost:8888/links/complete-beginners-guide-to-interaction-design/</guid>
		<description><![CDATA[The folks over at UX Booth have put together a synopsis of what I do for a living. Good stuff. &#8594;]]></description>
			<content:encoded><![CDATA[<p>The folks over at UX Booth have put together a synopsis of what I do for a living. Good stuff. <a href="http://www.uxbooth.com/blog/complete-beginners-guide-to-interaction-design/"><strong>&rarr;</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://oaktreecreative.com/links/complete-beginners-guide-to-interaction-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Proximity Matters</title>
		<link>http://oaktreecreative.com/entries/proximity-matters/</link>
		<comments>http://oaktreecreative.com/entries/proximity-matters/#comments</comments>
		<pubDate>Thu, 17 Apr 2008 03:16:40 +0000</pubDate>
		<dc:creator>chuck</dc:creator>
				<category><![CDATA[entries]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[ui]]></category>

		<guid isPermaLink="false">http://www.oaktreecreative.com/blog/?p=40</guid>
		<description><![CDATA[On a recent road trip, we drove past a sign that looked like something like this: At first glance, it is hard to tell if Proximity is to the left or to the right; or if you should go right or left to get to Matters. Perhaps after a more careful look, you can figure [...]]]></description>
			<content:encoded><![CDATA[<p>On a recent road trip, we drove past a sign that looked like something like this:</p>
<p><img src="http://localhost:8888/wp-content/uploads/2008/04/proximity.png" alt="Image of a Road Sign showing two destinations with arrows pointing in opposite direction." title="Proximity Matters" width="370" height="135" /></p>
<p><span id="more-40"></span></p>
<p>At first glance, it is hard to tell if Proximity is to the left or to the right; or if you should go right or left to get to Matters.  Perhaps after a more careful look, you can figure it out, especially if you&#8217;re familiar with the territory, but it should be much easier.  And it would be much easier if only the person who designed the template for this sign (and others like it I&#8217;m sure) understood how proximity can impact usability.</p>
<p>Dictionary.com defines <strong>proximity</strong> as <em style="font-style: italic;">&#8220;nearness in place, time, order, occurrence, or relation&#8221;</em>.  When two &#8220;things&#8221; are placed near to each other, it demonstrates a relationship.  Understanding this principle is critical to good design.</p>
<p>Not all signs are like the one depicted above. A couple of good examples can be found <a href="http://modena.intergate.ca/personal/pl8s/HR_FSR/GB_242.jpg">here</a> and <a href="http://www.interstate-guide.com/images015/i-015e_temp_sign.jpg">here</a>. <a href="http://www.lolcars.com/images/good-luck-road-sign.jpg">This one</a> is not so much of a good example.</p>
<p>So, back to the sign in question. Maybe this particular sign could be improved by using a line to separate the two city listings. That might help &#8211; what do you think?</p>
<p><img src="http://localhost:8888/wp-content/uploads/2008/04/proximity-modified-again.png" alt="Second version of sign listing two cities with arrows pointing in either direction." width="370" height="135" /></p>
<p>I&#8217;ll admit that is a step in the right direction toward improving the readability of this sign. And this is a pretty common treatment if memory serves me correctly.  But I think it could be better. This is a road sign meant to direct people driving in a car and needing to make a decision &#8212; usually a pretty quick decision.  This is no time to provide ambiguous clues for the driver.</p>
<p>Confusion can be avoided by paying attention to proximity.  In my opinion, the city name should appear next to the arrow that it belongs with.  And the position of the arrow being next to the name instead of below/above it is what clarifies the relationship.  Like this:</p>
<p><img src="http://localhost:8888/wp-content/uploads/2008/04/proximity-modified1.png" alt="Third version of sign listing two cities with arrows pointing in either direction." width="370" height="135" /></p>
<p>The same principles apply to interface design.  Labels should be noted next to the item they describe;  buttons should be positioned next to the fields they relate to; photos should appear next to the content they support.</p>
<p>This is a concept that is easy to get right and you don&#8217;t see many examples of poor use of proximity in the wild.  But when you do come across one &#8212; like the one I saw on the side of the road &#8212; they really do stand out.</p>
]]></content:encoded>
			<wfw:commentRss>http://oaktreecreative.com/entries/proximity-matters/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

