<?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>Inspect Element &#187; icons</title>
	<atom:link href="http://inspectelement.com/tag/icons/feed/" rel="self" type="application/rss+xml" />
	<link>http://inspectelement.com</link>
	<description>Web Design &#38; Development Blog</description>
	<lastBuildDate>Tue, 07 Feb 2012 14:31:58 +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>Making the Most of Icons in Web Design</title>
		<link>http://inspectelement.com/articles/making-the-most-of-icons-in-web-design/</link>
		<comments>http://inspectelement.com/articles/making-the-most-of-icons-in-web-design/#comments</comments>
		<pubDate>Thu, 13 Aug 2009 08:00:34 +0000</pubDate>
		<dc:creator>Tom Kenny</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[inspiration]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://inspectelement.com/?p=2066</guid>
		<description><![CDATA[When used effectively, icons can add so much to a siteâ€™s design. They can help identify list items and make navigation a more visual experience as long as the icons have enough relevance to what theyâ€™re representing. A visual representation of content allows a user to scan a page easier than plain text.]]></description>
			<content:encoded><![CDATA[<p>When used effectively, icons can add so much to a site&#8217;s design. They can help identify list items and make navigation a more visual experience as long as the icons have enough relevance to what they&#8217;re representing. Icons as visual representation alongside content allows a user to scan a page easier than plain text.</p>
<h3><strong>Aiding Navigation</strong></h3>
<p>Rather than relying on just text to navigate, new and repeat users can find their way around a website quicker thanks to the mind&#8217;s ability to associate images with what they want when using icons as part of the navigation.</p>
<p><span id="more-2066"></span><strong><a href="http://www.tutorial9.net/">Tutorial9</a></strong></p>
<p><a href="http://www.tutorial9.net/"><img class="alignnone size-full wp-image-2072" title="tutorial9" src="http://inspectelement.com/wp-content/uploads/2009/08/tutorial9.jpg" alt="tutorial9" width="560" height="218" /></a></p>
<h4><a href="http://mediatemple.net/">Media Temple</a></h4>
<p><a href="http://mediatemple.net/"><img class="alignnone size-full wp-image-2073" title="mediatemple" src="http://inspectelement.com/wp-content/uploads/2009/08/mediatemple.jpg" alt="mediatemple" width="560" height="218" /></a></p>
<h4><a href="http://carsonified.com/">Carsonified</a></h4>
<p><a href="http://carsonified.com/"><img class="alignnone size-full wp-image-2085" title="carsonified" src="http://inspectelement.com/wp-content/uploads/2009/08/carsonified.jpg" alt="carsonified" width="560" height="218" /></a></p>
<h4><a href="http://dfw-upa.org/">Dallas Fort Worth</a></h4>
<p><a href="http://dfw-upa.org/"><img class="alignnone size-full wp-image-2096" title="dfw-upa.org" src="http://inspectelement.com/wp-content/uploads/2009/08/dfw-upa.org.jpg" alt="dfw-upa.org" width="560" height="218" /></a></p>
<h4><a href="http://www.sourcebits.com/">Sourcebits</a></h4>
<p><a href="http://www.sourcebits.com/"><img class="alignnone size-full wp-image-2107" title="sourcebits" src="http://inspectelement.com/wp-content/uploads/2009/08/sourcebits.jpg" alt="sourcebits" width="560" height="218" /></a></p>
<h3>Present Multiple Products</h3>
<p>By making the most of icons to display products you are giving the user a clear index of what you have to offer.</p>
<h4><a href="http://envato.com/">Envato</a></h4>
<p><a href="http://envato.com/"><img class="alignnone size-full wp-image-2152" title="envato" src="http://inspectelement.com/wp-content/uploads/2009/08/envato.jpg" alt="envato" width="560" height="218" /></a></p>
<p><strong><a href="http://37signals.com/">37 Signals</a></strong></p>
<p><a href="http://37signals.com/"><img class="alignnone size-full wp-image-2082" title="baseCamp" src="http://inspectelement.com/wp-content/uploads/2009/08/baseCamp.jpg" alt="baseCamp" width="560" height="218" /></a></p>
<h4 style="font-size: 1em;"><a href="http://www.viget.com/">Viget Labs</a></h4>
<p><a href="http://www.viget.com/"><img style="border: 0px initial initial;" title="viget" src="http://inspectelement.com/wp-content/uploads/2009/08/viget.jpg" alt="viget" width="560" height="218" /></a></p>
<h4><a href="http://www.panic.com/">Panic</a></h4>
<p><a href="http://www.panic.com/"><img class="alignnone size-full wp-image-2089" title="panic" src="http://inspectelement.com/wp-content/uploads/2009/08/panic.jpg" alt="panic" width="560" height="218" /></a></p>
<h4><a href="http://www.atebits.com/">Atebits</a></h4>
<p><a href="http://www.atebits.com/"><img style="border: 0px initial initial;" title="atebits" src="http://inspectelement.com/wp-content/uploads/2009/08/atebits.jpg" alt="atebits" width="560" height="218" /></a></p>
<h3>Display Features of a Product or Service</h3>
<p>Feature descriptions are usually constructed by an unordered list with a heading and some text. By adding a relevant icon not only do you make the list visually more appealing but the list items become more clearly defined. As a bonus, this improves readability which encourages users to explorer the feature set.</p>
<h4><a href="http://280slides.com/">280 Slides</a></h4>
<p><a href="http://280slides.com/"><img style="border: 0px initial initial;" title="280slides" src="http://inspectelement.com/wp-content/uploads/2009/08/280slides.jpg" alt="280slides" width="560" height="218" /></a></p>
<h4><a href="http://www.silverbackapp.com/">Silverback</a></h4>
<p><a href="http://www.silverbackapp.com/"><img style="border: 0px initial initial;" title="silverback" src="http://inspectelement.com/wp-content/uploads/2009/08/silverback.jpg" alt="silverback" width="560" height="218" /></a></p>
<h4><a href="http://wpremix.com/features/">WP Remix</a></h4>
<p><a style="text-decoration: none;" href="http://wpremix.com/features/"><img class="alignnone size-full wp-image-2079" title="wpRemix" src="http://inspectelement.com/wp-content/uploads/2009/08/wpRemix.jpg" alt="wpRemix" width="560" height="218" /></a></p>
<h4><a href="http://www.panic.com/coda/">Coda</a></h4>
<p><a href="http://www.panic.com/coda/"><img class="alignnone size-full wp-image-2098" title="coda" src="http://inspectelement.com/wp-content/uploads/2009/08/coda.jpg" alt="coda" width="560" height="218" /></a></p>
<p><a href="http://www.gmx.com/">GMX</a></p>
<p><a href="http://www.gmx.com/"><img class="alignnone size-full wp-image-2140" title="gmx.com" src="http://inspectelement.com/wp-content/uploads/2009/08/gmx.com.jpg" alt="gmx.com" width="560" height="218" /></a></p>
<h4><a href="http://goodbarry.com/overview">Good Barry</a></h4>
<p><a href="http://goodbarry.com/overview"><img class="alignnone size-full wp-image-2109" title="goodBarry" src="http://inspectelement.com/wp-content/uploads/2009/08/goodBarry.jpg" alt="goodBarry" width="560" height="218" /></a></p>
<h4><a href="http://www.edopter.com/">Edopter</a></h4>
<p><a href="http://www.edopter.com/"><img class="alignnone size-full wp-image-2130" title="edopter" src="http://inspectelement.com/wp-content/uploads/2009/08/edopter1.jpg" alt="edopter" width="560" height="218" /></a></p>
<h4><a href="http://www.activecollab.com">activeCollab</a></h4>
<p><a href="http://www.activecollab.com"><img class="alignnone size-full wp-image-2105" title="activeCollab" src="http://inspectelement.com/wp-content/uploads/2009/08/activeCollab.jpg" alt="activeCollab" width="560" height="218" /></a></p>
<h4><a href="http://expressionengine.com/">Expression Engine</a></h4>
<p><a href="http://expressionengine.com/"><img class="alignnone size-full wp-image-2175" title="expressionEngine" src="http://inspectelement.com/wp-content/uploads/2009/08/expressionEngine.jpg" alt="expressionEngine" width="560" height="218" /></a></p>
<h3>Use Wisely</h3>
<p>Just because icons work well in the above examples doesn&#8217;t mean that they will work effectively for everything. Poorly designed or badly chosen icons could have the effect of confusing users as they may misrepresent the content.</p>
<p>Used well as describe and icons can have a great effect on how users navigate and read a site.</p>
]]></content:encoded>
			<wfw:commentRss>http://inspectelement.com/articles/making-the-most-of-icons-in-web-design/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>

