<?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>Amazing and Inspiring Design &#187; Tools</title>
	<atom:link href="http://www.yodspica.net/category/tools/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.yodspica.net</link>
	<description>YODspica Ltd Blog Group</description>
	<lastBuildDate>Sun, 28 Mar 2010 12:39:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>22 Amazing Adobe AIR Applications</title>
		<link>http://www.yodspica.net/2009/09/22-amazing-adobe-air-applications/</link>
		<comments>http://www.yodspica.net/2009/09/22-amazing-adobe-air-applications/#comments</comments>
		<pubDate>Tue, 15 Sep 2009 12:45:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[applications]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[resources]]></category>

		<guid isPermaLink="false">http://www.yodspica.net/?p=137</guid>
		<description><![CDATA[
			
				
			
		
 AIR applications will help you with a multitude of tasks that will  make your life easier, by helping  workflow design process.  Here we present terrific applications that will help you in your design and image-editing oriented tasks.
If you don’t have Adobe AIR installed, you can download it free  from get.adobe.com/air/.
1. ImageSizer

 [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.yodspica.net%2F2009%2F09%2F22-amazing-adobe-air-applications%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.yodspica.net%2F2009%2F09%2F22-amazing-adobe-air-applications%2F&amp;style=normal&amp;service=digg.com" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://www.adobe.com/products/air/"></a> AIR applications will help you with a multitude of tasks that will  make your life easier, by helping  workflow design process.  Here we present <strong>terrific applications</strong> that will help you in your <strong>design and image-editing oriented tasks</strong>.</p>
<p>If you don’t have Adobe AIR installed, you can download it free  from <a href="http://get.adobe.com/air/"><strong>get.adobe.com/air/</strong></a>.</p>
<h3>1. <a title="Permanent Link to Professional Photo Retouching Bikini Model" href="http://www.psyked.co.uk/adobe/apollo/imagesizer-updated-and-now-with-a-crop-tool.htm">ImageSizer</a></h3>
<p><a href="http://www.psyked.co.uk/adobe/apollo/imagesizer-updated-and-now-with-a-crop-tool.htm"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/91a4c_22-01_imagesizer.jpg" alt="ImageSizer" width="550" height="275" /></a></p>
<p><span> </span></p>
<p><em>ImageSizer</em> is a  batch image processor tool built to resize, optimize and rename multiple JPG  files. Once your images are processed, they can be exported as a single ZIP  file, making it convenient to transfer groups of images on the internet.</p>
<h3>2. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;offeringid=10763&amp;marketplaceid=1">Contrast-A</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;offeringid=10763&amp;marketplaceid=1"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/132d5_22-03_contrast-a.jpg" alt="Contrast-A" width="550" height="275" /></a></p>
<p><em>Contrast-A</em> is a  great Adobe AIR application for designers wanting to easily create color  schemes for their design. The tool comes with a contrast checker based on <a href="http://www.w3.org/TR/WCAG10/">WCAG</a> standards for accessible color  contrast ratios.</p>
<h3>3. <a href="http://code.google.com/p/colorbrowser/">Color Browser</a></h3>
<p><a href="http://code.google.com/p/colorbrowser/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/dc624_22-04_color_browser.jpg" alt="Color Browser" width="550" height="275" /></a></p>
<p><em>Color Browser</em> is  made for archiving and organizing your color palette collections. It is a  terrific way to store your favorite color schemes for later use in your  designs.</p>
<h3>4. <a href="http://richardsprojects.co.uk/products/font-picker/">Font Picker</a></h3>
<p><a href="http://richardsprojects.co.uk/products/font-picker/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/dc624_22-15_font_picker.jpg" alt="Font Picker" width="550" height="275" /></a></p>
<p>This simple tool helps you pick the best font for a project. <em>Font Picker</em> shows you fonts installed  on your computer with customizable sample text for quick and easy font  management and selection.</p>
<h3>5. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;categoryid=6&amp;orderby=mostrecent&amp;orderdirection=asc&amp;marketplaceid=1&amp;offeringid=10124">XeIMG  Image Editor</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;categoryid=6&amp;orderby=mostrecent&amp;orderdirection=asc&amp;marketplaceid=1&amp;offeringid=10124"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/ff7b6_22-05_xeimg_image_editor.jpg" alt="XeIMG Image Editor" width="550" height="275" /></a></p>
<p><em>Xe-IMG Editor</em> is a  simple and free image editor built on top of the Adobe AIR framework. Because  of AIR’s cross-platform capabilities &#8211; designers who work with multiple  operating systems that need a quick and easy image editor will find this tool  helpful.</p>
<h3>6. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10164">WebKut</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10164"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/86b71_22-07_webkut.jpg" alt="WebKut" width="550" height="275" /></a></p>
<p><em>WebKut</em> is a free  Adobe AIR application that will enable you to capture web page screen shots (or  only certain sections of a web page). The three screen capture options are: the  entire page, the current view, or only a selection.</p>
<h3>7. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10362">SWFShot</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10362"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/28f4a_22-12_swfshot.jpg" alt="SWFShot" width="550" height="275" /></a></p>
<p><em>SWFShot</em> is an  Adobe AIR based application that allows you to create high-resolution images of  Flash content stored on your hard drive.</p>
<h3>8. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10142">Caliper  Project</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10142"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/8fa41_22-08_betadesigns_caliper.jpg" alt="Caliper Project" width="550" height="275" /></a></p>
<p>Easily measure things on the screen with the excellent Adobe  AIR app called <em>Caliper</em>. Caliper can  be overlaid on top of any program &#8211; so it’s an awesome tool to use for  measuring in between different applications.</p>
<h3>9. <a href="http://iplotz.com/">iPlotz</a></h3>
<p><a href="http://iplotz.com/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/8fa41_22-14_iplotz.jpg" alt="iPlotz" width="550" height="275" /></a></p>
<p><em>iPlotz</em> is a  downloadable Adobe AIR application for wireframing and creating clickable and  navigable mockups of websites and app interfaces. It comes with collaboration  and project management tools for designers working in teams.</p>
<h3>10. <a href="http://mattkenefick.com/blog/2008/11/fractal4d-first-release/">Fractal4D</a></h3>
<p><a href="http://mattkenefick.com/blog/2008/11/fractal4d-first-release/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/12fbb_22-02_fractal4d.jpg" alt="Fractal4D" width="550" height="275" /></a></p>
<p>With the <em>Fractal4D</em> Adobe AIR application, you can draw fractal swirls that can then be exported as  a vector file or in PNG format. Use the fractals you create to enhance your  graphic designs.</p>
<h3>11. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10299">Designview</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10299"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/09949_22-06_designview.jpg" alt="Designview" width="550" height="275" /></a></p>
<p>This AIR app is for creating Flex Graphical User Interfaces  (GUI) and is great for designers wishing to easily craft interfaces for their  Flex-based apps.</p>
<h3>12. <a href="http://www.splashup.com/light/">Splashup Light</a></h3>
<p><a href="http://www.splashup.com/light/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/09949_22-17_splashup_light.jpg" alt="Splashup Light" width="550" height="275" /></a></p>
<p><em>Splashup Light</em> is  a simple image editor that allows you to change levels, contrast/brightness,  hue saturation, text editing, and shapes. It helps to enhance and improve your existing  photos.</p>
<h3>13. <a href="http://www.mindomo.com/desktop/">Mindomo</a></h3>
<p><a href="http://www.mindomo.com/desktop/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/64dba_22-19_mindomo_desktop.jpg" alt="Mindomo" width="550" height="275" /></a></p>
<p><em>Mindomo Desktop</em> is  a <a href="http://en.wikipedia.org/wiki/Mind_map">mind mapping</a> application  which can be deployed onto your desktop and used across Linux, Mac OS, and  Windows operating systems. It allows you to work on your mind maps offline.</p>
<h3>14. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;offeringid=10180&amp;marketplaceid=1">Flickr  Desktop Search</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;offeringid=10180&amp;marketplaceid=1"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/64dba_22-09_flickr_desktop_search.jpg" alt="Flickr Desktop Search" width="550" height="275" /></a></p>
<p>One thing that many designers will often have at hand is a  Flickr account for storing their own images and stock photos. With the <em>Flickr Desktop Search</em> tool, you can  easily search Flickr for interesting photos.</p>
<h3>15. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10036">CleVR  Stitcher</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10036"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/e00bc_22-10_clevr_stitcher.jpg" alt="CleVR Stitcher" width="550" height="275" /></a></p>
<p>If you’ve ever needed to piece together several photos to  create a wide panoramic photo &#8211; <em>CleVR  Sticher</em> is the Adobe AIR app you’ve been looking for. It also has basic  photograph editing capabilities such as an option to correct/adjust exposures  (for color matching).</p>
<h3>16. <a href="http://www.happytoad.com/?page_id=72">ImageDropr</a></h3>
<p><a href="http://www.happytoad.com/?page_id=72"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/3f1f4_22-11_imagedropr.jpg" alt="ImageDropr" width="550" height="275" /></a></p>
<p>Staying in line with the assertion that designers often have  a Flickr account &#8211; you should also check out <em>ImageDropr</em>, which is a Flickr tool for easily managing your own  photos on Flickr. With it, you can upload, tag, edit your photos’ titles, and  more &#8211; all from within your desktop.</p>
<h3>17. <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10215">PhotoTable</a></h3>
<p><a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&amp;marketplaceid=1&amp;offeringid=10215"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/1cf21_22-13_phototable.jpg" alt="PhotoTable" width="550" height="275" /></a></p>
<p>With this simple but highly useful Adobe AIR application,  you can easily save images from the web via a drag-and-drop interface.</p>
<h3>18. <a href="http://snook.ca/snoto/">Snoto Photo</a></h3>
<p><a href="http://snook.ca/snoto/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/1cf21_22-16_snoto_photo.jpg" alt="Snoto Photo" width="550" height="275" /></a></p>
<p><em>Snoto Photo</em> is a  desktop application using Adobe AIR technology for browsing your recent photos  and other images. You can also create a slideshow of your photos with AIR app.</p>
<h3>19. <a href="http://labs.artandmobile.com/tiltshift/">TiltShift  Generator</a></h3>
<p><a href="http://labs.artandmobile.com/tiltshift/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/f7ae9_22-18_tiltshift_generator.jpg" alt="TiltShift Generator" width="550" height="275" /></a></p>
<p>If you’ve ever wanted to create a Tilt-shift image without  blowing your hard-earned money on expensive and limited-use photo lenses, check  out the <em>TiltShift Generator</em> AIR  application.</p>
<h3>20. <a href="http://blog.onebyonedesign.com/?p=146">Website  Generation Tool Take II</a></h3>
<p><a href="http://blog.onebyonedesign.com/?p=146"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/0b692_22-20_website_generation_tool_take_ii.jpg" alt="Website Generation Tool Take II" width="550" height="275" /></a></p>
<p><em>Website Generation  Tool Take II</em> is for creating simple site templates for those quick and easy  design jobs.</p>
<h3>21. <a href="http://www.zflick.net/">zFlick</a></h3>
<p><a href="http://www.zflick.net/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/2a0eb_22-21_zflick.jpg" alt="zFlick" width="550" height="275" /></a></p>
<p><em>zFlick</em> is a simple  desktop application for viewing Flickr images. It enables you to easily search  Flickr for that perfect photo. Check out this YouTube video to see <a href="http://sixrevisions.com/category/graphics-design/">zFlickr</a> in action.</p>
<h3>22. <a href="http://www.pixelwindowapp.com/">PixelWindow</a></h3>
<p><a href="http://www.pixelwindowapp.com/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/5cecf_22-22_pixelwindow.jpg" alt="PixelWindow" width="550" height="275" /></a></p>
<p><em>PixelWindow</em> is a  straightforward and lightweight AIR application for measuring elements on your  screen in pixels.</p>
<h3>About the Author</h3>
<p><strong>Tomas Laurinavičius</strong> graphic design and web development, based in Lithuania.</p>
<p><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/b49eb_czgf_QyHoS4" alt="" width="1" height="1" /><br />
Please feel free to add a comment to this post, by clicking on title. Thank you.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.yodspica.net/2009/09/22-amazing-adobe-air-applications/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Web 2.0 Examples and Traditional Design Rules Combined</title>
		<link>http://www.yodspica.net/2009/09/web-2-0-examples-and-traditional-design-rules-combined/</link>
		<comments>http://www.yodspica.net/2009/09/web-2-0-examples-and-traditional-design-rules-combined/#comments</comments>
		<pubDate>Thu, 03 Sep 2009 10:36:30 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[examples]]></category>
		<category><![CDATA[resources]]></category>

		<guid isPermaLink="false">http://www.yodspica.net/?p=97</guid>
		<description><![CDATA[
			
				
			
		
Web 2.0 is an ever-evolving definition of design standards.
As a result, it has strengthened common design misnomers as it focus on usability, interface, and readability. In this post it is presented a collection of 25 sites showcasing how Web 2.0 and traditional design practices from stunning websites.
1. Pixel Matrix Design

Josh Pyles latest iteration of Pixel [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.yodspica.net%2F2009%2F09%2Fweb-2-0-examples-and-traditional-design-rules-combined%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.yodspica.net%2F2009%2F09%2Fweb-2-0-examples-and-traditional-design-rules-combined%2F&amp;style=normal&amp;service=digg.com" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://www.webdesignerdepot.com/2009/09/25-examples-of-web-2-0-and-traditional-design-rules-coming-together/"><img class="alignleft" src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/20dec_thumb.jpg" alt="" width="200" height="160" /></a><strong>Web 2.0 is an ever-evolving definition of design standards</strong>.</p>
<p>As a result, it has strengthened common design misnomers as it focus on usability, interface, and readability. In this post it is presented a collection of 25 sites showcasing how Web 2.0 and traditional design practices from stunning websites.</p>
<h2>1. Pixel Matrix Design</h2>
<p><a href="http://www.pixelmatrixdesign.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/20dec_pixelmatrix.jpg" alt="" width="612" height="603" /></a></p>
<p>Josh Pyles latest iteration of Pixel Matrix is a stunner, and makes especially good use of color and a strong grid system.</p>
<p>If you check out the “About” page, you can see that Josh has included a nice photo of his workspace.</p>
<p>Below this shot is a great balance of Web 2.0 styled fonts, which establish an extremely strong hierarchy of information. He keeps his own bio small and tucked into the sidebar, and balances the larger text of the content area with smaller, sophisticated type in the sidebar.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Great grid system.</li>
<li>Wonderful color theory</li>
<li>Strong hierarchy of information</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Beautiful gradients.</li>
<li>Subtle details.</li>
<li>Large, highly legible font choices.</li>
<li>A great number of ways to stay connected.</li>
<li>Even the contact form has a nice implementation of rounded corners!</li>
</ul>
<p><br class="spacer_" /></p>
<h2>2. MuttInk</h2>
<p><a href="http://www.muttink.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/20dec_muttink.jpg" alt="" width="612" height="503" /></a></p>
<p>Lately texture seems to be the greatest thing since rounded corners, and though MuttInk’s site might not be classified as typical Web 2.0, one glance is all that’s required to know that Jeremy Holmes (the man behind the work) is an amazing designer and graphic artist.</p>
<p>An attention to detail, texture, and a strong identity places this as a personal fave.</p>
<p>Even though the days of overly-muted colors are somewhat behind us (which is a good thing, in my opinion), I’m still a fan of subtle, earthy tones that are complimented with bright accents, and MuttInk has pulled this off brilliantly.</p>
<p>The turquoise atop the beige really pops, and maintains the “drafting table” feel that permeates the site. And though the type is on the tiny side, and a bit tough to read in spots, it still looks great on the page.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Extremely close attention to detail.</li>
<li>Nice type (though perhaps too small).</li>
<li>Great brand identity.</li>
<li>Great use of space, particularly on the portfolio pages.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Great use of texture.</li>
<li>Big, professional images showcasing the work.</li>
<li>Quick access to social linkage.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>3. 45 Royale</h2>
<p><a href="http://www.45royale.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/033b5_45-royale.jpg" alt="" width="612" height="521" /></a></p>
<p>The portfolio over at 45 Royale not only showcases an amazing array of work, but it shows that the team behind the site understands good use of multiple design standards. It’s a fantastic blend of Web 2.0 fallbacks, but has a solid foundation in traditional design standards (and just look at those colors!).</p>
<p>In particular, 45 Royale has one of the best grid systems I’ve seen lately, and the images they’ve chosen to showcase the work really mesh well with the fluorescent colored header  above.</p>
<p>Seeing the color theory and organization mesh with such great harmony is always a treat, and they’ve supplemented it all with a highly sophisticated blend of fonts, both large and small.</p>
<p>Bright colors surrounding a secondary palette of gray, white, and black? Awesome.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>One of the better examples of a grid system.</li>
<li>Plenty of whitespace and breathing room.</li>
<li>Brilliant color choice.</li>
<li>Good flow of information.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>The colors simply <em>sing</em>…so much that I listed it in both categories.</li>
<li>Jumbo-sized type is highly legible, though tasteful.</li>
<li>Great use of Illustration and graphics.</li>
<li>Multitude of projects are well organized and nicely displayed.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>4. Pinch Zoom</h2>
<p><a href="http://pinchzoom.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/033b5_pinch-zoom.jpg" alt="" width="612" height="584" /></a></p>
<p>I’m a sucker for great illustration, especially when it’s presented atop a wonderful example of white space. I love this site so much that simply clicking through the portfolio is a blast. Great whitespace, great grid system, and wonderful use of JavaScript; these things have a way of speaking to me (yes, I’m in front of a computer quite a lot).</p>
<p>The important thing to keep in mind when we’re faced with the many technologies available these days, especially the fancy fades and trickery made possible by JavaScript, is to taper them and reign them in.</p>
<p>Remember the late nineties when Flash was all the rage? Remember how sick of Flash we all got afterwards? Good Web 2.0 standards are just as much about discipline as it is about design, and Pinch Zoom has it well under control.</p>
<p>They sprinkle their site with the fancy goodness, yet keep it lean and fun, with virtually zero time waiting on the images.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Another great grid system (seeing a pattern here?).</li>
<li>Black on white never seems to get old.</li>
<li>Nice balance of fonts and headlines. (The small font, though legible, could maybe be a point size or two larger).</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>The JavaScript portfolio slider is dang fun and effective.</li>
<li>Interface is minimalist and direct.</li>
<li>Varied use of Illustration is a great touch.</li>
<li>Embraces the web’s current technology without becoming cumbersome.</li>
<li>Unique solutions to page layout (Check out the mega-dropdown when clicking the info tab. There’s virtually an entire website hiding up there!).</li>
</ul>
<p><br class="spacer_" /></p>
<h2>5. Cameron Moll</h2>
<p><a href="http://www.cameronmoll.com/portfolio"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/033b5_cameron-moll.jpg" alt="" width="612" height="575" /></a></p>
<p>I’ve always been a fan of Cameron’s work, and as you can tell he tends to stay on the traditional side of the design playing field. Though his blog site tends to fall within the traditional side of sophisticated design and small fonts there’s no denying the elegance and beauty of his portfolio page, which is a fantastic balance of the new and the traditional.</p>
<p>The colors are vibrant and the font choices mesh with the overall feel, but again, the type can get pretty small in places, which is a Web 2.0 no-no. But who am I to nit-pick? Cameron has found great success and is the man behind Authenticjobs.com, a great resource for designers (and one that’s helped pay my bills).</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Well-structured content.</li>
<li>Subtle color variations are a nice touch.</li>
<li>Type looks elegant, though tends to ride on the small side of the spectrum. Even so, it’s legible and looks nice.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Very nice use of texture.</li>
<li>Portfolio contains nice images of the work, which are very straightforward and easy to navigate.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>6. Metalab’s “Fluid” Tumblr theme</h2>
<p><a href="http://fluidtheme.tumblr.com/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/a4b1b_fluid.jpg" alt="" width="612" height="586" /></a></p>
<p>The only Tumblr theme to make the list is entitled “Fluid,” by Metalab design. It made the list because of a simple reason: It’s a freaking beautiful example of Web 2.0 at its best. Simple, clean, and gleaming with color.</p>
<p>One might consider it a bit one-side in this comparison (it’s a Web 2.0 catch-all). That’s because Metalab is known for setting standards in the Web 2.0 arena, and this site is a testament to that fact. Metalab Design keeps the foundational rules in mind, however, and keeps the structure simple and well organized.</p>
<p>Transparency and overlapping graphics are one of the newer trends in Web 2.0. They give a site a great amount of depth and imbue a cutting edge, almost futuristic look. Metalab’s “Fluid” has embraced this concept and, better yet, delivered it to the masses as a downloadable theme.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Simple, effective structure.</li>
<li>Stands out in the masses of Tumblr themes.</li>
<li>Contemporary (though simple) color scheme.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Big, vibrant photography.</li>
<li>Ups the ante for cutting edge Web 2.0 design</li>
<li>Highly legible fonts and headers.</li>
<li>Use of rounded corners and gradients are taken to the extreme, but they are presented in a fun, modern Web 2.0 solution.</li>
<li>Icons are a great, minimalist way to navigate the options for each post.</li>
<li>Let’s not forget about the transparent backgrounds!</li>
</ul>
<p><br class="spacer_" /></p>
<h1>7. Viget</h1>
<p><a href="http://www.viget.com/inspire"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/a4b1b_viget.jpg" alt="" width="612" height="521" /></a></p>
<p>Oh boy. This site. It gets me every time. Sure I’m a softy for texture, but this designer has also captured the subtlety of good color theory and hierarchy.</p>
<p>I mean just check out those portraits near the bottom! They’re eye-catching yet they don’t compete with what could be a very complicated design flow. Let’s not forget the great font choices and watercolor feel. The icing on the cake is that, though the site is image-heavy, it loads in a snap!</p>
<p>Another cool aspect of this site is that the designers want to share a lot of information with their community, and it’s not information that sells them as designers, but information that they feel typical users might find valuable.</p>
<p>They allow you to dig deeper without cramming their needs down your throat, which is always a welcome practice.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Well-structured content.</li>
<li>Beautiful color and type.</li>
<li>Though the fonts are on the small side, the main content is still easy to read.</li>
<li>Great artwork fuses seamlessly into the design (cool portraits).</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Watercolor theme is extremely contemporary, and though it’s image-heavy, it’s been engineered to load lean and mean.</li>
<li>Sidebar content is well organized and content-driven.</li>
<li>Unique solution to the “Speech Bubble” box in the sidebar.</li>
<li>Lots of shared, content-driven information.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>8. FeelWire</h2>
<p><a href="http://feelwire.com/"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/a4b1b_feelwire.jpg" alt="" width="612" height="785" /></a></p>
<p>Another amazing example of great whitespace is Feelwire. Black type on white backgrounds, with great shades of gray in between, never seems to get old. Add a couple of brightly colored icons, and you have yourself a simple, yet effective site. It’s all about simplicity here (heck, they only have one page!).</p>
<p>The Web 2.0 styled icons serve as the centerpiece for this page, and they go a long way in holding the site together. They also prevent the site from being overrun with text, and give the user something to be curious about.</p>
<p>Upon rolling over these icons, I was really happy with what I found: A very simple hover status that gave me the information I was looking for, doing so with the ever-popular Web 2.0 “Speech Bubble”. A great touch.</p>
<p>Last thing: Though I like the red links, which also pop off of the page and interact well with the icons, I do think they should make the contact link a bit more noticeable. As of now it’s a bit too tucked into the content, and I really had to search for a way to get in touch with these talented developers. Just sayin’.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Short, sweet, and to the point: a single page site.</li>
<li>White space!</li>
<li>Subtle, tasteful font choices.</li>
<li>Nice, basic layout.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>The glossy icons pop off the page, in a good way.</li>
<li>Really cool rollovers on the icons keep the site uncluttered, yet give you the information you need in a fun way.</li>
<li>Nice avatars add a human element.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>9. Agami Creative</h2>
<p><a href="http://agamicreative.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/a4b1b_agami.jpg" alt="" width="612" height="527" /></a></p>
<p>Okay, maybe it <em>is</em> just a personal thing with these highly textured sites, but what Agami Creative does, it does very well. It’s another contemporary example of how image-heavy sites can become a perfectly acceptable solution in a day of high-speed connections.</p>
<p>The centerpiece of this site is most definitely the watercolor header, which serves as a perfect backdrop to the crafty logo design. It also houses the navigation, placing just enough emphasis on its location, yet without insulting the user (because most people know where to find the navigation these days.).</p>
<p>Clicking over to the portfolio page, you’ll notice a layout with the perfect amount of breathing space and a strong grid system.</p>
<p>Simple images contribute to the work and draw your eyes to the individual projects, like looking through a keyhole to the final result. All of this is wrapped up with a sophisticated serif font for the headers and a highly legible sans-serif font for the body text.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>More beautiful use of color theory.</li>
<li>Great artwork.</li>
<li>Interesting combination of type/fonts.</li>
<li>Artistic, hand-drawn logo has a feel that is carried throughout the site.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Oversized navigation makes it easy to move around the site.</li>
<li>They make it really easy to get in touch.</li>
<li>Use of avatars is a good idea (though honestly I think they could have done better with these. Not sure how the anime look is supposed to mesh with this site other than the Asian influence?).</li>
<li>Love the texture!</li>
</ul>
<p><br class="spacer_" /></p>
<h2>10. Adit Shukla</h2>
<p><a href="http://aditshukla.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/39336_adit-shukla.jpg" alt="" width="612" height="523" /></a></p>
<p>Another site with a great illustrative approach, Designer Adit Shukla also knows how to put together a great color scheme, and even plays with a nice solution to the sidebar.</p>
<p>For some odd reason, many sidebars are sloppy and overlooked, as if designers have permission to ignore the rules of good design when throwing together the sidebar of a site. Not with this site.</p>
<p>Though the content is minimal (even a bit sparse), one can’t help but love the creativity involved, especially in the illustrative header, which adds a well-needed amount of depth. The navigational tabs up above are a nice touch as well.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Vibrant colors.</li>
<li>Creative solutions to common elements, such as the sidebar and the header.</li>
<li>Illustration adds a lot of depth.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Simple layout with a well-developed header illustration, which also houses the navigation.</li>
<li>Large type is effective.</li>
<li>Multiple ways to navigate the site (though honestly, I’m not convinced this is such a good thing).</li>
<li>Transparent tabs are a nice touch.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>12. Cream Scoop</h2>
<p><a href="http://creamscoop.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/39336_cream-scoop.jpg" alt="" width="612" height="476" /></a></p>
<p>The first thing you’ll notice about Cream Scoop is the bold selection of colors used throughout the site. They’re not afraid to take the colors up a notch from the norm, and the result is as refreshing as it is different.</p>
<p>Though the colors are bold, there are also subtle blends of strong type and gradients that are peppered throughout the site. Notice how the background gradient brightens at the top, like the edge of a spotlight, to highlight the otherwise minimal navigation. The type is well organized and balanced, with a distinctly Web 2.0 feel.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Bold selection of colors, yet a selection that works in surprisingly effective ways.</li>
<li>Minimalist navigation that gets the job done.</li>
<li>Great use of playful illustration.</li>
<li>Layout is structured but fun.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Fantastic use of a gradient in the background.</li>
<li>Bright blue really grabs your attention and directs it to the important stuff.</li>
<li>Cool use of avatars on the about page (how old are these guys?).</li>
<li>Great fonts used throughout.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>13. Carbonica</h2>
<p><a href="http://www.carbonica.org"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/39336_carbonica.jpg" alt="" width="612" height="643" /></a></p>
<p>Carbonica forgoes the gradients and shiny goodness of Web 2.0 and goes for a “pieced together” look reminiscent of a scrapbook. Great use of texture and animation, but also a really fun take on hand-drawn type.</p>
<p>Be sure to scroll down a bit and check out the icons, which also fit the theme perfectly!</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Basic structure is in play.</li>
<li>Hand-crafted lettering goes well with the theme of the site.</li>
<li>The animation is a nice touch (but sorry, the use of Flash keeps this point out of the Web 2.0 Category).</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>The texture is great.</li>
<li>Drop shadows add realistic depth.</li>
<li>Nice icons, photos, and illustration.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>14. DSGN + DVLP</h2>
<p><a href="http://www.dsgndvlp.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/0bb75_DSGN+DVLP.jpg" alt="" width="612" height="594" /></a></p>
<p>Again the overall black and white color scheme works for this site, and they accent this direction with some clean icons pulled right out of the Web 2.0 handbag.</p>
<p>The homepage stands on its own as a sort of splash page, and has a good mix of icons, strong layout, and even a bit of photography. All of these elements come together in a sophisticated way and manage to emit quite a bit of energy.</p>
<p>You’ll notice that the secondary pages use a separate, 3-column template to serve up the information. It’s all very much a minimalist design, but that’s not a bad thing.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Black, white and gray offer a distinct feel.</li>
<li>Good balance of type on the homepage.</li>
<li>3-column secondary page template allows a consistent flow of information once you navigate away from the homepage.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Social media awareness is definitely in play.</li>
<li>Glossy icons scattered throughout add needed color.</li>
<li>Good mix of photography and icons.</li>
<li>Jumbo icons are featured on the secondary pages.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>15. Marchand de Trucs</h2>
<p><a href="http://www.marchanddetrucs.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/0bb75_marchand.jpg" alt="" width="612" height="592" /></a></p>
<p>It contains wonderful artwork and, behind it all, a great foundation and structured content. Not too bad for what (I think) appears to be an online magic shop!</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Intense attention to detail.</li>
<li>Color theory is well in play, and it’s a very involved palette at that.</li>
<li>Good use of fonts that follow the general theme of the site.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Extremely nice use of illustration as a header</li>
<li>Relatively large icons.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>16. Paiko</h2>
<p><a href="http://paiko.de"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/09ea8_paiko.jpg" alt="" width="612" height="538" /></a></p>
<p>Paiko, though simple, is one of my favorite sites on the list. It comes across as a split blend of traditional design staples and Web 2.0 enhancements: Good type of all sizes (including the very Web 2.0 mega-headlines), great whitespace, and of course the ever-important grid that holds it all together.</p>
<p>The choice of adding texture in the background really sets the site apart, and adds another layer to the already strong design; it is treated with care, and not overly used as it is in some sites. This texture, combined with the more sophisticated appeal of the site, goes a long way in strengthening Paiko’s identity.</p>
<p>Browse over to the portfolio page to see an example of great spacing and grid structure, not to mention some fun examples of well-cropped images.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Simple, two-column grid structure with gutter space that gives it a nice airy feel. This structure is carried throughout the site, which gives it a very consistent flow.</li>
<li>Crafty feel adds a nice touch, without being overbearing.</li>
<li>Font variations and color are very sophisticated.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Jumbo-text!</li>
<li>The headline is huge and highly legible, and plays nicely against the smaller type below.</li>
<li>Great images and layout on the portfolio page.</li>
<li>Conservative use of texture adds to the overall identity.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>17. Matt Dempsey</h2>
<p><a href="http://www.mattdempsey.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/d4f9b_mattdempsey.jpg" alt="" width="612" height="504" /></a></p>
<p>On the other extreme of the texture spectrum, we have a site by Matt Dempsey. Now, there’s definitely a thing as too much texture, and some would have a valid point if they argued that this site goes to far.</p>
<p>Matt isn’t afraid to break a few rules that have always bugged me (like keeping information above the fold, an idea I feel was invented at a round-table discussion of over-thinking marketing folks. I say so because I once was one of those marketing folks.).</p>
<p>When it comes down to it, Matt Dempsey presents his work, and his site, in a bold and “in your face” manner. And breaking a few rules is what being a designer is all about, whether the rules are old or new.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Believe it or not, there’s a simple grid system underlying the texture.</li>
<li>Distinct and unique</li>
<li>Not afraid to break a few rules</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Matt uses an obviously Web 2.0 approach to his fonts and logo</li>
<li>Good use of technology on the interior pages (the JavaScript slider is a cool touch).</li>
<li>Every bit of important information is huge and easy to read.</li>
<li>Portfolio presents the work in a fun, high-tech way.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>18. Digital Mash</h2>
<p><a href="http://digitalmash.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/d4f9b_digital-mash.jpg" alt="" width="612" height="505" /></a></p>
<p>With Digital Mash, you can see that plenty of thought went into the items they wished to include in the site, or better yet, the items they chose to leave out.</p>
<p>Being able to cut back the fat is an important practice for any designer, and Digital Mash lays out the basics, and only the basics. Open the page and you’ll know within seconds what the author of the site is all about.</p>
<p>The smooth gradient of the background does a great job of presenting the content in a sophisticated manner. From the clean type, to the punchy graphic of the illustration, the site keeps it simple.</p>
<p>The best part has to be when you dig deeper into the site. Head to the work page and you’ll find a portfolio presented in an almost old-fashioned way; the individual pieces look as though they’re ready to be printed and bound into a leather attache case.</p>
<p>However, the sleek presentation, the dropshadows, and the small details (such as the slightly bent corners of each piece), give it all a contemporary slant. Combining the new and the old. Gotta love it.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Trimmed away unnecessary elements.</li>
<li>Vibrant colors on the homepage and in the header of the secondary pages add a vibrant accent to the gray background.</li>
<li>Hierarchy of information is strong, and so is the general flow of the site.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Amazing presentation of the portfolio images; dropshadows, upturned edges, and small details really bring this site to a higher standard.</li>
<li>Nice gradient in the background really presents the information well.</li>
<li>Large type and oversized imagery are friendly to the eyes.</li>
<li>Very cool navigation solution.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>19. Kyan Media</h2>
<p><a href="http://kyanmedia.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/d4f9b_kyan.jpg" alt="" width="612" height="601" /></a></p>
<p>Kyan Media is another site that leans heavily on the Web 2.0 side of the spectrum. The cloud design and the vibrant blue color palette are straight out of the book, but it’s an extremely strong example of the standard.</p>
<p>The site plays it straight, and in large letters tells you exactly what they do, followed by examples of the work. It’s a simple design strategy found in countless sites, and for good reason. It’s quick, and doesn’t threaten a short attention span.</p>
<p>And, like all good examples, it embraces the technology as well as it does traditional design rules. Take some time and hover over the examples of work. It’s a fun and informative way to present featured portfolio pieces, and allows us, the user, to dig deeper, or to get the basics with just a glance.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Everything has an extremely solid feel.</li>
<li>General layout of each page is strong</li>
<li>The informational hierarchy is great.</li>
<li>Fonts, headers, and font colors are consistent throughout.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Bright blue color palette.</li>
<li>Fun use of illustration (who doesn’t like clouds?).</li>
<li>Punchy photography.</li>
<li>Good implementation of technology.</li>
<li>Subtle dropshadows add depth.</li>
<li>Highly legible fonts and oversized headers.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>20. Rockatee</h2>
<p><a href="http://rockatee.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/d4f9b_rockatee.jpg" alt="" width="612" height="565" /></a></p>
<p>It’s another example of how texture is creeping into the web design market and confirming the notion that we’re well into the high-speed era of surfing the web.</p>
<p>Something you might notice is that Rockatee has quite a few projects on display in the portfolio section, so a streamlined solution was definitely in order. They did so with a series of snapshots, which showcase the depth of their prolific portfolio. Do yourself a favor and check it out.</p>
<p>Another feature of note is the nice navigation. It’s well placed and makes the site a breeze to click through. They even help you along on the homepage with a nice big button that leads to the portfolio.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Everything has an extremely solid feel.</li>
<li>General layout of each page is strong.</li>
<li>Color theory is well explored and implemented.</li>
<li>Strong attention to detail.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Fantastic navigation.</li>
<li>Big buttons lead you to the important bits.</li>
<li>Cool “snapshot” portfolio with great crops of the individual works.</li>
<li>Site showcases the designers many side projects, but doesn’t let them get in the way of the central elements.</li>
<li>Great idea with the timeline on the “About” page.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>21. Things That Are Brown</h2>
<p><a href="http://thingsthatarebrown.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/e3c23_things-brown.jpg" alt="" width="612" height="574" /></a></p>
<p>They pull off an extremely polished site that is an equal to (or better than) sites created by large agencies, yet they also give you an inside look at the people behind the scenes.</p>
<p>The about page contains great photography that, while professional enough, is also has a very homemade appeal. You can tell that the team took a trip outside, scouted a decent spot, and took a few snapshots with their own digital cameras.</p>
<p>A professional, yet accessible and friendly team is exactly the type of team I want to work with. These people are real.</p>
<p>This is one of those rare sites that seamlessly fuses strong design rules with modern tweaks. Their tagline, “Humbly Awesome,” is dead on.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Nice color with great accents.</li>
<li>Good use of artwork that integrates well.</li>
<li>Solid and consistent throughout.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Navigation is clean and easy to read.</li>
<li>Nice buttons that don’t overdo the gloss.</li>
<li>Photography is personal and adds a human touch to the site.</li>
<li>The portfolio is clear and easy to navigate, with great presentation of the work.</li>
<li>Headlines are large, yet sophisticated.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>22. Andrew Bradshaw</h2>
<p><a href="http://andrewbradshaw.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/e3c23_andrew-bradshaw.jpg" alt="" width="612" height="676" /></a></p>
<p>This is perhaps one of the most sophisticated sites on the list. Andrew has a great way of meshing texture, type, buttons, and photography into a congealed package. He also keeps hierarchy in mind, accentuating the important aspects and minimizing the sections that may not be of interest to all users.</p>
<p>The navigation is a highlight, with varying colors appearing as you hover over the tabs; a very sleek touch.</p>
<p>Also of note is the textured header and the strong font choice used in his logo. Again, Andrew combines subtlety and accents to create a beautiful site that is thorough and compelling throughout.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Overall appeal of clean sophistication.</li>
<li>Good use of accent elements, both in color and with type.</li>
<li>As usual, a strong grid system holds it together.</li>
<li>Hierarchy is implemented well.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>A different take on buttons.</li>
<li>Brilliant use of photography and image presentation.</li>
<li>Awesome details in the navigation.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>23. James Lai</h2>
<p><a href="http://jameslaicreative.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/e3c23_james-lai.jpg" alt="" width="612" height="553" /></a></p>
<p>James Lai, a designer who knows how to present himself through a fancy use of type, texture, and animation.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Simple, single-page solution.</li>
<li>Animation adds interest to the presentation (though it slowed the site a bit on my end).</li>
<li>Good attention to detail.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Huge type on the homepage tells you the exact purpose behind the site.</li>
<li>Contact information is easy to find.</li>
<li>Cool thumbnails help users navigate the portfolio.</li>
<li>Interesting use of texture.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>24. Subvert</h2>
<p><a href="http://subvert.ca"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/e3c23_subvert.jpg" alt="" width="612" height="594" /></a></p>
<p>Subvert was included not only for its obviously functional layout, but for the fading slideshow featured on the homepage. The presentation is fun, but it’s also informative and valuable to potential clients.</p>
<p>The background texture is complimented by transparent details, including a great navigation system featuring transparent tabs! The hover status of this navigation is subtle and maintains the transparency.</p>
<p>The grid structure is strong and easy to navigate, and upon clicking, the user is taken to an expanded view of the work.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Great overall flow.</li>
<li>Strong presentation of the portfolio on the “Work” page.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>Huge type presented on a fading slideshow.</li>
<li>Transparent navigational tabs!</li>
<li>The buttons are nice and add a good contrast to the backgrounds.</li>
<li>Slideshow of the office on the “Company” page is a nice touch.</li>
<li>Embraces technology.</li>
</ul>
<p><br class="spacer_" /></p>
<h1>25. Yellow Bird Project</h1>
<p><a href="http://www.yellowbirdproject.com"><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/27915_yellow-bird.jpg" alt="" width="612" height="528" /></a></p>
<p>The strength of its organization. Better yet, the Indie-inspired design really starts to appeal the longer the stay, and the scattered look of the site actually fits the theme.</p>
<p>If you check out the Photo Gallery, you’ll see a slew of amateur photos that once again add to the Indie look, while showcasing the product.</p>
<p>This sort of underground approach, which was made popular by sites like threadless.com, immediately attaches the viewer to the product.</p>
<p>They want to be a part of the crowd and don’t feel as though someone is just trying to sell them something. If that isn’t a Web 2.0 philosophy, I’m not sure what is.</p>
<h2>Traditional Aspects:</h2>
<ul>
<li>Crafty logo really establishes the feel, which is carried out throughout the entire site.</li>
<li>Though it feels scattered or loose at first, one realizes that this “put together” look is exactly what the designers were going for. They pull off the look while still making the site easy to navigate.</li>
<li>Consistent, non-traditional approach.</li>
</ul>
<h2>Web 2.0 Enhancements:</h2>
<ul>
<li>It’s more about the philosophy with this one. While the social aspect of Web 2.0 is in full effect, this site is also made strong because of its viral marketing approach and great underlying philanthropy.</li>
<li>Builds a community!</li>
<li>Great photos and easy navigation don’t hurt either.</li>
</ul>
<p><br class="spacer_" /></p>
<h2>In Summary</h2>
<p><strong>Web 2.0 is a tough standard to define</strong>, as where traditional design standards are a rigid collection of rules and guidelines (grid structure, color theory, letter spacing, kerning, tracking, and so on), Web 2.0, while containing similar standards, is almost more so a way of life.</p>
<p>It combines philosophy, marketing, technology, ease of use, and countless other aspects of our busy universe with an ultimate goal of making things easier for the masses.</p>
<p>In that regard, Web 2.0 and the traditional rules that were established ages ago, ultimately share the same goal: <strong>To organize the chaos, and to simplify the complex</strong>.</p>
<p><em>Written by Josh Sears,  Co-Owner of <a href="http://www.littlelines.com/">Littlelines.com</a>.</em></p>
<p><img src="http://www.yodspica.net/wp-content/plugins/wp-o-matic/cache/27915_p7o3s4CUuKg" alt="" width="1" height="1" /><br />
Please feel free to add a comment to this post, by clicking on title. Thank you.</p>
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px;">Web 2.0 is an ever-evolving definition of design standards. As a result, it has strengthened common design misnomers as it focus on usability, interface, and readability. In this post it is presented a collection of 25 sites showcasing how Web 2.0 and traditional design practices from stunning websites.</div>
]]></content:encoded>
			<wfw:commentRss>http://www.yodspica.net/2009/09/web-2-0-examples-and-traditional-design-rules-combined/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tools for Web Designers, Feedback</title>
		<link>http://www.yodspica.net/2009/08/tools-for-web-designers-feedback/</link>
		<comments>http://www.yodspica.net/2009/08/tools-for-web-designers-feedback/#comments</comments>
		<pubDate>Mon, 24 Aug 2009 23:04:24 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Tools]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[feedback]]></category>

		<guid isPermaLink="false">http://www.yodspica.net/?p=46</guid>
		<description><![CDATA[
			
				
			
		
Whether you’re a developer or a designer, seeking out constructive, third-party feedback can bring your projects to a new level. You may also know that finding objective, qualified sources of feedback can be near impossible.
Free web-based feedback communities
1. Concept Feedback

 
Concept Feedback is a brand new community for designers, developers and marketers. Members can upload a [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.yodspica.net%2F2009%2F08%2Ftools-for-web-designers-feedback%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.yodspica.net%2F2009%2F08%2Ftools-for-web-designers-feedback%2F&amp;style=normal&amp;service=digg.com" height="61" width="50" /><br />
			</a>
		</div>
<p>Whether you’re a developer or a designer, seeking out constructive, <strong>third-party feedback</strong> can bring your projects to a new level. You may also know that finding objective, qualified sources of feedback can be near impossible.</p>
<h3><strong>Free web-based feedback communities</strong></h3>
<h3>1. <a href="http://www.conceptfeedback.com/">Concept Feedback</a></h3>
<p><a href="http://www.conceptfeedback.com/"><img src="http://images.sixrevisions.com/2009/09/01-01_conceptfeedback.jpg" alt="Concept Feedback" width="550" height="316" /></a></p>
<p><span> </span></p>
<p><em>Concept Feedback</em> is a brand new community for designers, developers and marketers. Members can upload a concept (a website, logo, advertisement or other), specify an objective and start receiving constructive, actionable feedback from other members. A system of reputation points keeps users honest and helps prioritize advice. Sensitive concepts may also be posted privately for client or co-worker review.</p>
<h3>2. <a href="http://fivesecondtest.com/">FiveSecondTest</a></h3>
<p><a href="http://fivesecondtest.com/"><img src="http://images.sixrevisions.com/2009/09/01-02_fivesecondtest.jpg" alt="FiveSecondTest" width="550" height="314" /></a></p>
<p>The name explains it all. Fun and easy to use, <em>FST</em> gives random visitors the chance to &#8220;take a test&#8221; and look at your design for 5 seconds. When time runs out, the user is asked to list everything they can remember from the concept, providing what FST describes as a &#8221;simple online usability test that helps you identify the most prominent elements of your user interfaces&#8221;.</p>
<h3>3. <a href="http://pleasecritiqueme.com/">Please Critique Me</a></h3>
<p><a href="http://pleasecritiqueme.com/"><img src="http://images.sixrevisions.com/2009/09/01-03_pleasecritiqueme.jpg" alt="Please Critique Me" width="550" height="241" /></a></p>
<p>This cool venture from <a href="http://onwired.com/">OnWired</a> allows designers to solicit feedback from a panel of industry veterans, including your very own Jacob Gube of Six Revisions. If your submission is selected, you get an in-depth and valuable review of your project, for free! Even if you don’t get selected, you can still glean some valuable insight from these professionals.</p>
<h3>4. <a href="http://creattica.com/">Creattica</a></h3>
<p><a href="http://creattica.com/"><img src="http://images.sixrevisions.com/2009/09/01-04_creattica.jpg" alt="Creattica" width="550" height="256" /></a></p>
<p>Part of the <a href="http://envato.com/">Envato</a> network, <em>Creattica</em> brings together a group of top-notch designers looking to share a wide range of design projects. Membership and participation is free, however, feedback is limited to marking concepts as a &#8220;favorite&#8221;.</p>
<h3>5. <a href="http://forum.smashingmagazine.com/look-at-my-design-f48/">Smashing Forum</a></h3>
<p><a href="http://forum.smashingmagazine.com/look-at-my-design-f48/"><img src="http://images.sixrevisions.com/2009/09/01-05_smashingforum.jpg" alt="Smashing Forum" width="550" height="263" /></a></p>
<p>This simple, but effective text-based forum from Smashing Magazine is geared towards designers looking for general feedback on web design.</p>
<h3>6. <a href="http://www.sitepoint.com/forums/forumdisplay.php?f=90">SitePoint Forum</a></h3>
<p><a href="http://www.sitepoint.com/forums/forumdisplay.php?f=90"><img src="http://images.sixrevisions.com/2009/09/01-06_sitepointforum.jpg" alt="SitePoint Forum" width="550" height="157" /></a></p>
<p>SitePoint is geared towards developers and provides a relatively active text-based platform for design, website and content reviews.</p>
<h3>Web-based collaboration tools</h3>
<p><em>Not quite ready to share your work with the public? Just looking for a tool to share designs with your clients and co-workers?</em></p>
<h3>7. <a href="http://www.notableapp.com/">Notable</a></h3>
<p><a href="http://www.notableapp.com/"><img src="http://images.sixrevisions.com/2009/09/01-07_notableapp.jpg" alt="Notable" width="550" height="273" /></a></p>
<p><em>Notable</em> is a great feedback app designed specifically for web developers. In addition to sharing concepts using a standard image upload or screen grab, Notable has a slick plug-in for Firefox that allows you to give or receive feedback on any website or application without leaving your browser. A free plan is available (although you need to look for it) and paid plans start at /month.</p>
<h3>8. <a href="http://www.proofhq.com/">ProofHQ</a></h3>
<p><a href="http://www.proofhq.com/"><img src="http://images.sixrevisions.com/2009/09/01-08_proofhq.jpg" alt="ProofHQ" width="550" height="294" /></a></p>
<p>No more FTP or attachment issues. No more back and forth emails. <em>ProofHQ</em> provides an easy to use mark-up interface allowing users to upload a concept and share it with clients and co-workers. ProofHQ also boasts <a href="http://basecamphq.com/">Basecamp</a> integration, a useful feature for you 37Signals fans out there. Free accounts available with limited projects (5/month) and storage (500 MB). The cheapest paid plan starts at /month.</p>
<h3>9. <a href="http://www.conceptshare.com/">ConceptShare</a></h3>
<p><a href="http://www.conceptshare.com/"><img src="http://images.sixrevisions.com/2009/09/01-09_conceptshare.jpg" alt="ConceptShare" width="550" height="173" /></a></p>
<p>Similar to ProofHQ in functionality, <em>ConceptShare</em> is better option for users who are hoping to share video and flash files. Free accounts available with limited projects (15 total) and storage (1 GB). &#8220;Solo&#8221; plans start at /month.</p>
<h3>10. <a href="http://www.getsignoff.com/">GetSignOff</a></h3>
<p><a href="http://www.getsignoff.com/"><img src="http://images.sixrevisions.com/2009/09/01-10_getsignoff.jpg" alt="GetSignOff" width="550" height="318" /></a></p>
<p><em>GetSignOff</em> is probably the most limited tool of the bunch, but it does provide a simple option for those looking to get away from e-mail proofs. For the money, GetSignOff provides the most storage space per dollar and also allows full CSS customization and BaseCamp integration. Free accounts available with unlimited projects, however you are limited to 1 client and a 10 MB upload limit.</p>
<h3>About the Author</h3>
<p><img src="http://images.sixrevisions.com/authors/andrew_follett_small.jpg" alt="" width="80" height="80" /><span><strong>Andrew Follett</strong> on <strong><a href="http://www.twitter.com/conceptfeedback">Twitter</a></strong>.</span></p>
<p>Please feel free to add a comment to this post, by clicking on title. Thank you.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.yodspica.net/2009/08/tools-for-web-designers-feedback/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
