<?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>Some Random Dude &#187; Icons</title>
	<atom:link href="http://www.somerandomdude.com/tag/icons/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.somerandomdude.com</link>
	<description>Some Random Dude is a blog by P.J. Onori that covers design &#38; technology in the broadest sense possible.</description>
	<lastBuildDate>Tue, 07 Feb 2012 14:37:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Designing Icons Around Privacy</title>
		<link>http://www.somerandomdude.com/2012/01/17/designing-icons-around-privacy/</link>
		<comments>http://www.somerandomdude.com/2012/01/17/designing-icons-around-privacy/#comments</comments>
		<pubDate>Tue, 17 Jan 2012 14:56:14 +0000</pubDate>
		<dc:creator>P.J. Onori</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[icon design]]></category>
		<category><![CDATA[iconography]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[privacy]]></category>

		<guid isPermaLink="false">http://www.somerandomdude.com/?p=11854</guid>
		<description><![CDATA[The couple months ago a person contacted me to help them design a small icon system for an academic paper. The icons were needed to communicate different online privacy settings when sharing content or information. Communicating levels of privacy is far more complex than the simple nouns or verbs normally symbolized in icons. The set [...]]]></description>
			<content:encoded><![CDATA[<p>The couple months ago a person contacted me to help them design a small icon system for an academic paper. The icons were needed to communicate different online privacy settings when sharing content or information. Communicating levels of privacy is far more complex than the simple nouns or verbs normally symbolized in icons. The set was small enough in number for me to take design them outside of my work hours. What I&#8217;m showing today are wireframes of the icons to communicate the general direction and explain the structure/rules behind this system.<span id="more-11854"></span></p>
<p>The six different forms of sharing were: public (available to all), private (available to no one), shared with your friends, shared with your extended network (friends of friends) shared with groups (classmates, co-workers, etc.) and shared with specific people of your choosing. In addition, each form of sharing could have special attributes (such as the shared content can be available to advertisers) or combinations of various attributes. Additionally, these icons should take up a small profile to avoid being burdensome to the interface it resides in. Accommodating all of these issues proved difficult.</p>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/privacy-icons-all.png" alt="" title="privacy-icons-all" width="555" height="600" class="aligncenter size-full wp-image-11859" /></p>
<p>The first step was to concede that an icon-only solution was a fool&#8217;s errand. There was simply too much information to communicate with symbols alone. It became clear that the icons could not <em>just</em> be icons. Instead, they would look more like <a href='http://www.esrb.org/ratings/ratings_guide.jsp'>ESRB ratings</a>. While no one will espouse the beauty of the ESRB rating system, few complain about the clarity. The difference is, the ESRB icons devote a considerable amount of space on information that <em>is not</em> about the rating. </p>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/privacy-icons-structure.png" alt="" title="privacy-icons-structure" width="555" height="470" class="aligncenter size-full wp-image-11861" /></p>
<p>There were three main challenges in designing the icons. The first was how to create a system to communicate the concept of  &#8220;you&#8221; in relation to others. That was far more difficult than it initially seemed. Second was how to present the idea of networks (friends, non-friends and groups). The last main challenge was how differentiate something that is explicitly blocked from people to view as opposed to simply not sharing it with certain people. I am still unsure how clear these ideas can be articulated with symbols, but I think these icons head in the right direction. The subject (or &#8220;you&#8221;) is always larger than any other element in the icon. The subject&#8217;s friends are in full view (hence fully opaque) as opposed to people outside the subject&#8217;s network. When content is not shared with an individual, they are grayed out. When content is unavailable to specific people, a line (or wall) blocks their access.</p>
<p>Icons for this purpose should to be small, yet clear since they play a fairly minor role an interface. Anyone that has read about my process of designing <a href='/work/iconic'>Iconic</a> and <a href='/work/cue'>Cue</a> knows that legibility plays a large role in how I design icons. Therefore these icons are designed for a maximum scale of 240&#215;200 pixels and a minimum scale of 120&#215;100 pixels.</p>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/privacy-icons-size-ranges.png" alt="" title="privacy-icons-size-ranges" width="725" height="213" class="flush-left size-full wp-image-11860" /></p>
<p>I am at the point in the design where it would be useful to share with the community at large to get feedback. I&#8217;m uncertain if it&#8217;s worthwhile to go through a visual design pass&mdash;I would really like to hear people&#8217;s thoughts on that.If you have any thoughts on the issue of love to see you add them to comments below. I will be making the final icons available by PDF to download and use however you so desire.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.somerandomdude.com/2012/01/17/designing-icons-around-privacy/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Redesigning Gesture Icons &#8211; A Proposed System</title>
		<link>http://www.somerandomdude.com/2011/10/10/redesigning-gesture-icons-a-proposed-system/</link>
		<comments>http://www.somerandomdude.com/2011/10/10/redesigning-gesture-icons-a-proposed-system/#comments</comments>
		<pubDate>Mon, 10 Oct 2011 22:00:44 +0000</pubDate>
		<dc:creator>P.J. Onori</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[gestures]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[multitouch]]></category>

		<guid isPermaLink="false">http://somerandomdude.com/?p=11006</guid>
		<description><![CDATA[I believe today's gesture icons are not hitting the mark because they lack the qualities associated with good icons. I have designed an icon system in attempt to address this issue.]]></description>
			<content:encoded><![CDATA[<section>
<p><strong>Update:</strong> The proposed design described below has been <a href='/work/cue/'>released as Cue</a>.</p>
<p>One of the clearly understood problems associated with touch interfaces is people are often left guessing as to what gesture(s) can be performed throughout an app. There are common interaction guidelines to follow, but that can only take us so far. One of the obvious ways to help solve this issue is to articulate the interactions allowed through gestural icons.</p>
<p>These gesture icons act as roadsigns to an app for interaction way-finding. As expected, there has been a significant collection of gesture icon sets that have been made available to fill this need. The current crop of icons succeed in clarity, but they lack the iconic qualities necessary to act as a standard representation of gestures. My goal is to help create a foundational set of icons that are flexible, clear and distilled to a point where they could become a standard visual system to build from &#8211; ultimately to be used within apps for when explicit communication is needed.</section>
<section>
<h1>The Proposed System</h1>
<p>Since all touch gestures start with the application of finger(s) to screen, the system makes that action it&#8217;s foundation. Instead of representing the entire hand for a gesture, the icons focus on the point of action. The tap icon is an encapsulation of the fingertip.</p>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/gesture_icons_taps.png" alt="" title="gesture_icons_taps" width="555" height="228" class="aligncenter size-full wp-image-11431" /> </p>
<h2>The principles that drove the icon design were the following:</h2>
<dl>
<dt>Create a core visual language that all gestures could build from.</dt>
<dd>Gestures will come, go and change over time. The system should be able to support that.</dd>
<dt>Distill each gesture to its core action.</dt>
<dd>The illustrative nature of most gesture icons reduce focus from the fundmental interaction being performed.</dd>
<dt>Represent each gesture in a non-literal, yet clear way.</dt>
<dd>Not everyone is right handed, nor do they perform gestures uniformly which makes literal expression less than optimal.</dd>
<dt>Design forms that would be legible at small sizes.</dt>
<dd>Mobile devices are already space-constrained. My goal was to create icons that could take up little space in a mobile interface if needed.</dd>
</dl>
<p>The whole system builds from the tap and press icons above. Below lays out the standard gesture interactions found on most modern mobile devices.</p>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/gesture_icons_full_list.png" alt="" title="gesture_icons_full_list" width="555" height="748" class="aligncenter size-full wp-image-11432" /><br />
</section>
<section>
<h1>Icon Comparisons</h1>
<p><a href="http://gesturecons.com/">Gesture icons</a>, while visually clear, represent gestures very literally. This can be problematic because it insinuates that it is how the gesture <em>should</em> be performed. The icons also quickly lose legibility at small sizes. <a href="http://www.lukew.com">Luke Wroblewski</a> took a different route <a href="http://www.lukew.com/ff/entry.asp?1071">with his icons</a>, showing the the start/finish states of a gesture, which is quite helpful, but makes the icon more elaborate. Below are comparisons between the different gesture icon sets (my concept, <a href="http://gesturecons.com/">Gesture Icons</a>, <a href="http://www.lukew.com/ff/entry.asp?1071">LukeW&#8217;s icons</a> and <a href="http://gestureworks.com/features/open-source-gestures/">GestureWorks</a> respectively).</p>
<h2>Tap</h2>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/gesture_icons_comparisons_double_tap.png" alt="" title="gesture_icons_comparisons_double_tap" width="310" height="125" class="size-full wp-image-11434" /></p>
<p>There are a few things to notice between the icons. In the tap gesture, look at the percentage of space in each icon that is dedicated to the actual tap. By displaying the entire hand, the fingertip responsible for the tap takes a small portion of the actual icon &#8211; which is a very inefficient use of space. Showing the hand for a gesture certainly provides useful context, but the hand dominates each icon, diminishing the point of focus.</p>
<h2>Swipe Right</h2>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/gesture_icons_comparisons_flick.png" alt="" title="gesture_icons_comparisons_flick" width="430" height="125" class="size-full wp-image-11435" /></p>
<p>The inclusion of the entire hand is all the more problematic the more complex the gesture becomes. Even with the simple swipe gesture, icons become very difficult to confidently read at small sizes.</p>
<h2>Spread</h2>
<p><img src="http://www.somerandomdude.com/wp-content/uploads/gesture_icons_comparisons_spread.png" alt="" title="gesture_icons_comparisons_spread" width="555" height="125" class="size-full wp-image-11436" /></p>
<p>The illustrative style also becomes problematic with gestures that can be performed in many different ways. For instance, the spread can be done with one hand or with two hands. It can be done with the thumb and index finger, thumb and middle finger, index and middle fingers, etc. It can be done with the right or left hand. Two of the icons assume the gesture is be performed with thumb and index from the right hand. Another uses two hands. My opinion is that gestures need to be abstracted beyond any specific form of execution to be successful.</section>
<section>
<h1>Next Steps</h1>
<p>Nearing the completion of this icon system, I ran across the work of <a href="http://wireframes.linowski.ca/2010/02/gesturcons-touch-pack-1-0/">Ron George</a> who had come to the same conclusion as I had in the belief that standardization would require abstraction. This gives me confidence that there is something to this idea. I do not think the icons are perfect, but I truly think there is something to this idea. I am planning on releasing it as a finished set when it is at a more refined state. I am hoping to get feedback from readers to get a sense if the sentiment is shared and how it can be improved for greater clarity and aesthetics. Once I feel confident that the system is at an appropriate level of completion, I will release it for free under the Creative Commons share-a-like license.</section>
]]></content:encoded>
			<wfw:commentRss>http://www.somerandomdude.com/2011/10/10/redesigning-gesture-icons-a-proposed-system/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
		<item>
		<title>Another Iconic Update, 22 More Icons</title>
		<link>http://www.somerandomdude.com/2011/09/13/iconic-update-22-icons/</link>
		<comments>http://www.somerandomdude.com/2011/09/13/iconic-update-22-icons/#comments</comments>
		<pubDate>Tue, 13 Sep 2011 23:48:24 +0000</pubDate>
		<dc:creator>P.J. Onori</dc:creator>
				<category><![CDATA[Current Events]]></category>
		<category><![CDATA[Iconic]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[time]]></category>
		<category><![CDATA[time-on-my-hands]]></category>

		<guid isPermaLink="false">http://somerandomdude.com/?p=10232</guid>
		<description><![CDATA[Well, that didn&#8217;t take long&#8230; Less than two weeks ago, I updated Iconic with 18 new icons. I have had some time on my hands as of late, so I was able to add another 22 icons to the collection. This update includes bars (for charts or mobile coverage), alternate documents, upload/download, cloud upload download, [...]]]></description>
			<content:encoded><![CDATA[<p>Well, that didn&#8217;t take long&#8230;</p>
<p>Less than two weeks ago, I updated <a href="http://somerandomdude.com/projects/iconic/">Iconic</a> with <a href="http://somerandomdude.com/articles/current-events/iconic-update/">18 new icons</a>. I have had some time on my hands as of late, so I was able to add another 22 icons to the collection. This update includes bars (for charts or mobile coverage), alternate documents, upload/download, cloud upload download, a <a href='http://en.wikipedia.org/wiki/Pilcrow'>pilcrow</a>, microphone, award, aperture and a few others. Most notably, I <em>finally</em> was able to get a camera icon that was decent.<span id="more-10232"></span></p>
<div align="center"><img src="http://somerandomdude.com/wp-content/uploads/new_icons_2011-09-131.png" alt="" title="new_icons_2011-09-13" width="550" height="1282" class="aligncenter size-full wp-image-10237" /></div>
<p>The set is now up to 177 icons. I will continue to create icons as it makes sense, but this recent addition took care of all the pressing additions on the list. Some icons that have been suggested just do not seem possible given the grid used for this set. That said, I continue to give them a shot from time to time. Depending on how the next few weeks treat me, the set may break into the 180&#8242;s soon enough.</p>
<p>Go <a href="http://somerandomdude.com/projects/iconic/">download the updated set.</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.somerandomdude.com/2011/09/13/iconic-update-22-icons/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Privacy Icons is a project which helps to inform people how&#8230;</title>
		<link>http://www.somerandomdude.com/2010/12/31/privacy-icons-is-a-project-which-helps-to-inform-people-how/</link>
		<comments>http://www.somerandomdude.com/2010/12/31/privacy-icons-is-a-project-which-helps-to-inform-people-how/#comments</comments>
		<pubDate>Fri, 31 Dec 2010 18:20:11 +0000</pubDate>
		<dc:creator>P.J. Onori</dc:creator>
				<category><![CDATA[Found Elsewhere]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[privacy]]></category>
		<category><![CDATA[project]]></category>

		<guid isPermaLink="false">http://somerandomdude.com/stream/tumblr/privacy-icons-is-a-project-which-helps-to-inform-people-how/</guid>
		<description><![CDATA[Privacy Icons is a project which helps to inform people how their personal data is being used online. via Co.Design]]></description>
			<content:encoded><![CDATA[<p><img src="/wp-content/uploads/f93b1_tumblr_leb0wjCK7p1qznk6ho1_500.jpg" />
<p><a href="http://www.azarask.in/blog/post/privacy-icons/">Privacy Icons</a> is a project which helps to inform people how their personal data is being used online. via <a href="http://www.fastcodesign.com/1662961/mozillas-privacy-icons-tell-you-how-sites-use-your-personal-data">Co.Design</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.somerandomdude.com/2010/12/31/privacy-icons-is-a-project-which-helps-to-inform-people-how/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Monocolumn Icons by always with honor. The icons are masterfully&#8230;</title>
		<link>http://www.somerandomdude.com/2010/04/20/monocolumn-icons-by-always-with-honor-the-icons-are-masterfully/</link>
		<comments>http://www.somerandomdude.com/2010/04/20/monocolumn-icons-by-always-with-honor-the-icons-are-masterfully/#comments</comments>
		<pubDate>Tue, 20 Apr 2010 15:41:12 +0000</pubDate>
		<dc:creator>P.J. Onori</dc:creator>
				<category><![CDATA[Found Elsewhere]]></category>
		<category><![CDATA[Icons]]></category>

		<guid isPermaLink="false">http://somerandomdude.com/stream/tumblr/monocolumn-icons-by-always-with-honor-the-icons-are-masterfully/</guid>
		<description><![CDATA[Monocolumn Icons by always with honor. The icons are masterfully illustrated with a surprising level of detail given their style. via ffffound]]></description>
			<content:encoded><![CDATA[<p><img src="/wp-content/uploads/91cfa_tumblr_l16lncrEx01qznk6ho1_500.gif" /></p>
<p><a href="http://alwayswithhonor.com/#339391/Monocolumn-Icons">Monocolumn Icons</a> by <a href="http://alwayswithhonor.com">always with honor</a>. The icons are masterfully illustrated with a surprising level of detail given their style. via <a href="http://ffffound.com/image/8bdc37ae5782fbede615e41e40ac8f7934c03586">ffffound</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.somerandomdude.com/2010/04/20/monocolumn-icons-by-always-with-honor-the-icons-are-masterfully/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tonkyou and Iconitos pages updated</title>
		<link>http://www.somerandomdude.com/2006/02/10/font-projects-updated/</link>
		<comments>http://www.somerandomdude.com/2006/02/10/font-projects-updated/#comments</comments>
		<pubDate>Sat, 11 Feb 2006 05:09:12 +0000</pubDate>
		<dc:creator>P.J. Onori</dc:creator>
				<category><![CDATA[Current Events]]></category>
		<category><![CDATA[iconitos]]></category>
		<category><![CDATA[iconography]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[Tonkyou]]></category>

		<guid isPermaLink="false">http://www.somerandomdude.net/blog/current-events/font-projects-updated/</guid>
		<description><![CDATA[I&#8217;ve been slowly cleaning up the small fragments of that remain of my old blog. I finally was able to get the Iconitos and Tonkyou projects in the new blog format. I&#8217;d like to add a little more functionality to these pages, but this alone was a big upgrade. If you haven&#8217;t yet seen these [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been slowly cleaning up the small fragments of that remain of my old blog. I finally was able to get the <a href="http://www.somerandomdude.net/srd-projects/iconitos/">Iconitos</a> and <a href="http://www.somerandomdude.net/srd-projects/tonkyou/">Tonkyou</a> projects in the new blog format. I&#8217;d like to add a little more functionality to these pages, but this alone was a big upgrade.</p>
<p>If you haven&#8217;t yet seen these abstract icon font sets, you may just want to take a look. For what it&#8217;s worth, I think they&#8217;re quite interesting.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.somerandomdude.com/2006/02/10/font-projects-updated/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Same icons, new name: Sanscons</title>
		<link>http://www.somerandomdude.com/2006/02/09/sanscons-new-name/</link>
		<comments>http://www.somerandomdude.com/2006/02/09/sanscons-new-name/#comments</comments>
		<pubDate>Thu, 09 Feb 2006 22:29:00 +0000</pubDate>
		<dc:creator>P.J. Onori</dc:creator>
				<category><![CDATA[Current Events]]></category>
		<category><![CDATA[Icons]]></category>

		<guid isPermaLink="false">http://www.somerandomdude.net/blog/current-events/sanscons-new-name/</guid>
		<description><![CDATA[My poor choice of naming led to a few bumps in the road for my new icon set. The new name for said icons is now Sanscons. I&#8217;ve created an alternate page which will from this point on carry any updates &#8211; so please change your bookmarks and del.icio.us posts. After talking to Dan about [...]]]></description>
			<content:encoded><![CDATA[<p>My poor choice of naming led to a few bumps in the road for my new icon set. The new name for said icons is now <a href="http://www.somerandomdude.net/srd-projects/sanscons">Sanscons</a>. I&#8217;ve created an <a href="http://www.somerandomdude.net/srd-projects/sanscons">alternate page</a> which will from this point on carry any updates &#8211; so please change your bookmarks and del.icio.us posts.</p>
<p>After talking to <a href="http://simplebits.com/">Dan</a> about this issue, I have nothing but respect for him. He&#8217;s a really solid guy and I&#8217;m glad we were able to work things out.</p>
<p>Thanks again Dan.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.somerandomdude.com/2006/02/09/sanscons-new-name/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using apc (Feed is rejected)
Page Caching using apc
Database Caching 1/21 queries in 0.013 seconds using apc
Object Caching 488/528 objects using apc

Served from: www.somerandomdude.com @ 2012-02-09 12:38:18 -->
