<?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>Enrico Ros &#187; colorpicker</title>
	<atom:link href="http://www.enricoros.com/blog/tag/colorpicker/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.enricoros.com/blog</link>
	<description>Focused ideas, bleeding edge madness and code recipes.</description>
	<lastBuildDate>Mon, 19 Apr 2010 07:54:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Elements of Ui Design &#8211; ColorPicker</title>
		<link>http://www.enricoros.com/blog/2007/11/elements-of-ui-design/</link>
		<comments>http://www.enricoros.com/blog/2007/11/elements-of-ui-design/#comments</comments>
		<pubDate>Fri, 23 Nov 2007 10:26:38 +0000</pubDate>
		<dc:creator>Enrico Ros</dc:creator>
				<category><![CDATA[Computer Graphics]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[colorpicker]]></category>
		<category><![CDATA[graphicsview]]></category>

		<guid isPermaLink="false">http://enricoros.wordpress.com/2007/11/23/elements-of-ui-design/</guid>
		<description><![CDATA[Update: the source code is included in the Fotowall project. The files you&#8217;re looking for are the ColorPickerItem ones. Say you&#8217;re writing an application and you want to let the user to change the color of an item; what will you do? The standard approach is to popup a color dialog with the standard HSV [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Update: the source code is included in the <a href="http://www.enricoros.com/opensource/fotowall/">Fotowall</a> project. The <a href="http://www.enricoros.com/opensource/fotowall/source-code">files you&#8217;re looking for</a> are the ColorPickerItem ones.</strong></p>
<p>Say you&#8217;re writing an application and you want to let the user to change the color of an item; <em>what will you do?</em></p>
<p>The standard approach is to <span style="text-decoration: line-through;">popup a color dialog</span> with the standard HSV selector and all the sliders and values and buttons and confusion. Another approach is to <span style="text-decoration: line-through;">pop down a combobox</span> with a selection of default colors where the user won&#8217;t find the colour she is looking for (unless it&#8217;s RED, of course <img src='http://www.enricoros.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> ).<br />
Both approaches need you to get shocked by another window appearing right in front of you, so you loose the context and move the mouse far away from where it was.</p>
<p>Let&#8217;s take a look at this <strong>new approach</strong>:</p>
<p><a href="http://www.enricoros.com/blog/2007/11/elements-of-ui-design/"><em>Click here to view the embedded video.</em></a></p>
<p>The 2d (yet perspective transformed) dialog smoothly fades in when hovering the color and <em>your favorite hue is just 1 or 2 clicks apart</em>!</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://www.enricoros.com/blog/2007/11/elements-of-ui-design/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;title=Elements+of+Ui+Design+-+ColorPicker" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;title=Elements+of+Ui+Design+-+ColorPicker" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-diigo">
			<a href="http://www.diigo.com/post?url=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;title=Elements+of+Ui+Design+-+ColorPicker&amp;desc=Update%3A%20the%20source%20code%20is%20included%20in%20the%20Fotowall%20project.%20The%20files%20you%27re%20looking%20for%20are%20the%20ColorPickerItem%20ones.%0D%0A%0D%0ASay%20you%27re%20writing%20an%20application%20and%20you%20want%20to%20let%20the%20user%20to%20change%20the%20color%20of%20an%20item%3B%20what%20will%20you%20do%3F%0D%0A%0D%0AThe%20standard%20approach%20is%20to%20popup%20a%20color%20dialog%20with%20the%20sta" rel="nofollow" class="external" title="Post this on Diigo">Post this on Diigo</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;t=Elements+of+Ui+Design+-+ColorPicker" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-googlereader">
			<a href="http://www.google.com/reader/link?url=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;title=Elements+of+Ui+Design+-+ColorPicker&amp;srcUrl=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;srcTitle=Elements+of+Ui+Design+-+ColorPicker&amp;snippet=Update%3A%20the%20source%20code%20is%20included%20in%20the%20Fotowall%20project.%20The%20files%20you%27re%20looking%20for%20are%20the%20ColorPickerItem%20ones.%0D%0A%0D%0ASay%20you%27re%20writing%20an%20application%20and%20you%20want%20to%20let%20the%20user%20to%20change%20the%20color%20of%20an%20item%3B%20what%20will%20you%20do%3F%0D%0A%0D%0AThe%20standard%20approach%20is%20to%20popup%20a%20color%20dialog%20with%20the%20sta" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;title=Elements+of+Ui+Design+-+ColorPicker" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/&amp;title=Elements+of+Ui+Design+-+ColorPicker" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://www.enricoros.com/blog/2007/11/elements-of-ui-design/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Elements+of+Ui+Design+-+ColorPicker+-+http://b2l.me/kbvg6&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://www.enricoros.com/blog/2007/11/elements-of-ui-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
