<?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>WebDesign Collection &#187; Inspire</title>
	<atom:link href="http://webdesigncollection.cn/wordpress/category/inspire/feed/" rel="self" type="application/rss+xml" />
	<link>http://webdesigncollection.cn/wordpress</link>
	<description>Let&#039;s get the most updated knowleges about web design.</description>
	<lastBuildDate>Wed, 02 Jun 2010 05:49:44 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>52 Excellent Single Page Sites Inspiring For Designers</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/52-excellent-single-page-sites-inspiring-for-designers/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/52-excellent-single-page-sites-inspiring-for-designers/#comments</comments>
		<pubDate>Wed, 02 Jun 2010 05:49:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[single page sites]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=544</guid>
		<description><![CDATA[
			
				
			
		
This isn’t just an exercise in minimalism, it’s a showcase of effective use of space. These sites only need is one page to spread their message. sometimes a single page site delivers more info ever need than a multi page site.
Portfolio sites are perfect examples for single page sites, it allows visitors to see you [...]]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2F52-excellent-single-page-sites-inspiring-for-designers%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2F52-excellent-single-page-sites-inspiring-for-designers%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>This isn’t just an exercise in minimalism, it’s a showcase of effective use of space. These sites only need is one page to spread their message. sometimes a single page site delivers more info ever need than a multi page site.</p>
<p>Portfolio sites are perfect examples for single page sites, it allows visitors to see you content easily, for non portfolio sites still it will make sense depends on the needs. It is almost like the single page frees the designer to create something more unique then a traditional multi page site. Perhaps it is because you only have to make it work on one page</p>
<p><img title="55 Excellent Single Page Sites Inspiring For Designers" src="http://visionwidget.com/images/vision/web/v00151109.jpg" border="0" alt="55 Excellent Single Page Sites Inspiring For Designers" /><span id="more-544"></span></p>
<p>Below the fold content, and the scrolling involved with it isn’t a hassle on the sites below. Here listed 55 Impressive one page sites to get inspired from.</p>
<p>1. <a rel="nofollow" href="http://www.delugestudios.com/" target="_blank">Delegu Studios</a></p>
<div style="text-align: center;"><img title="Delegu Studios" src="http://i698.photobucket.com/albums/vv345/visionwidget/30.jpg" border="0" alt="Delegu Studios" width="468" height="412" /></div>
<p>2. <a rel="nofollow" href="http://madebygiant.com/" target="_blank">Giat Creative<br />
</a></p>
<div style="text-align: center;"><img title="Giat Creative " src="http://i698.photobucket.com/albums/vv345/visionwidget/23.jpg" border="0" alt="Giat Creative " width="468" height="412" /></div>
<p>3. <a rel="nofollow" href="http://www.mariusroosendaal.com/" target="_blank">Marius Roosendaal<br />
</a></p>
<div style="text-align: center;"><img title="Marius Roosendaal" src="http://i698.photobucket.com/albums/vv345/visionwidget/24.jpg" border="0" alt="Marius Roosendaal" width="468" height="412" /></div>
<p>4. <a rel="nofollow" href="http://www.madebysofa.com/" target="_blank">SOFA Designs<br />
</a></p>
<div style="text-align: center;"><img title="SOFA Designs" src="http://i698.photobucket.com/albums/vv345/visionwidget/25.jpg" border="0" alt="SOFA Designs" width="468" height="412" /></div>
<p>5. <a rel="nofollow" href="http://www.dantestyle.se/" target="_blank">Daniel Stenberg<br />
</a></p>
<div style="text-align: center;"><img title="Daniel Stenberg" src="http://i698.photobucket.com/albums/vv345/visionwidget/26.jpg" border="0" alt="Daniel Stenberg" width="468" height="412" /></div>
<p>6. <a rel="nofollow" href="http://www.webleeddesign.com/" target="_blank">We Bleed Design<br />
</a></p>
<div style="text-align: center;"><img title="We Bleed Design" src="http://i698.photobucket.com/albums/vv345/visionwidget/29.jpg" border="0" alt="We Bleed Design" width="468" height="412" /></div>
<p>7. <a rel="nofollow" href="http://fabiano.me/" target="_blank">Fabiano Meneghetti<br />
</a></p>
<div style="text-align: center;"><img title="Fabiano Meneghetti" src="http://i698.photobucket.com/albums/vv345/visionwidget/3.jpg" border="0" alt="Fabiano Meneghetti" width="468" height="412" /></div>
<p>8. <a rel="nofollow" href="http://www.designedbydave.ca/" target="_blank">Designed by Dave<br />
</a></p>
<div style="text-align: center;"><img title="Designed by Dave" src="http://i698.photobucket.com/albums/vv345/visionwidget/31.jpg" border="0" alt="Designed by Dave" width="468" height="412" /></div>
<p>9. <a rel="nofollow" href="http://www.jasonreedwebdesign.com/" target="_blank">Jason Reed Web Design<br />
</a></p>
<div style="text-align: center;"><img title="Jason Reed Web Design" src="http://i698.photobucket.com/albums/vv345/visionwidget/34.jpg" border="0" alt="Jason Reed Web Design" width="468" height="412" /></div>
<p>10. <a rel="nofollow" href="http://djyura.com/" target="_blank">Yura Sklyar<br />
</a></p>
<div style="text-align: center;"><img title="Yura Sklyar" src="http://i698.photobucket.com/albums/vv345/visionwidget/4.jpg" border="0" alt="Yura Sklyar" width="468" height="412" /></div>
<p>11. <a rel="nofollow" href="http://www.basilgloo.com/" target="_blank">Basil Galoo<br />
</a></p>
<div style="text-align: center;"><img title="Basil Galoo" src="http://i698.photobucket.com/albums/vv345/visionwidget/5.jpg" border="0" alt="Basil Galoo" width="468" height="412" /></div>
<p>12. <a rel="nofollow" href="http://www.ayushsaran.com/" target="_blank">Ayush Sara<br />
</a></p>
<div style="text-align: center;"><img title="Ayush Sara" src="http://i698.photobucket.com/albums/vv345/visionwidget/6.jpg" border="0" alt="Ayush Sara" width="468" height="412" /></div>
<p>13. <a rel="nofollow" href="http://www.deaxon.com/" target="_blank">Deaxon<br />
</a></p>
<div style="text-align: center;"><img title="Deaxon" src="http://i698.photobucket.com/albums/vv345/visionwidget/7.jpg" border="0" alt="Deaxon" width="468" height="412" /></div>
<p>14. <a rel="nofollow" href="http://www.alexcohaniuc.com/" target="_blank">Alexandru Cohaniuc<br />
</a></p>
<div style="text-align: center;"><img title="Alexandru Cohaniuc" src="http://i698.photobucket.com/albums/vv345/visionwidget/8.jpg" border="0" alt="Alexandru Cohaniuc" width="468" height="412" /></div>
<p>15. <a rel="nofollow" href="http://www.edit-studios.com/" target="_blank">Edit Studios<br />
</a></p>
<div style="text-align: center;"><img title="Edit Studios" src="http://i698.photobucket.com/albums/vv345/visionwidget/9.jpg" border="0" alt="Edit Studios" width="468" height="412" /></div>
<p>16. <a rel="nofollow" href="http://www.alessandro-cavallo.de/" target="_blank">Alessandro Cavakllo<br />
</a></p>
<div style="text-align: center;"><img title="Alessandro Cavakllo" src="http://i698.photobucket.com/albums/vv345/visionwidget/1.jpg" border="0" alt="Alessandro Cavakllo" width="468" height="412" /></div>
<p>17. <a rel="nofollow" href="http://jameslaicreative.com/" target="_blank">James Lai Creative<br />
</a></p>
<div style="text-align: center;"><img title="James Lai Creative" src="http://i698.photobucket.com/albums/vv345/visionwidget/10.jpg" border="0" alt="James Lai Creative" width="468" height="412" /></div>
<p>18. <a rel="nofollow" href="http://theautumnfilm.com/red-white-sale/us.html" target="_blank">Red+White Sale<br />
</a></p>
<div style="text-align: center;"><img title="Red+White Sale" src="http://i698.photobucket.com/albums/vv345/visionwidget/11.jpg" border="0" alt="Red+White Sale" width="468" height="412" /></div>
<p>19. <a rel="nofollow" href="http://www.pojeta.cz/" target="_blank">Tomas Pojeta<br />
</a></p>
<div style="text-align: center;"><img title="Tomas Pojeta" src="http://i698.photobucket.com/albums/vv345/visionwidget/12.jpg" border="0" alt="Tomas Pojeta" width="468" height="412" /></div>
<p>20. <a rel="nofollow" href="http://www.kretivia.com/index.html" target="_blank">New Media Production<br />
</a></p>
<div style="text-align: center;"><img title="New Media Production" src="http://i698.photobucket.com/albums/vv345/visionwidget/13.jpg" border="0" alt="New Media Production" width="468" height="412" /></div>
<p>21. <a rel="nofollow" href="http://www.brianwebdesign.com/" target="_blank">Brian Murchison<br />
</a></p>
<div style="text-align: center;"><img title="Brian Murchison" src="http://i698.photobucket.com/albums/vv345/visionwidget/14.jpg" border="0" alt="Brian Murchison" width="468" height="412" /></div>
<p>22. <a rel="nofollow" href="http://stanislav-krofta.newwebart.net/" target="_blank">Stanislav Krofta<br />
</a></p>
<div style="text-align: center;"><img title="Stanislav Krofta" src="http://i698.photobucket.com/albums/vv345/visionwidget/15.jpg" border="0" alt="Stanislav Krofta" width="468" height="412" /></div>
<p>23.<a rel="nofollow" href="http://www.tvrdek.cz/en" target="_blank"> Tvrdek</a></p>
<div style="text-align: center;"><img title="Tvrdek" src="http://i698.photobucket.com/albums/vv345/visionwidget/16.jpg" border="0" alt="Tvrdek" width="468" height="412" /></div>
<p>24.<a rel="nofollow" href="http://www.feelwire.com/" target="_blank"> Feelwire</a></p>
<div style="text-align: center;"><img title="Feelwire" src="http://i698.photobucket.com/albums/vv345/visionwidget/17.jpg" border="0" alt="Feelwire" width="468" height="412" /></div>
<p>25. <a rel="nofollow" href="http://lukestevensdesign.com/" target="_blank">luke stevens<br />
</a></p>
<div style="text-align: center;"><img title="luke stevens" src="http://i698.photobucket.com/albums/vv345/visionwidget/18.jpg" border="0" alt="luke stevens" width="468" height="412" /></div>
<p>26. <a rel="nofollow" href="http://cpeople.ru/" target="_blank">Cpeople<br />
</a></p>
<div style="text-align: center;"><img title="Cpeople" src="http://i698.photobucket.com/albums/vv345/visionwidget/19.jpg" border="0" alt="Cpeople" width="468" height="412" /></div>
<p>27. <a rel="nofollow" href="http://gottagettofowa.com/" target="_blank">Gotta Get To FOWA<br />
</a></p>
<div style="text-align: center;"><img title="Gotta Get To FOWA" src="http://i698.photobucket.com/albums/vv345/visionwidget/2.jpg" border="0" alt="Gotta Get To FOWA" width="468" height="412" /></div>
<p>28. <a rel="nofollow" href="http://www.pikaboo.be/" target="_blank">Pikaboo<br />
</a></p>
<div style="text-align: center;"><img title="Pikaboo" src="http://i698.photobucket.com/albums/vv345/visionwidget/20.jpg" border="0" alt="Pikaboo" width="468" height="412" /></div>
<p>29. <a rel="nofollow" href="http://www.rzmota.com/" target="_blank">Rzmota<br />
</a></p>
<div style="text-align: center;"><img title="Rzmota" src="http://i698.photobucket.com/albums/vv345/visionwidget/21.jpg" border="0" alt="Rzmota" width="468" height="412" /></div>
<p>30. <a rel="nofollow" href="http://tomatic.com/" target="_blank">tomatic<br />
</a></p>
<div style="text-align: center;"><img title="tomatic" src="http://i698.photobucket.com/albums/vv345/visionwidget/22.jpg" border="0" alt="tomatic" width="468" height="412" /></div>
<p>31.<a rel="nofollow" href="http://lonely.prevvy.com/" target="_blank"> Lonely Tweet</a></p>
<div style="text-align: center;"><img title="Lonely Tweet" src="http://i698.photobucket.com/albums/vv345/visionwidget/35.jpg" border="0" alt="Lonely Tweet" width="468" height="412" /></div>
<p>32. <a rel="nofollow" href="http://www.maurivan.com/" target="_blank">Maurivan Luiz<br />
</a></p>
<div style="text-align: center;"><img title="Maurivan Luiz" src="http://i698.photobucket.com/albums/vv345/visionwidget/36.jpg" border="0" alt="Maurivan Luiz" width="468" height="412" /></div>
<p>33. <a rel="nofollow" href="http://www.myjustdot.com/" target="_blank">Just Dot<br />
</a></p>
<div style="text-align: center;"><img title="Just Dot" src="http://i698.photobucket.com/albums/vv345/visionwidget/37.jpg" border="0" alt="Just Dot" width="468" height="412" /></div>
<p>34. <a rel="nofollow" href="http://www.nerdoplex.com/" target="_blank">NerdoPlex<br />
</a></p>
<div style="text-align: center;"><img title="NerdoPlex" src="http://i698.photobucket.com/albums/vv345/visionwidget/38.jpg" border="0" alt="NerdoPlex" width="468" height="412" /></div>
<p>35. <a rel="nofollow" href="http://www.sroown.com/" target="_blank">Sroown<br />
</a></p>
<div style="text-align: center;"><img title="Sroown" src="http://i698.photobucket.com/albums/vv345/visionwidget/39.jpg" border="0" alt="Sroown" width="468" height="412" /></div>
<p>36. <a rel="nofollow" href="http://www.stage5studio.com/" target="_blank">Stage 5 Studio<br />
</a></p>
<div style="text-align: center;"><img title="Stage 5 Studio" src="http://i698.photobucket.com/albums/vv345/visionwidget/40.jpg" border="0" alt="Stage 5 Studio" width="468" height="412" /></div>
<p>37. <a rel="nofollow" href="http://www.veboolabs.com/" target="_blank">Veeboo Labs<br />
</a></p>
<div style="text-align: center;"><img title="Veeboo Labs" src="http://i698.photobucket.com/albums/vv345/visionwidget/41.jpg" border="0" alt="Veeboo Labs" width="468" height="412" /></div>
<p>38. <a rel="nofollow" href="http://www.alexbuga.com/v8/" target="_blank">Alex Buga<br />
</a></p>
<div style="text-align: center;"><img title="Alex Buga" src="http://i698.photobucket.com/albums/vv345/visionwidget/alex-buga-v8.jpg" border="0" alt="Alex Buga" width="468" height="123" /></div>
<p>39. <a rel="nofollow" href="http://www.colourpixel.com/" target="_blank">Colourpixel<br />
</a></p>
<div style="text-align: center;"><img title="Colourpixel" src="http://i698.photobucket.com/albums/vv345/visionwidget/colourpixel.jpg" border="0" alt="Colourpixel" width="468" height="124" /></div>
<p>40. <a rel="nofollow" href="http://www.edit-studios.com/" target="_blank">Edit Studios<br />
</a></p>
<div style="text-align: center;"><img title="Edit Studios" src="http://i698.photobucket.com/albums/vv345/visionwidget/edit-studios.jpg" border="0" alt="Edit Studios" width="468" height="124" /></div>
<p>41. <a rel="nofollow" href="http://www.thegreatbeardedreef.com/" target="_blank">The Great Bearded Reef<br />
</a></p>
<div style="text-align: center;"><img title="The Great Bearded Reef" src="http://i698.photobucket.com/albums/vv345/visionwidget/great-bearded-reef.jpg" border="0" alt="The Great Bearded Reef" width="468" height="124" /></div>
<p>42. <a rel="nofollow" href="http://www.tvrdek.cz/en" target="_blank">Jiri Tvrdek<br />
</a></p>
<div style="text-align: center;"><img title="Jiri Tvrdek" src="http://i698.photobucket.com/albums/vv345/visionwidget/jiri-tvrdek.jpg" border="0" alt="Jiri Tvrdek" width="468" height="124" /></div>
<p>43. <a rel="nofollow" href="http://www.legworkstudio.com/" target="_blank">Legwork Studio<br />
</a></p>
<div style="text-align: center;"><img title="Legwork Studio" src="http://i698.photobucket.com/albums/vv345/visionwidget/legwork-studio.jpg" border="0" alt="Legwork Studio" width="468" height="123" /></div>
<p>44. <a rel="nofollow" href="http://www.magouya.com/" target="_blank">Magouya<br />
</a></p>
<div style="text-align: center;"><img title="Magouya" src="http://i698.photobucket.com/albums/vv345/visionwidget/magouya.jpg" border="0" alt="Magouya" width="468" height="123" /></div>
<p>45. <a rel="nofollow" href="http://www.nofrks.com/" target="_blank">Nofrks Design Studios<br />
</a></p>
<div style="text-align: center;"><img title="Nofrks Design Studios" src="http://i698.photobucket.com/albums/vv345/visionwidget/nofrks-design-studio.jpg" border="0" alt="Nofrks Design Studios" width="468" height="124" /></div>
<p>46. <a rel="nofollow" href="http://www.omnitech-inc.com/" target="_blank">Omnitech Incorporated<br />
</a></p>
<div style="text-align: center;"><img title="Omnitech Incorporated" src="http://i698.photobucket.com/albums/vv345/visionwidget/omnitech-incorp.jpg" border="0" alt="Omnitech Incorporated" width="468" height="124" /></div>
<p>47. <a rel="nofollow" href="http://www.scrape.sk/" target="_blank">Jakub Antalik<br />
</a></p>
<div style="text-align: center;"><img title="Jakub Antalik" src="http://i698.photobucket.com/albums/vv345/visionwidget/scrape-sk.jpg" border="0" alt="Jakub Antalik" width="468" height="123" /></div>
<p>48. <a rel="nofollow" href="http://www.pojeta.cz/" target="_blank">Tomáš Pojeta<br />
</a></p>
<div style="text-align: center;"><img title="Tomáš Pojeta" src="http://i698.photobucket.com/albums/vv345/visionwidget/tomas-pojeta.jpg" border="0" alt="Tomáš Pojeta" width="468" height="124" /></div>
<p>49. <a rel="nofollow" href="http://www.sursly.com/" target="_blank">Tyler Finck<br />
</a></p>
<div style="text-align: center;"><img title="Tyler Finck" src="http://i698.photobucket.com/albums/vv345/visionwidget/tyler-finck-sursly.jpg" border="0" alt="Tyler Finck" width="468" height="123" /></div>
<p>50.<a rel="nofollow" href="http://visualelixir.com/" target="_blank"> Visual Elixer</a></p>
<div style="text-align: center;"><img title="Visual Elixer" src="http://i698.photobucket.com/albums/vv345/visionwidget/visual-elixer.jpg" border="0" alt="Visual Elixer" width="468" height="123" /></div>
<p>51. <a rel="nofollow" href="http://www.volll.com/" target="_blank">volll<br />
</a></p>
<div style="text-align: center;"><img title="volll" src="http://i698.photobucket.com/albums/vv345/visionwidget/volll.jpg" border="0" alt="volll" width="468" height="124" /></div>
<p>52. <a rel="nofollow" href="http://www.webleeddesign.com/" target="_blank">We Bleed Design<br />
</a></p>
<div style="text-align: center;"><img title="We Bleed Design" src="http://i698.photobucket.com/albums/vv345/visionwidget/webleeddesign.jpg" border="0" alt="We Bleed Design" width="468" height="124" /></div>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/52-excellent-single-page-sites-inspiring-for-designers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Bizarre Websites On Which You Can Kill Time With Style</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/bizarre-websites-on-which-you-can-kill-time-with-style/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/bizarre-websites-on-which-you-can-kill-time-with-style/#comments</comments>
		<pubDate>Tue, 01 Jun 2010 08:13:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=535</guid>
		<description><![CDATA[
			
				
			
		
Modern Web-building technologies allow designers to realize their most daring and creative ideas. Enhanced interactivity and a remarkable visual appearance can be achieved by means of such tools as Flash, JavaScript and Papervision3D, to name just a few. These strengths usually impress and entertain visitors and thus are often used for conceptual artistic presentations and [...]]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fbizarre-websites-on-which-you-can-kill-time-with-style%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fbizarre-websites-on-which-you-can-kill-time-with-style%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Modern Web-building technologies allow designers to realize their most daring and creative ideas. Enhanced interactivity and a remarkable visual appearance can be achieved by means of such tools as Flash, JavaScript and Papervision3D, to name just a few. These strengths usually impress and entertain visitors and thus are often used for conceptual artistic presentations and promotional campaigns.</p>
<p>In this post, you’ll find a collection of amusing websites that, by combining unconventional (and sometimes bizarre) ideas and clever JavaScript and Flash effects, will entice you to play on them for an embarrassing long time.</p>
<p><strong>Bizarre and Beautiful Websites</strong></p>
<p><a href="http://www.recordtripping.com/">Record Tripping</a><br />
Record Tripping is a nifty experimental game by Bell Brothers. You are invited to solve a series of puzzles by scratching a record with your mouse’s scroll wheel. Clever game play and a lovely interface make this online Flash game as fun as it is weird.</p>
<p><a href="http://www.recordtripping.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/record-tripping.jpg" alt="Record-tripping in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="319" /></a><span id="more-535"></span></p>
<p><a href="http://www.sounds-of-hamburg.de/">Sound of Hamburg</a><br />
Here is one of the most creative and unconventional Flash websites we’ve seen lately. Sound of Hamburg lets you compose music on and with the city of Hamburg. The combination of brilliant idea and unique interaction makes for an absorbing Web experience.</p>
<p><a href="http://www.sounds-of-hamburg.de/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/hamburg.jpg" alt="Hamburg in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="374" /></a></p>
<p><a href="http://www.echogenesis.com/">Echogenesis</a><br />
Echogenesis is another interactive brainchild of Bell Brothers. This exciting Flash website lets you explore five natural environments and experience a variety of sound and visual effects through your interaction.</p>
<p><a href="http://www.echogenesis.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/echogenesis.jpg" alt="Echogenesis in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="326" /></a></p>
<p><a href="http://www.verbatim.jp/senshuken/">Verbatim Championship</a><br />
Verbatim Championship is a hilarious Flash-based website where you can build your own “Media Monster” using Verbatim recording devices and use it to fight other monsters.</p>
<p><a href="http://www.verbatim.jp/senshuken/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/verbatim.jpg" alt="Verbatim in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="233" /></a></p>
<p><a href="http://www.incredibox.fr/">Incredibox</a><br />
This fun and well-developed Flash application lets you conduct a beatbox or <em>a capella</em> band. The website is available in both English and French.</p>
<p><a href="http://www.incredibox.fr/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/increibox.jpg" alt="Increibox in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="259" /></a></p>
<p><a href="http://www.dewerkelijkheidverzinjeniet.nl/">De Montagetafel</a><br />
This website was definitely among the best for Flash Web design for 2009. You are invited to try your montage skills and create your own documentary on an edgy topic.</p>
<p><a href="http://www.dewerkelijkheidverzinjeniet.nl/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/montagetafel.jpg" alt="Montagetafel in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="330" /></a></p>
<p><a href="http://www.optuswhalesong.com.au/">Optus Whale Song</a><br />
An amazingly creative experience is offered by the Australian telecommunication company Optus on its official website. You can compose a song for a whale and make an orchestra perform it. This is a must-see Flash website.</p>
<p><a href="http://www.optuswhalesong.com.au/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/octopus.jpg" alt="Octopus in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="263" /></a></p>
<p><a href="http://www.flurrious.com/">Flurrious</a><br />
If you like to create things, this website will keep you busy for hours (especially in winter). Using a versatile Flash editor, you can compile your very own snowflake and watch it dance in an artistic snowfall.</p>
<p><a href="http://www.flurrious.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/flurrious.jpg" alt="Flurrious in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="351" /></a></p>
<p><a href="http://www.thebluesmaker.com/">Blues Maker</a><br />
Blues Maker is a fun online Flash application that allows you to create a fine blues song. The list of options is rather limited; still the process of song-making is quite enjoyable. The design of the website is really cool, too.</p>
<p><a href="http://www.thebluesmaker.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/blues-maker.jpg" alt="Blues-maker in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="352" /></a></p>
<p><a href="http://www.bubole.pl/#/en/">Bubole</a><br />
Bubole will definitely make you smile. It is an amusing monster builder and game. You create a weirdo and make it fight with monsters created by other players. The funny sound effects and typography are nice touches.</p>
<p><a href="http://www.bubole.pl/#/en/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/bubole.jpg" alt="Bubole in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="294" /></a></p>
<p><a href="http://mrdoob.com/projects/chromeexperiments/ball_pool/">Ball Pool</a> (not Flash)<br />
Ball Pool is a beautiful jQuery website with a simple yet absorbing concept behind it. Just click and shake your browser to generate more colorful balls. A simple and fun app to cheer you up in the middle of a working day.</p>
<p><a href="http://mrdoob.com/projects/chromeexperiments/ball_pool/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/ball-pool.jpg" alt="Ball-pool in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="272" /></a></p>
<p><a href="http://www.bankofimagination.com/">Bank of Imagination</a><br />
How often do you start sentences with “What if…”? If you have a rich imagination, consider investing in the Bank of Imagination. This Flash-based interactive website allows you to note and save your “What if” thoughts. You can also observe other global flights of fancy by browsing other user messages.</p>
<p><a href="http://www.bankofimagination.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/bank-of-imagination.jpg" alt="Bank-of-imagination in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="289" /></a></p>
<p><a href="http://mrdoob.com/projects/chromeexperiments/google_gravity/">Google Gravity</a><br />
This website probably won’t be of much interest to the average Web user, but SEO specialists will love it: who else could stare at Google’s downfall for ages?</p>
<p><a href="http://mrdoob.com/projects/chromeexperiments/google_gravity/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/google-down.jpg" alt="Google-down in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="220" /></a></p>
<p><a href="http://www.escapemotions.com/experiments/flame/index.html#top">Flame</a><br />
Flame is a brilliant JavaScript painting tool that proves that anyone can be an artist. The program was created by Peter Blaskovic as part of his experimental project “I am Artist.” Using a number of nifty drawing tools and, of course, your imagination, you can create some cool psychedelic drawings and then export them in a resolution of 1680 x 1050 pixels. All you need to use this tool is Java (probably already installed on your computer).</p>
<p><a href="http://www.escapemotions.com/experiments/flame/index.html#top"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/fralme.jpg" alt="Fralme in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="396" /></a></p>
<p><a href="http://balldroppings.com/js/">Ball Droppings</a><br />
Ball Droppings is a cool JavaScript experiment that lets you create music in a quite unusual and tricky way: just draw lines with your mouse to bounce the balls that fall from the hole.</p>
<p><a href="http://balldroppings.com/js/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/balldropping.jpg" alt="Balldropping in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="280" /></a></p>
<p><a href="http://www.simonpanrucker.com/beans.swf">Beans</a><br />
This is the pearl in our collection of bizarre JavaScript and Flash websites. Who would have thought that crushing little screaming beans could be so much fun?</p>
<p><a href="http://www.simonpanrucker.com/beans.swf"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/screaming-beans.jpg" alt="Screaming-beans in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="356" /></a></p>
<p><a href="http://soytuaire.labuat.com/">Labuat</a><br />
Labuat is the most beautiful and enjoyable time-killer in our selection. It’s a song illustrated by an interactive brush that reacts to music, and the lyrics won’t leave you cold.</p>
<p><a href="http://soytuaire.labuat.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/labuat.jpg" alt="Labuat in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="246" /></a></p>
<p><a href="http://www.bornmagazine.org/projects/whystayup/project.html">Why Do You Stay Up So Late?</a><br />
Why Do You Stay Up So Late? is a compelling lyrical poem accompanied by a beautiful Flash animation. Such a creative combo gives the website a special feel.</p>
<p><a href="http://www.bornmagazine.org/projects/whystayup/project.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/why-up-at-night.jpg" alt="Why-up-at-night in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="290" /></a></p>
<p><a href="http://www.syfy.com/tinman/oz/">The Infinite Oz</a><br />
The Infinite Oz is an interactive Flash animation that features a collaboration between nine acclaimed international artists. Exploring fantastic sci-fi worlds that replace each other infinitely is a quite relaxing pastime.</p>
<p><a href="http://www.syfy.com/tinman/oz/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/infinite-oz.jpg" alt="Infinite-oz in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="252" /></a></p>
<p><a href="http://annamika.com/#">Annamika kaleidoscope</a><br />
Catherine Hubert created this Flash kaleidoscope to provide Web users with a place for meditative contemplation.</p>
<p><a href="http://annamika.com/#"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/caleidoscope.jpg" alt="Caleidoscope in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="323" /></a></p>
<p><a href="http://www.beonlineb.com/">Neon Bible</a><br />
This interactive video for a song by Arcade Fire is weird and hypnotizing at the same time.</p>
<p><a href="http://www.beonlineb.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/neaon-bible.jpg" alt="Neaon-bible in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="346" /></a></p>
<p><a href="http://www.tokyoplastic.com/dm.html">Drum Machine</a><br />
Drum Machine has several pre-loaders that play before the actual animation starts. In most cases, you would not wait so long for a Flash website to load, but Drum Machine is an exception. a mesmerizing combination of animation and sounds won’t let you leave.</p>
<p><a href="http://www.tokyoplastic.com/dm.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/drum-machine.jpg" alt="Drum-machine in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="329" /></a></p>
<p><a href="http://www.concavescream.com/main.html">Soundtrack for a Book</a><br />
This exquisite Flash website belongs to the Singapore-based indie band Concave Scream. A myriad of colorful particles assembled into 3-D book covers, set to dreamy music, makes for a beautiful and calming Web experience.</p>
<p><a href="http://www.concavescream.com/main.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/concave-scream.jpg" alt="Concave-scream in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="301" /></a></p>
<p><a href="http://www.papervision3d.org/">Papervision3D.org</a><br />
Before entering the official website of open-source Flash framework Papervision3D, you have a chance to explore an interactive 3-D underwater environment.</p>
<p><a href="http://www.papervision3d.org/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/papervision.jpg" alt="Papervision in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="286" /></a></p>
<p><a href="http://www.wearecondiment.com/">Condiment</a><br />
The portfolio of creative communication agency Condiment features a clever JavaScript jigsaw puzzle. This engaging feature, set against a neat and stylish design, makes the website a pleasure to browse.</p>
<p><a href="http://www.wearecondiment.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/we-are-condiment.jpg" alt="We-are-condiment in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="363" /></a></p>
<p><a href="http://thedigitalinvaders.com/#/home">The Digital Invaders</a><br />
This Flash website takes some time to load, but incredible animations, showing an awfully funny crowd of invaders, fully compensate for that.</p>
<p><a href="http://thedigitalinvaders.com/#/home"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/digital-invaders.jpg" alt="Digital-invaders in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="264" /></a></p>
<p><a href="http://www.bio-bak.nl/">Bio-Bak</a><br />
Bio-Bak is indubitably a trendsetter when it comes to bizarre Web design. Enter this kingdom of the absurd and fun to load up on positive emotions.</p>
<p><a href="http://www.bio-bak.nl/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/biobak.jpg" alt="Biobak in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="311" /></a></p>
<p><a href="http://www.donniedarkofilm.com/">Donnie Darko</a><br />
Okay, here is the most extraordinary movie website you may have ever seen. It engrosses you in a mysterious and suspenseful journey based on the 2001 US psychological thriller Donnie Darko.</p>
<p><a href="http://www.donniedarkofilm.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/donnie-darko.jpg" alt="Donnie-darko in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="285" /></a></p>
<p><a href="http://www.neave.com/">Paul Neave</a><br />
You will never get bored on this website. This online home of interactive designer Paul Neave is a fount of engaging Flash applications and games.</p>
<p><a href="http://www.neave.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/neave.jpg" alt="Neave in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="272" /></a></p>
<p><a href="http://www.saltfilms.com.sg/">Salt Films</a><br />
This website of film production company Salt Films tastes delicious. Elegant and funky graphics, creative animation and interactive salt shakers for the work of film directors deliver the most pleasing Web experience.</p>
<p><a href="http://www.saltfilms.com.sg/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/saltfilms.jpg" alt="Saltfilms in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="268" /></a></p>
<p><a href="http://www.forgottenbookmarks.com/">Forgotten Bookmarks</a></p>
<p>Browsing personal things a bookshop owner finds in rare and used books is another way to explore the amazing human nature (and an extremely absorbing pastime).</p>
<p><a href="http://www.forgottenbookmarks.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/forgotten-bookmarks1.jpg" alt="Forgotten-bookmarks1 in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="359" /></a></p>
<h4>Bonus</h4>
<p><a href="http://vimeo.com/9194146">And Then There Was Salsa</a><br />
Although not a website, this cool video ad shows Flash in its glory.</p>
<p><a href="http://vimeo.com/9194146"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/05/salsa.jpg" alt="Salsa in Bizarre Websites On Which You Can Kill Time With Style" width="500" height="320" /></a></p>
<h4>About the Author</h4>
<p><em>Julia May is a freelance writer now working with FlashMint, a top-class provider of beautiful <a href="http://www.flashmint.com/">Flash templates</a> and smart<a href="http://www.flashmint.com/show-type-jquery.html">jQuery templates</a>.</em></p>
<p><em>Original article from Smashingmagazine.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/bizarre-websites-on-which-you-can-kill-time-with-style/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>40 Beautiful E-Commerce Websites 2010</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/40-beautiful-e-commerce-websites-2010/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/40-beautiful-e-commerce-websites-2010/#comments</comments>
		<pubDate>Tue, 25 May 2010 09:12:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[e-Commerce]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=532</guid>
		<description><![CDATA[
			
				
			
		
Today we are going to showcase forty five inspirational new frash and creative e-commerce websites for 2010 year. Enjoy!
Gowalla

gowalla.com
Olio Board

www.olioboard.com
Geeksphone Shop

shop.geeksphone.com
Crocs Store

www.crocs.store.ro
They Make Apps

theymakeapps.com
Tap Mates

www.tapmates.com
I Said What

www.tapparatus.com/isaidwhat
Narwhal Co.

narwhalcompany.com
Hello Kavita

hellokavita.net
Tapbots

tapbots.com/software/pastebot
Teez

teez.com.ua
Ape Commerce

www.apecommerce.com
Big Commerce

www.bigcommerce.com
Gosco Valves

www.goscovalves.com
Interdominios

www.interdominios.com
Mark Palma Media

www.markpalmamedia.com
Ski Key

www.skikey.com
Bless This Stuff

www.blessthisstuff.com
Render Wave

www.renderwave.it/en
Fikket

www.fikket.com
MyFlowerDelivery

www.myflowerdelivery.ie
Obeardo

www.obeardo.com
Project Shoes

www.projectshoes.com
Mee Templates

www.meetemplates.com
Ray Lewis Workout

www.raylewis52.com
Interface for iPhone

www.lesscode.co.nz/interface
Sketchbook Project

arthousecoop.com/projects/sketchbookproject
Appboy

appboy.com
Twit Gift

www.twitgift.me
Mojo Themes

www.mojo-themes.com
Task This

www.task-this.com
SmartUpz

www.smartupz.com
Motionoto

www.motionoto.com
Sketchdock

www.sketchdock.com
FlexiThemes

flexithemes.com
Themes MGNTO

www.themes-mgnto.com
Diamondzdirect

www.diamondzdirect.com
Aussiestorez

www.aussiestorez.com.au
Forme

]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2F40-beautiful-e-commerce-websites-2010%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2F40-beautiful-e-commerce-websites-2010%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Today we are going to showcase forty five inspirational new frash and creative e-commerce websites for 2010 year. Enjoy!</p>
<h4>Gowalla</h4>
<p><a rel="nofollow" href="http://gowalla.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/79cea2.jpg" alt="" /></a><span id="more-532"></span><br />
<a rel="nofollow" href="http://gowalla.com/">gowalla.com</a></p>
<h4>Olio Board</h4>
<p><a rel="nofollow" href="http://www.olioboard.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/38d43c.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.olioboard.com/">www.olioboard.com</a></p>
<h4>Geeksphone Shop</h4>
<p><a rel="nofollow" href="http://shop.geeksphone.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/913dd5.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://shop.geeksphone.com/">shop.geeksphone.com</a></p>
<h4>Crocs Store</h4>
<p><a rel="nofollow" href="http://www.crocs.store.ro/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/787b70.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.crocs.store.ro/">www.crocs.store.ro</a></p>
<h4>They Make Apps</h4>
<p><a rel="nofollow" href="http://theymakeapps.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/64de71.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://theymakeapps.com/">theymakeapps.com</a></p>
<h4>Tap Mates</h4>
<p><a rel="nofollow" href="http://www.tapmates.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/3209f1.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.tapmates.com/">www.tapmates.com</a></p>
<h4>I Said What</h4>
<p><a rel="nofollow" href="http://www.tapparatus.com/isaidwhat/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/623d28.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.tapparatus.com/isaidwhat">www.tapparatus.com/isaidwhat</a></p>
<h4>Narwhal Co.</h4>
<p><a rel="nofollow" href="http://narwhalcompany.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/497644.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://narwhalcompany.com/">narwhalcompany.com</a></p>
<h4>Hello Kavita</h4>
<p><a rel="nofollow" href="http://hellokavita.net/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/f347ba.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://hellokavita.net/">hellokavita.net</a></p>
<h4>Tapbots</h4>
<p><a rel="nofollow" href="http://tapbots.com/software/pastebot/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/fdb8af.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://tapbots.com/software/pastebot">tapbots.com/software/pastebot</a></p>
<h4>Teez</h4>
<p><a rel="nofollow" href="http://teez.com.ua/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/fc79c0.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://teez.com.ua/">teez.com.ua</a></p>
<h4>Ape Commerce</h4>
<p><a rel="nofollow" href="http://www.apecommerce.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/8693e3.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.apecommerce.com/">www.apecommerce.com</a></p>
<h4>Big Commerce</h4>
<p><a rel="nofollow" href="http://www.bigcommerce.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/167d96.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.bigcommerce.com/">www.bigcommerce.com</a></p>
<h4>Gosco Valves</h4>
<p><a rel="nofollow" href="http://www.goscovalves.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/e8b7c9.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.goscovalves.com/">www.goscovalves.com</a></p>
<h4>Interdominios</h4>
<p><a rel="nofollow" href="http://www.interdominios.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/0002fa.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.interdominios.com/">www.interdominios.com</a></p>
<h4>Mark Palma Media</h4>
<p><a rel="nofollow" href="http://www.markpalmamedia.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/8efe71.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.markpalmamedia.com/">www.markpalmamedia.com</a></p>
<h4>Ski Key</h4>
<p><a rel="nofollow" href="http://www.skikey.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/e28e02.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.skikey.com/">www.skikey.com</a></p>
<h4>Bless This Stuff</h4>
<p><a rel="nofollow" href="http://www.blessthisstuff.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/7e3991.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.blessthisstuff.com/">www.blessthisstuff.com</a></p>
<h4>Render Wave</h4>
<p><a rel="nofollow" href="http://www.renderwave.it/en"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/cd0629.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.renderwave.it/en">www.renderwave.it/en</a></p>
<h4>Fikket</h4>
<p><a rel="nofollow" href="http://www.fikket.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/1a4959.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.fikket.com/">www.fikket.com</a></p>
<h4>MyFlowerDelivery</h4>
<p><a rel="nofollow" href="http://www.myflowerdelivery.ie/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/07f7f1.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.myflowerdelivery.ie/">www.myflowerdelivery.ie</a></p>
<h4>Obeardo</h4>
<p><a rel="nofollow" href="http://www.obeardo.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/ab23e1.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.obeardo.com/">www.obeardo.com</a></p>
<h4>Project Shoes</h4>
<p><a rel="nofollow" href="http://www.projectshoes.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/6fc752.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.projectshoes.com/">www.projectshoes.com</a></p>
<h4>Mee Templates</h4>
<p><a rel="nofollow" href="http://www.meetemplates.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/e542af.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.meetemplates.com/">www.meetemplates.com</a></p>
<h4>Ray Lewis Workout</h4>
<p><a rel="nofollow" href="http://www.raylewis52.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/353a50.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.raylewis52.com/">www.raylewis52.com</a></p>
<h4>Interface for iPhone</h4>
<p><a rel="nofollow" href="http://www.lesscode.co.nz/interface"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/9bf8c2.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.lesscode.co.nz/interface">www.lesscode.co.nz/interface</a></p>
<h4>Sketchbook Project</h4>
<p><a rel="nofollow" href="http://arthousecoop.com/projects/sketchbookproject"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/fcb4c1.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://arthousecoop.com/projects/sketchbookproject">arthousecoop.com/projects/sketchbookproject</a></p>
<h4>Appboy</h4>
<p><a rel="nofollow" href="http://appboy.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/294197.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://appboy.com/">appboy.com</a></p>
<h4>Twit Gift</h4>
<p><a rel="nofollow" href="http://www.twitgift.me/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/55d81a.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.twitgift.me/">www.twitgift.me</a></p>
<h4>Mojo Themes</h4>
<p><a rel="nofollow" href="http://www.mojo-themes.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/08e53e.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.mojo-themes.com/">www.mojo-themes.com</a></p>
<h4>Task This</h4>
<p><a rel="nofollow" href="http://www.task-this.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/c9f5fe.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.task-this.com/">www.task-this.com</a></p>
<h4>SmartUpz</h4>
<p><a rel="nofollow" href="http://www.smartupz.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/cec62f.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.smartupz.com/">www.smartupz.com</a></p>
<h4>Motionoto</h4>
<p><a rel="nofollow" href="http://www.motionoto.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/a383ff.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.motionoto.com/">www.motionoto.com</a></p>
<h4>Sketchdock</h4>
<p><a rel="nofollow" href="http://www.sketchdock.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/96ee8c.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.sketchdock.com/">www.sketchdock.com</a></p>
<h4>FlexiThemes</h4>
<p><a rel="nofollow" href="http://flexithemes.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/845b39.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://flexithemes.com/">flexithemes.com</a></p>
<h4>Themes MGNTO</h4>
<p><a rel="nofollow" href="http://www.themes-mgnto.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/6e81d6.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.themes-mgnto.com/">www.themes-mgnto.com</a></p>
<h4>Diamondzdirect</h4>
<p><a rel="nofollow" href="http://www.diamondzdirect.com/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/97d52b.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.diamondzdirect.com/">www.diamondzdirect.com</a></p>
<h4>Aussiestorez</h4>
<p><a rel="nofollow" href="http://www.aussiestorez.com.au/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/162f27.jpg" alt="" /></a><br />
<a rel="nofollow" href="http://www.aussiestorez.com.au/">www.aussiestorez.com.au</a></p>
<h4>Forme</h4>
<p><a rel="nofollow" href="http://www.formebikes.co.uk/"><img src="http://www.splashnology.com/uploads/images/00/01/88/2010/05/24/662d64.jpg" alt="" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/40-beautiful-e-commerce-websites-2010/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Showcase Of Beautiful Vertical Navigation Designs</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/showcase-of-beautiful-vertical-navigation-designs/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/showcase-of-beautiful-vertical-navigation-designs/#comments</comments>
		<pubDate>Thu, 22 Apr 2010 12:53:19 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=517</guid>
		<description><![CDATA[
			
				
			
		
Riot Industries
The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Clicking on “Web,” “Print,” or “Identity” filters the thumbnails on the right, and clicking the “About” menu item shifts the navigation to the right, making way for content on the left.

Village Version
Here, you can see [...]]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fshowcase-of-beautiful-vertical-navigation-designs%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fshowcase-of-beautiful-vertical-navigation-designs%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://riotindustries.com/">Riot Industries</a><br />
The vertical navigation in this portfolio website is simple and clean in looks yet robust in functionality and interaction. Clicking on “Web,” “Print,” or “Identity” filters the thumbnails on the right, and clicking the “About” menu item shifts the navigation to the right, making way for content on the left.</p>
<p><a href="http://riotindustries.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/riot-industries.jpg" alt="Riot-industries in Showcase Of Beautiful Vertical Navigation Designs" width="329" height="316" /></a><span id="more-517"></span></p>
<p><a href="http://www.vllg.com/">Village Version</a><br />
Here, you can see one of the benefits of vertical navigation: it allow for highly compact and modular menus that appear distinct from the rest of the layout. Sitting in the top-left corner, just below the website’s name, the menu is one of the first things visitors see (at least with left-to-right languages).</p>
<p><a href="http://www.vllg.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/village-version.jpg" alt="Village-version in Showcase Of Beautiful Vertical Navigation Designs" width="190" height="180" /></a></p>
<p><a href="http://bsouza.com/projects/index.html">Bruno Souza</a><br />
This portfolio has a clean and simple navigation design that leaves the visitor to focus on the vibrant content to the right.</p>
<p><a href="http://bsouza.com/projects/index.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/brunosouza.jpg" alt="Brunosouza in Showcase Of Beautiful Vertical Navigation Designs" width="350" height="226" /></a></p>
<p><a href="http://www.cambrianhouse.com/">Cambrian House</a><br />
A quite distinctive, original navigation menu with five different typefaces. A bit unusual navigation for a crowdsourcing community.</p>
<p><a href="http://www.cambrianhouse.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/04/cet.jpg" alt="Cet in Showcase Of Beautiful Vertical Navigation Designs" width="213" height="392" /></a></p>
<p><a href="http://www.comfortbrothers.com/">Comfort Brothers</a><br />
Navigation menu on the right side of the layout for a change: although the design is basic, almost rudimentary, it works well and is easy to navigate. Navigation menus do not have to look outstanding.</p>
<p><a href="http://www.comfortbrothers.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/04/cook.jpg" alt="Cook in Showcase Of Beautiful Vertical Navigation Designs" width="333" height="351" /></a></p>
<p><a href="http://www.auberge-de-l-ill.com/V2/index.html">Auberge de l’Ill</a><br />
This vertical navigation design is elegant and functional. Hovering over a menu item triggers a horizontal animation.</p>
<p><a href="http://www.auberge-de-l-ill.com/V2/index.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/auberge-de-lull.jpg" alt="Auberge-de-lull in Showcase Of Beautiful Vertical Navigation Designs" width="352" height="360" /></a></p>
<p><a href="http://hipstery.com/">The Hipstery!</a><br />
This website’s vertical navigation sits right in the middle of where the visitor is focusing when the page first loads. Active menu items are denoted by a pointing hand.</p>
<p><a href="http://hipstery.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/the-hipstery.jpg" alt="The-hipstery in Showcase Of Beautiful Vertical Navigation Designs" width="480" height="156" /></a></p>
<p><a href="http://www.mica.edu/Research_at_MICA.html">Research at MICA</a><br />
The navigation design for the Maryland Institute College of Arts demonstrates another advantage of vertical navigation: it shows hierarchy and allows you to group menu items without resorting to drop-down menus, whose sub-menus are displayed only when the user mouses over an item.</p>
<p><a href="http://www.mica.edu/Research_at_MICA.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/research-mica.jpg" alt="Research-mica in Showcase Of Beautiful Vertical Navigation Designs" width="199" height="589" /></a></p>
<p><a href="http://www.powertotheposter.org/">Power to the Poster</a><br />
The vertical navigation design on this website is positioned right below the website’s name, making it prominent without drawing attention from the large rotating banner in the top-right.</p>
<p><a href="http://www.powertotheposter.org/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/power-poster.jpg" alt="Power-poster in Showcase Of Beautiful Vertical Navigation Designs" width="240" height="351" /></a></p>
<p><a href="http://www.from-the-couch.com/">From the Couch</a><br />
The vertical navigation here shows yet another benefit: being able to accommodate more menu items.</p>
<p><a href="http://www.from-the-couch.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/from-the-couch.jpg" alt="From-the-couch in Showcase Of Beautiful Vertical Navigation Designs" width="252" height="549" /></a></p>
<p><a href="http://www.narrowdesign.com/">Nick Jones</a><br />
The portfolio of art director Nick Jones has vertical navigation towards the middle of the page. The menu summarizes his work and has an interactive component that scrolls the menu up and down based on the user’s mouse movements. When an item is clicked, the menu shifts to the left, making room for the corresponding content.</p>
<p><a href="http://www.narrowdesign.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/nick-jones.jpg" alt="Nick-jones in Showcase Of Beautiful Vertical Navigation Designs" width="252" height="549" /></a></p>
<p><a href="http://www.noamdesign.com/">Noam Design</a><br />
This dark vertical navigation for Noam Design leaves the menu option for the contact form permanently open.</p>
<p><a href="http://www.noamdesign.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/noam-design.jpg" alt="Noam-design in Showcase Of Beautiful Vertical Navigation Designs" width="226" height="567" /></a></p>
<p><a href="http://www.themusichall.org/">The Music Hall</a><br />
The vertical navigation on this website is grouped into two categories, giving users the ability to quickly find the link to the page they’re interested in.</p>
<p><a href="http://www.themusichall.org/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/the-music-hall.jpg" alt="The-music-hall in Showcase Of Beautiful Vertical Navigation Designs" width="216" height="644" /></a></p>
<p><a href="http://onetwentysix.com/">ONETWENTYSIX</a><br />
The vertical navigation in this portfolio reflects the traditional table of contents in a book. Menu items are categorized in two groups.</p>
<p><a href="http://onetwentysix.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/onetwentysix.jpg" alt="Onetwentysix in Showcase Of Beautiful Vertical Navigation Designs" width="389" height="620" /></a></p>
<p><a href="http://divensis.no/">Tailored pixels</a><br />
This simple vertical navigation is presented right below the website’s name, giving it a prominent position in the layout without taking away attention from the main content area. A dark gray background denotes active menu items, with an arrowhead pointing at the content, encouraging natural and effective eye flow.</p>
<p><a href="http://divensis.no/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/tailored-pixels.jpg" alt="Tailored-pixels in Showcase Of Beautiful Vertical Navigation Designs" width="275" height="238" /></a></p>
<p><a href="http://www.mellasat.com/">Mellasat Vineyard</a><br />
Mellasat Vineyard’s vertical navigation menu is a modular, one-piece design element that also contains the website name and logo. The menu is a focal element here.</p>
<p><a href="http://www.mellasat.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mellasat.jpg" alt="Mellasat in Showcase Of Beautiful Vertical Navigation Designs" width="245" height="407" /></a></p>
<p><a href="http://simple-life.moo.jp/">SIMPLE LIFE</a><br />
The navigation in this elegant, minimalist, typography-based portfolio is a central element and contributes to the overall layout. The menu items are repeated on the right in a larger font.</p>
<p><a href="http://simple-life.moo.jp/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/simple-life.jpg" alt="Simple-life in Showcase Of Beautiful Vertical Navigation Designs" width="480" height="464" /></a></p>
<p><a href="http://www.debbiemillman.com/">Debbie Millman</a><br />
This menu creatively weaves in the description and purpose of the website.</p>
<p><a href="http://www.debbiemillman.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/debie-milman.jpg" alt="Debie-milman in Showcase Of Beautiful Vertical Navigation Designs" width="161" height="491" /></a></p>
<p><a href="http://www.utah.travel/">Utah.travel</a><br />
This interactive menu has a slick slide-out menu that displays sub-links and content when a user hovers over a primary menu item.</p>
<p><a href="http://www.utah.travel/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/utah-travel.jpg" alt="Utah-travel in Showcase Of Beautiful Vertical Navigation Designs" width="269" height="285" /></a></p>
<p><a href="http://leihu.com/">Mathias Leihu</a><br />
The coloring of this navigation is subtle, but the menu manages to attract the user’s eye through its prominent location in the layout and the author’s high-contrast headshot.</p>
<p><a href="http://leihu.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/matias-lei.jpg" alt="Matias-lei in Showcase Of Beautiful Vertical Navigation Designs" width="278" height="245" /></a></p>
<p><a href="http://www.gomedia.us/">Go Media Inc</a><br />
Go Media Inc’s navigation is an accordion that reveals sub-menus. Clicking on a primary menu item triggers an animated downward effect that opens up sub-menu items.</p>
<p><a href="http://www.gomedia.us/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/go-media.jpg" alt="Go-media in Showcase Of Beautiful Vertical Navigation Designs" width="284" height="455" /></a></p>
<p><a href="http://www.circa.com.au/">Circa, the Prince</a><br />
This dark grunge-themed vertical menu is subtle yet hard to miss because of its position.</p>
<p><a href="http://www.circa.com.au/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/circa.jpg" alt="Circa in Showcase Of Beautiful Vertical Navigation Designs" width="258" height="446" /></a></p>
<p><a href="http://www.glass-tiger.com/">Glass Tiger Surfboards</a><br />
Glass Tiger Surfboards opts for a vertical navigation menu with low opacity so that the grassy background shows through.</p>
<p><a href="http://www.glass-tiger.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/glass-tiger-surfboard.jpg" alt="Glass-tiger-surfboard in Showcase Of Beautiful Vertical Navigation Designs" width="251" height="497" /></a></p>
<p><a href="http://www.coreyfishes.com/">Corey Arnold Photography</a><br />
The menu on this minimalist portfolio website has a red see-through background so that the featured photo is visible even when the menu is expanded.</p>
<p><a href="http://www.coreyfishes.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/corey_arnold.jpg" alt="Corey Arnold in Showcase Of Beautiful Vertical Navigation Designs" width="233" height="497" /></a></p>
<p><a href="http://www.uniquexports.com/">Uniquexport</a><br />
This artistic menu is transparent, so that the distinctive floral pattern in the background isn’t obscured.</p>
<p><a href="http://www.uniquexports.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/uniqueexport.jpg" alt="Uniqueexport in Showcase Of Beautiful Vertical Navigation Designs" width="314" height="276" /></a></p>
<p><a href="http://www.yellowoodstore.com/">yellowood store</a><br />
This menu has a dark-gray semi-opaque background that allows the background image to show through.</p>
<p><a href="http://www.yellowoodstore.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/yellowwood-street.jpg" alt="Yellowwood-street in Showcase Of Beautiful Vertical Navigation Designs" width="281" height="525" /></a></p>
<p><a href="http://www.vdwny.com/">Van de Weghe Fine Art</a><br />
This navigation system is revealed when the user hovers over “Menu.” The simplicity of the design is creative; the background images are the distinguishing element.</p>
<p><a href="http://www.vdwny.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/van-de-weghe.jpg" alt="Van-de-weghe in Showcase Of Beautiful Vertical Navigation Designs" width="319" height="596" /></a></p>
<p><a href="http://theymakeapps.com/">TheyMakeApps.com</a><br />
This menu has illustrated icons beside menu items, which both complement the overall theme and help with visual recognition.</p>
<p><a href="http://theymakeapps.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/theymakeapps.jpg" alt="Theymakeapps in Showcase Of Beautiful Vertical Navigation Designs" width="231" height="822" /></a></p>
<p><a href="http://www.huisoranje.co.za/">Huis Oranje</a><br />
This vertical menu is a distinctive element in this layout. The icons to the right serve as eye candy and as visual representations of the menu items.</p>
<p><a href="http://www.huisoranje.co.za/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/huis-oraange.jpg" alt="Huis-oraange in Showcase Of Beautiful Vertical Navigation Designs" width="281" height="710" /></a></p>
<p><a href="http://www.wccnet.edu/">Washtenaw Community College</a><br />
This menu is interesting because its grainy style is rarely seen on websites for institutions of higher education.</p>
<p><a href="http://www.wccnet.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/washtenaw.jpg" alt="Washtenaw in Showcase Of Beautiful Vertical Navigation Designs" width="281" height="570" /></a></p>
<p><a href="http://www.brownblogfilms.com/">Brown Blog Films</a><br />
The navigation here is set against a wooden background, with links in an organic scribbled font.</p>
<p><a href="http://www.brownblogfilms.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/brown-blog-films.jpg" alt="Brown-blog-films in Showcase Of Beautiful Vertical Navigation Designs" width="252" height="472" /></a></p>
<p><a href="http://www.ajmiles.net/">A J Miles</a><br />
The portfolio of A J Miles has vertical navigation as its primary visual element. The menu is fashioned as a piece of paper held in position by tape.</p>
<p><a href="http://www.ajmiles.net/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/aj-miles.jpg" alt="Aj-miles in Showcase Of Beautiful Vertical Navigation Designs" width="252" height="371" /></a></p>
<p><a href="https://www.redvelvetart.com/">RedVelvetart.com</a><br />
This menu has colorful fonts with a hand-drawn look to them, complementing the overall theme.</p>
<p><a href="https://www.redvelvetart.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/redvelvetart.jpg" alt="Redvelvetart in Showcase Of Beautiful Vertical Navigation Designs" width="195" height="423" /></a></p>
<p><a href="http://www.cubeclub-chemnitz.de/">R.I.P. Cube Club</a><br />
This vertical menu is central to the layout. It has large fonts and a 3-D effect.</p>
<p><a href="http://www.cubeclub-chemnitz.de/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/rip_cube_club.jpg" alt="Rip Cube Club in Showcase Of Beautiful Vertical Navigation Designs" width="354" height="643" /></a></p>
<p><a href="http://www.thisisleaf.co.uk/">LEAF TEA SHOP &amp; BAR</a><br />
On this website, you can see how big font sizes can get when you have more vertical space to work with.</p>
<p><a href="http://www.thisisleaf.co.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/leaf-tea-shop.jpg" alt="Leaf-tea-shop in Showcase Of Beautiful Vertical Navigation Designs" width="295" height="449" /></a></p>
<p><a href="http://rickmonroe.net/">Rick Monroe</a><br />
The personal website of Rick Monroe has navigation links on top of a textured background, right below the website name.</p>
<p><a href="http://rickmonroe.net/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/rick-monroe.jpg" alt="Rick-monroe in Showcase Of Beautiful Vertical Navigation Designs" width="295" height="449" /></a></p>
<p><a href="http://www.richbrown.info/">Rich Brown</a><br />
The big font size contributes to the minimalist theme of this website.</p>
<p><a href="http://www.richbrown.info/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/rich-brown.jpg" alt="Rich-brown in Showcase Of Beautiful Vertical Navigation Designs" width="443" height="482" /></a></p>
<p><a href="http://www.stripturnhout.be/">Strip Turnhout</a><br />
This website has an organic hand-written font for its menu, which sets the tone for the layout (which is arranged as a gridded notebook).</p>
<p><a href="http://www.stripturnhout.be/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/strip-turnout.jpg" alt="Strip-turnout in Showcase Of Beautiful Vertical Navigation Designs" width="313" height="376" /></a></p>
<p><a href="http://www.natl.tv/">NATIONAL TELEVISION</a><br />
This menu offers an interesting interaction. When an item is clicked, the menu shifts left or right to make room for the content, thus creating an engaging user experience.</p>
<p><a href="http://www.natl.tv/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/national-television.jpg" alt="National-television in Showcase Of Beautiful Vertical Navigation Designs" width="434" height="653" /></a></p>
<p><a href="http://www.polargold.de/">polargold</a><br />
This navigation has over-sized fonts, making it the highlight of the layout. Hovering over a menu item reveals an interesting animated effect.</p>
<p><a href="http://www.polargold.de/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/polargold.jpg" alt="Polargold in Showcase Of Beautiful Vertical Navigation Designs" width="480" height="296" /></a></p>
<p><a href="http://www.notoriousdesign.co.uk/">Notorious Design</a><br />
In this navigation system, the primary links are vertically oriented. Sub-menu items come out horizontally.</p>
<p><a href="http://www.notoriousdesign.co.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/notorious-design.jpg" alt="Notorious-design in Showcase Of Beautiful Vertical Navigation Designs" width="480" height="324" /></a></p>
<p><a href="http://www.lightsbydallas.com/">Light is Light</a><br />
This simple text-based menu is findable without drawing too much attention from the focal point of the page: the slideshow.</p>
<p><a href="http://www.lightsbydallas.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/light-is-light.jpg" alt="Light-is-light in Showcase Of Beautiful Vertical Navigation Designs" width="324" height="423" /></a></p>
<p><a href="http://www.garysreallife.com/">gary’s real life</a><br />
The items in this menu are done as strips of paper, adding a nice touch to the illustrated theme.</p>
<p><a href="http://www.garysreallife.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/garys-real-life.jpg" alt="Garys-real-life in Showcase Of Beautiful Vertical Navigation Designs" width="467" height="564" /></a></p>
<p><a href="http://www.denisechandler.com/">Denise Chandler</a><br />
The vertical menu here takes up a large part of the layout. Hovering on an item reveals a simple CSS animation that moves the right-pointing arrows further right, giving the user a feeling of moving forward.</p>
<p><a href="http://www.denisechandler.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/denise-chandler.jpg" alt="Denise-chandler in Showcase Of Beautiful Vertical Navigation Designs" width="480" height="371" /></a></p>
<p><a href="http://enviramedia.com/">Envira Media Inc</a><br />
This irregularly arranged menu truly embodies the website’s organic look and feel. Icons on the left of each item help with visual recognition and complement the design.</p>
<p><a href="http://enviramedia.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/envira-media.jpg" alt="Envira-media in Showcase Of Beautiful Vertical Navigation Designs" width="204" height="402" /></a></p>
<p><a href="http://www.mulletized.com/">Mulletized</a><br />
On this website, menu items are located near the middle of the viewport. The simple navigation adds a certain elegance without dominating the layout.</p>
<p><a href="http://www.mulletized.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/mulletized.jpg" alt="Mulletized in Showcase Of Beautiful Vertical Navigation Designs" width="480" height="189" /></a></p>
<p><a href="http://clearideaz.com/">Clearideaz</a><br />
This website’s navigation is unique, looking a little like basket-weaving. Being in the top-right gives it prominence.</p>
<p><a href="http://clearideaz.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/clearideaz.jpg" alt="Clearideaz in Showcase Of Beautiful Vertical Navigation Designs" width="405" height="223" /></a></p>
<p><a href="http://www.thegatesnotes.com/">The Gates Notes</a><br />
Bill Gates’ official website has a unique menu that conveys innovation and forward-thinking: themes that the technology baron surely wants to convey to visitors.</p>
<p><a href="http://www.thegatesnotes.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/official-site-bill.jpg" alt="Official-site-bill in Showcase Of Beautiful Vertical Navigation Designs" width="184" height="557" /></a></p>
<p><a href="http://www.ommwriter.com/">Ommwriter</a><br />
This menu’s items are displayed as translucent circles. On hover, a symbol is revealed that relates to that particular menu item, making the menu memorable.</p>
<p><a href="http://www.ommwriter.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/ommwriter.jpg" alt="Ommwriter in Showcase Of Beautiful Vertical Navigation Designs" width="184" height="557" /></a></p>
<p><a href="http://www.giannis-steakhouse.com/">Gianni’s Steakhouse</a><br />
This menu is slightly tilted, and its skewed orientation is sure to grab the visitor’s attention. The design is appropriate for the website, which is for a restaurant.</p>
<p><a href="http://www.giannis-steakhouse.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/twin-cities-restaurant.jpg" alt="Twin-cities-restaurant in Showcase Of Beautiful Vertical Navigation Designs" width="232" height="479" /></a></p>
<p><a href="http://www.aussiebbqlegends.com/">Aussie BBQ Legends</a><br />
Bold, striking, eye-catching. These adjectives aptly describe Aussie BBQ Legends’ vertical navigation. The menu plays a big part in setting the tone for the website.</p>
<p><a href="http://www.aussiebbqlegends.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/themes/SM-theme-new/images/blank_38x38.png" alt="Aussie-bbq in Showcase Of Beautiful Vertical Navigation Designs" width="427" height="470" /></a></p>
<p><a href="http://www.sidlee.com/">Sid Lee</a><br />
Sid Lee agency uses an interactive navigation menu on the left side of the page. Some sections of the navigation have sub-sections which are displayed next to the primary navigation.</p>
<p><a href="http://www.sidlee.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/04/sid-lee.jpg" alt="Sid-lee in Showcase Of Beautiful Vertical Navigation Designs" width="500" height="438" /></a></p>
<p><a href="http://www.harmonyrepublic.com/">Harmony Republic</a><br />
Harmony Republic places the navigation menu on the left side of its logo. Unusual placement, but it works nicely. The current navigation section is highlighted by a white background.</p>
<p><a href="http://www.harmonyrepublic.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/04/harmony.jpg" alt="Harmony in Showcase Of Beautiful Vertical Navigation Designs" width="500" height="316" /></a></p>
<p><em>(al)</em></p>
<p><em>Original article from <a href="http://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/">Smashing Magazine</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/showcase-of-beautiful-vertical-navigation-designs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Color Inspiration: Go Green with Envy</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/color-inspiration-go-green-with-envy/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/color-inspiration-go-green-with-envy/#comments</comments>
		<pubDate>Tue, 06 Apr 2010 12:38:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[Colors Palette]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[绿色]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=503</guid>
		<description><![CDATA[
			
				
			
		

Green is most often associated with nature, money, and success. Because of this, it’s most often seen on either environmental or financial institution websites. Though it mixes well with a variety of other colors, green is most often paired with neutrals. We’ve compiled twenty five perfect examples of this in today’s inspiration round-up.

Interactive Logistixs


Old Guard


Logo [...]]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fcolor-inspiration-go-green-with-envy%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fcolor-inspiration-go-green-with-envy%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<div>
<p><a href="http://en.wikipedia.org/wiki/Green">Green</a> is most often associated with nature, money, and success. Because of this, it’s most often seen on either environmental or financial institution websites. Though it mixes well with a variety of other colors, green is most often paired with neutrals. We’ve compiled twenty five perfect examples of this in today’s inspiration round-up.</p>
<hr />
<h2>Interactive Logistixs</h2>
<div><a href="http://www.ilogistixs.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/interactivelogistixs.jpg" border="0" alt="" width="500px" height="auto"/></a><span id="more-503"></span></div>
<hr />
<h2>Old Guard</h2>
<div><a href="http://www.oldguard.co.uk/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/oldguard.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Logo Labs</h2>
<div><a href="http://www.logolabs.nl/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/logolabs.jpg" border="0" alt="" /></a></div>
<hr />
<h2>bornintents</h2>
<div><a href="http://www.bornintents.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/bornintents.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Rype Arts</h2>
<div><a href="http://www.rypearts.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/rypearts.jpg" border="0" alt="" /></a></div>
<hr />
<h2>RedBrick Health</h2>
<div><a href="https://www.redbrickhealth.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/redbrickhealth.jpg" border="0" alt="" /></a></div>
<hr />
<h2>The Organic Supermarket</h2>
<div><a href="http://www.organicsupermarket.ie/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/organicsupermarket.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Candy Bouquet</h2>
<div><a href="http://www.candybouquet.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/candybouquet.jpg" border="0" alt="" /></a></div>
<hr />
<h2>OnePromo</h2>
<div><a href="http://www.onepromo.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/onepromo.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Verdeo</h2>
<div><a href="http://www.ricoverdeo.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/verdeo.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Tolingo</h2>
<div><a href="http://www.tolingo.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/tolingo.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Futurice</h2>
<div><a href="http://www.futurice.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/futurice.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Plant With Purpose</h2>
<div><a href="http://www.plantwithpurpose.org/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/plantwithpurpose.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Coachworks Consulting</h2>
<div><a href="http://coachworks-consulting.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/coachworksconsulting.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Gowalla</h2>
<div><a href="http://gowalla.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/gowalla.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Free Gobbler</h2>
<div><a href="http://www.freegobbler.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/freegobbler.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Chris Kaufman</h2>
<div><a href="http://christopherkaufman.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/chriskaufman.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Apop.jp</h2>
<div><a href="http://www.apop.jp/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/apopjp.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Sage Blue</h2>
<div><a href="http://www.sageblue.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/sageblue.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Jones and Palmer</h2>
<div><a href="http://www.jonesandpalmer.co.uk/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/jonesandpalmer.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Shashi Tharoor</h2>
<div><a href="http://tharoor.in/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/shashitharoor.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Nathan Sanders</h2>
<div><a href="http://nathan-sanders.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/nathansanders.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Leetgeek</h2>
<div><a href="http://www.leetgeek.com.au/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/leetgeek.jpg" border="0" alt="" /></a></div>
<hr />
<h2>You Grow Girl</h2>
<div><a href="http://www.yougrowgirl.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/yougrowgirl.jpg" border="0" alt="" /></a></div>
<hr />
<h2>Evernote</h2>
<div><a href="http://www.evernote.com/"><img src="http://s3.amazonaws.com/nettuts/624_greenwebsites/evernote.jpg" border="0" alt="" /></a></div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/color-inspiration-go-green-with-envy/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>25+ Coming Soon Page with Style!</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/25-coming-soon-page-with-style/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/25-coming-soon-page-with-style/#comments</comments>
		<pubDate>Wed, 31 Mar 2010 04:17:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[coming soon page]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=497</guid>
		<description><![CDATA[
			
				
			
		
The first thing to do when starting a new client’s project is placing a splash page also known as “coming soon” or “holding page” and here are a few trends in designing a coming soon page with style.




























]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2F25-coming-soon-page-with-style%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2F25-coming-soon-page-with-style%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>The first thing to do when starting a new client’s project is placing a splash page also known as “coming soon” or “holding page” and here are a few trends in designing a coming soon page with style.</p>
<p><a href="http://lunchies.co.uk/" target="_blank"><img title="1" src="http://www.thelancelife.com/wp-content/uploads/2010/03/1_coming.jpg" alt="" width="500" height="345" /></a></p>
<p><a href="http://www.accentuate.eu/" target="_blank"><img title="2" src="http://www.thelancelife.com/wp-content/uploads/2010/03/2.jpg" alt="" width="500" height="375" /></a><span id="more-497"></span></p>
<p><a href="http://fivesecondprojects.com/" target="_blank"><img title="3" src="http://www.thelancelife.com/wp-content/uploads/2010/03/3.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.jonwardweb.co.uk/" target="_blank"><img title="4" src="http://www.thelancelife.com/wp-content/uploads/2010/03/4.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://irava.net/" target="_blank"><img title="5" src="http://www.thelancelife.com/wp-content/uploads/2010/03/5.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.mynitelife.co.uk/" target="_blank"><img title="6" src="http://www.thelancelife.com/wp-content/uploads/2010/03/6.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://elliotjaystocks.com/goodmorning/" target="_blank"><img title="7" src="http://www.thelancelife.com/wp-content/uploads/2010/03/7.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://cubefrog.com/" target="_blank"><img title="8" src="http://www.thelancelife.com/wp-content/uploads/2010/03/8.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.uberloops.com/" target="_blank"><img title="9" src="http://www.thelancelife.com/wp-content/uploads/2010/03/9.jpg" alt="" width="500" height="476" /></a></p>
<p><a href="http://www.cubecartstyles.com/" target="_blank"><img title="10" src="http://www.thelancelife.com/wp-content/uploads/2010/03/10.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://onotate.com/" target="_blank"><img title="11" src="http://www.thelancelife.com/wp-content/uploads/2010/03/11.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.41studio.com/" target="_blank"><img title="12" src="http://www.thelancelife.com/wp-content/uploads/2010/03/12.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://thelastmarch.com/" target="_blank"><img title="13" src="http://www.thelancelife.com/wp-content/uploads/2010/03/13.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.bmorestudio.com/" target="_blank"><img title="14" src="http://www.thelancelife.com/wp-content/uploads/2010/03/14.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://intemplate.com/intemplate.html" target="_blank"><img title="15" src="http://www.thelancelife.com/wp-content/uploads/2010/03/15.jpg" alt="" width="500" height="448" /></a></p>
<p><a href="http://creativedecor.com.np/" target="_blank"><img title="16" src="http://www.thelancelife.com/wp-content/uploads/2010/03/16.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.riddim.fm/" target="_blank"><img title="17" src="http://www.thelancelife.com/wp-content/uploads/2010/03/17.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.bluebirdapp.com/" target="_blank"><img title="18" src="http://www.thelancelife.com/wp-content/uploads/2010/03/18.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.naprevolution.com/" target="_blank"><img title="19" src="http://www.thelancelife.com/wp-content/uploads/2010/03/19.jpg" alt="" width="500" height="382" /></a></p>
<p><a href="http://www.uooo.tv/" target="_blank"><img title="20" src="http://www.thelancelife.com/wp-content/uploads/2010/03/20.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.michaelericscott.com/" target="_blank"><img title="21" src="http://www.thelancelife.com/wp-content/uploads/2010/03/21.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://themerie.com/" target="_blank"><img title="23" src="http://www.thelancelife.com/wp-content/uploads/2010/03/23.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.enstore.com/" target="_blank"><img title="24" src="http://www.thelancelife.com/wp-content/uploads/2010/03/24.jpg" alt="" width="500" height="418" /></a></p>
<p><a href="http://favmovie.net/" target="_blank"><img title="25" src="http://www.thelancelife.com/wp-content/uploads/2010/03/25.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://chocolatepool.com/" target="_blank"><img title="26" src="http://www.thelancelife.com/wp-content/uploads/2010/03/26.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.justalove.com/" target="_blank"><img title="29" src="http://www.thelancelife.com/wp-content/uploads/2010/03/1.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.creativejoomladesign.com/" target="_blank"><img title="27" src="http://www.thelancelife.com/wp-content/uploads/2010/03/27.jpg" alt="" width="500" height="375" /></a></p>
<p><a href="http://www.inhousegrind.com/" target="_blank"><img title="28" src="http://www.thelancelife.com/wp-content/uploads/2010/03/28.jpg" alt="" width="500" height="375" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/25-coming-soon-page-with-style/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>College and university websites showcases</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/college-and-university-websites-showcases/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/college-and-university-websites-showcases/#comments</comments>
		<pubDate>Mon, 22 Mar 2010 03:47:21 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=457</guid>
		<description><![CDATA[
			
				
			
		
College and university websites have a lot of roles to fill. They need to provide information for prospective students (both new and transfer), parents of students and prospective students, current students, and alumni. In many cases, they’re also the gateway to the school’s intranet and the public face for both academics and athletics. They often [...]]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fcollege-and-university-websites-showcases%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fcollege-and-university-websites-showcases%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>College and university websites have a lot of roles to fill. They need to provide information for prospective students (both new and transfer), parents of students and prospective students, current students, and alumni. In many cases, they’re also the gateway to the school’s intranet and the public face for both academics and athletics. They often need to include reams of information in a way that makes everything easy to find. It’s a huge challenge.</p>
<p>And the truth is: most college and university websites are horribly designed. Either they look like they were designed fifteen years ago and then forgotten about, or they’re so overloaded with information that it’s almost impossible to find what you’re looking for.</p>
<p>But not every college or university website is horrible. There are some excellent sites out there, and below are some of them.</p>
<p>[By the way: The <a href="http://www.smashingmagazine.com/network-posts/">network tab</a> (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]</p>
<h3>General Colleges &amp; Universities</h3>
<p><a href="http://www.appstate.edu/">Appalachian State University</a><br />
Appalachian State University has a simple color scheme and makes great use of icons in their header.</p>
<p><a href="http://www.appstate.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/appalachianstate.jpg" alt="Appalachianstate in Showcase of Academic and Higher Education Websites" /></a><span id="more-457"></span></p>
<p><a href="http://cms.bsu.edu/">Ball State University</a><br />
Ball State University uses a sophisticated color scheme and typography combined with plenty of negative space.</p>
<p><a href="http://cms.bsu.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ballstate.jpg" alt="Ballstate in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.bates.edu/">Bates College</a><br />
The bold header and grid-based layout work well on the Bates College site.</p>
<p><a href="http://www.bates.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/bates.jpg" alt="Bates in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.bennington.edu/">Bennington College</a><br />
Bennington College uses a unique layout and design.</p>
<p><a href="http://www.bennington.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/bennington.jpg" alt="Bennington in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.berea.edu/">Berea College</a><br />
Berea College uses a clean layout, and the cutout in the navigation bar for the logo really sets it apart.</p>
<p><a href="http://www.berea.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/berea.jpg" alt="Berea in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.cwru.edu/">Case Western Reserve University</a><br />
Case Western Reserve University uses a unique layout and color options.</p>
<p><a href="http://www.cwru.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/casewestern.jpg" alt="Casewestern in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.champlain.edu/">Champlain College</a><br />
Champlain College uses a sophisticated, muted color scheme and excellent typography.</p>
<p><a href="http://www.champlain.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/champlain.jpg" alt="Champlain in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.colby-sawyer.edu/">Colby-Sawyer College</a><br />
Colby-Sawyer College has a simple layout with plenty of negative space.</p>
<p><a href="http://www.colby-sawyer.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/colbysawyer.jpg" alt="Colbysawyer in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.wm.edu/">William &amp; Mary</a><br />
The bold header image and excellent typography set the William &amp; Mary site apart.</p>
<p><a href="http://www.wm.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/williammary.jpg" alt="Williammary in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.wooster.edu/">The College of Wooster</a><br />
The College of Wooster uses an interactive, animated header.</p>
<p><a href="http://www.wooster.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/wooster.jpg" alt="Wooster in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.denison.edu/">Denison University</a><br />
Denison’s website makes great use of negative space and a simple layout.</p>
<p><a href="http://www.denison.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/denison.jpg" alt="Denison in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.dickinson.edu/">Dickinson College</a><br />
Dickinson College’s site has a great color scheme and a subtle background image.</p>
<p><a href="http://www.dickinson.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/dickinson.jpg" alt="Dickinson in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.elon.edu/home/">Elon University</a><br />
Elon University’s site includes a lot of details that make the site look really polished.</p>
<p><a href="http://www.elon.edu/home/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/elon.jpg" alt="Elon in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.hamilton.edu/">Hamilton College</a><br />
Hamilton uses a simple color scheme and straight-forward navigation.</p>
<p><a href="http://www.hamilton.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/hamilton.jpg" alt="Hamilton in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.hampshire.edu/">Hampshire College</a><br />
Hampshire College uses a unique, sophisticated color scheme and typography.</p>
<p><a href="http://www.hampshire.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/hampshire.jpg" alt="Hampshire in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.lr.edu/">Lenoir-Rhyne University</a><br />
Lenoir-Rhyne University has a clean layout and bold header slideshow.</p>
<p><a href="http://www.lr.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/lenoirrhyne.jpg" alt="Lenoirrhyne in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.marlboro.edu/">Marlboro College</a><br />
Marlboro College makes good use of a simple layout and color scheme.</p>
<p><a href="http://www.marlboro.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/marlboro.jpg" alt="Marlboro in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.middlebury.edu/#story196211">Middlebury College</a><br />
Middlebury College has a completely unique layout with excellent typography.</p>
<p><a href="http://www.middlebury.edu/#story196211"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/middlebury.jpg" alt="Middlebury in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.minotstateu.edu/">Minot State University</a><br />
Minot State University uses plenty of negative space and clean typography.</p>
<p><a href="http://www.minotstateu.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/minotstate.jpg" alt="Minotstate in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.nebrwesleyan.edu/">Nebraska Wesleyan University</a><br />
Nebraska Wesleyan has one of the best-looking college sites out there, with a fantastic background image and excellent typography.</p>
<p><a href="http://www.nebrwesleyan.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/nebraskawesleyan.jpg" alt="Nebraskawesleyan in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.northland.edu/">Northland College</a><br />
Northland College uses unique typography and grunge elements to stand out.</p>
<p><a href="http://www.northland.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/northland.jpg" alt="Northland in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.oglethorpe.edu/">Oglethorpe University</a><br />
Oglethorpe University uses a modern color scheme and typography.</p>
<p><a href="http://www.oglethorpe.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/oglethorpe.jpg" alt="Oglethorpe in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.owu.edu/">Ohio Wesleyan University</a><br />
Ohio Wesleyan uses a bold color scheme and graphics.</p>
<p><a href="http://www.owu.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ohiowesleyan.jpg" alt="Ohiowesleyan in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.simmons.edu/">Simmons College</a><br />
Simmons College uses a clean, grid-based layout and sophisticated color scheme.</p>
<p><a href="http://www.simmons.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/simmons.jpg" alt="Simmons in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.sbc.edu/">Sweet Briar College</a><br />
Sweet Briar College steps outside of the norm for a college website and uses a more relaxed, feminine design (appropriate for a women’s college).</p>
<p><a href="http://www.sbc.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/sweetbriar.jpg" alt="Sweetbriar in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.syr.edu/">Syracuse University</a><br />
Syracuse University has a fantastic grid layout and modern color scheme.</p>
<p><a href="http://www.syr.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/syracuse.jpg" alt="Syracuse in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.tesc.edu/#">Thomas Edison State College</a><br />
Thomas Edison State College has a great illustration in their header and a sophisticated color scheme.</p>
<p><a href="http://www.tesc.edu/#"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/thomasedison.jpg" alt="Thomasedison in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.tufts.edu/">Tufts University</a><br />
Tufts has a unique layout and excellent typography.</p>
<p><a href="http://www.tufts.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/tufts.jpg" alt="Tufts in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ua.edu/">The University of Alabama</a><br />
The University of Alabama uses a grid layout and plenty of negative space.</p>
<p><a href="http://www.ua.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/universityofalabama.jpg" alt="Universityofalabama in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.uconn.edu/">University of Connecticut</a><br />
The University of Connecticut’s site has a simple layout and navigation.</p>
<p><a href="http://www.uconn.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uconn.jpg" alt="Uconn in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.umf.maine.edu/">University of Maine Farmington</a><br />
The University of Maine Farmington’s website uses a basic grid layout and great typography.</p>
<p><a href="http://www.umf.maine.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/umainefarmington.jpg" alt="Umainefarmington in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.miami.edu/">University of Miami</a><br />
The University of Miami uses a muted color scheme and simple, horizontal navigation.</p>
<p><a href="http://www.miami.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/umiami.jpg" alt="Umiami in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.morris.umn.edu/">University of Minnesota Morris</a><br />
The University of Minnesota Morris’s site incorporates a number of small details that give the site its polished look.</p>
<p><a href="http://www.morris.umn.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uminnesota.jpg" alt="Uminnesota in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.unl.edu/">University of Nebraska-Lincoln</a><br />
A simple color scheme and clean, grid-based layout give the University of Nebraska-Lincoln’s website a polished and sophisticated look.</p>
<p><a href="http://www.unl.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/unebraska.jpg" alt="Unebraska in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.up.edu/">University of Portland</a><br />
The University of Portland uses a simple layout and color scheme with plenty of negative space.</p>
<p><a href="http://www.up.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uportland.jpg" alt="Uportland in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.rochester.edu/">University of Rochester</a><br />
The large background image and non-standard navigation set the University of Rochester’s website apart.</p>
<p><a href="http://www.rochester.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/urochester.jpg" alt="Urochester in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.usp.edu/">University of the Sciences in Philadelphia</a><br />
The University of Sciences in Philadelphia uses a fantastic bright color scheme and clean typography.</p>
<p><a href="http://www.usp.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/usciencesphilly.jpg" alt="Usciencesphilly in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ursuline.edu/">Ursuline College</a><br />
Ursuline College has a simple layout, good typography, and lots of negative space.</p>
<p><a href="http://www.ursuline.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ursuline.jpg" alt="Ursuline in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.viu.ca/">Vancouver Island University</a><br />
Vancouver Island University uses a grid layout and fantastic, monochromatic color scheme.</p>
<p><a href="http://www.viu.ca/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/vancouverislandu.jpg" alt="Vancouverislandu in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.wfu.edu/">Wake Forest University</a><br />
Wake Forest University’s site has clean typography and a simple layout.</p>
<p><a href="http://www.wfu.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/wakeforest.jpg" alt="Wakeforest in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.wesleyan.edu/">Wesleyan University</a><br />
Wesleyan University uses a grid layout and sophisticated color scheme.</p>
<p><a href="http://www.wesleyan.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/wesleyan.jpg" alt="Wesleyan in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.westmont.edu/">Westmont</a><br />
Westmont utilizes a slideshow header and great color scheme.</p>
<p><a href="http://www.westmont.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/westmont.jpg" alt="Westmont in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.abdn.ac.uk/">University of Aberdeen</a><br />
The University of Aberdeen has a fantastic grid layout.</p>
<p><a href="http://www.abdn.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uaberdeen.jpg" alt="Uaberdeen in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://home.bournemouth.ac.uk/">Bournemouth University</a><br />
Bournemouth University uses bright accent colors and tabbed navigation.</p>
<p><a href="http://home.bournemouth.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/bournemouth.jpg" alt="Bournemouth in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.brad.ac.uk/external/">University of Bradford</a><br />
The University of Bradford uses bright accent colors and a grid layout to stand out.</p>
<p><a href="http://www.brad.ac.uk/external/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ubradford.jpg" alt="Ubradford in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.chester.ac.uk/">University of Chester</a><br />
The University of Chester uses an obvious grid layout, an animated header, and simple navigation.</p>
<p><a href="http://www.chester.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uchester.jpg" alt="Uchester in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.edgehill.ac.uk/">Edge Hill University</a><br />
Edge Hill University has a header slideshow, minimalist color palette, and lots of negative space.</p>
<p><a href="http://www.edgehill.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/edgehill.jpg" alt="Edgehill in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www2.hull.ac.uk/default.aspx">University of Hull</a><br />
The University of Hull has a unique layout, simple navigation, and great accessibility features.</p>
<p><a href="http://www2.hull.ac.uk/default.aspx"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uhull.jpg" alt="Uhull in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.kingston.ac.uk/">Kingston University London</a><br />
The Kingston University London’s website uses bright accent colors and simple navigation.</p>
<p><a href="http://www.kingston.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/kingstonu.jpg" alt="Kingstonu in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.leeds.ac.uk/">University of Leeds</a><br />
The University of Leeds has a simple layout, minimalist aesthetic, and good typography. They also make excellent use of icons to simplify navigation.</p>
<p><a href="http://www.leeds.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/uleeds.jpg" alt="Uleeds in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ox.ac.uk/">University of Oxford</a><br />
Oxford uses a simple color scheme and clean layout and makes good use of negative space.</p>
<p><a href="http://www.ox.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/oxford.jpg" alt="Oxford in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.soton.ac.uk/">University of Southampton</a><br />
The University of Southampton has a bold header and simple color scheme.</p>
<p><a href="http://www.soton.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/usouthampton.jpg" alt="Usouthampton in Showcase of Academic and Higher Education Websites" /></a></p>
<h3>Community Colleges</h3>
<p><a href="http://www.slcc.edu/">Salt Lake Community College</a><br />
Salt Lake Community College uses photorealistic and grunge elements, combined with a unique layout.</p>
<p><a href="http://www.slcc.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/saltlakecc.jpg" alt="Saltlakecc in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.pccc.edu/">Passaic County Community College</a><br />
Passaic County Community college uses an obvious grid layout and a great color scheme.</p>
<p><a href="http://www.pccc.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/passaiccountycc.jpg" alt="Passaiccountycc in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.anokaramsey.edu/">Anoka-Ramsey Community College</a><br />
Anoka-Ramsey Community College has a unique color scheme and a good use of negative space.</p>
<p><a href="http://www.anokaramsey.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/anokaramsey.jpg" alt="Anokaramsey in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.columbiastate.edu/">Columbia State Community College</a><br />
Columbia State Community College has a simple layout and color scheme with clean typography.</p>
<p><a href="http://www.columbiastate.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/columbiastate.jpg" alt="Columbiastate in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://fidm.edu/">Fashion Institute of Design &amp; Merchandising</a><br />
FIDM uses an excellent bright color scheme and a prominent slideshow.</p>
<p><a href="http://fidm.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/fashioninstitute.jpg" alt="Fashioninstitute in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.sunyjcc.edu/">Jamestown Community College</a><br />
Jamestown Community College’s site has a simple layout and navigation.</p>
<p><a href="http://www.sunyjcc.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/jamestowncc.jpg" alt="Jamestowncc in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.jjc.edu/Pages/default.aspx?c=1">Joliet Junior College</a><br />
Joliet Junior College has a simple layout with a good use of icons.</p>
<p><a href="http://www.jjc.edu/Pages/default.aspx?c=1"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/jolietjc.jpg" alt="Jolietjc in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.hagerstowncc.edu/">Hagerstown Community College</a><br />
Hagerstown Community College has a good color scheme, clean typography, and simple navigation.</p>
<p><a href="http://www.hagerstowncc.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/hagerstowncc.jpg" alt="Hagerstowncc in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.lonestar.edu/">Lone Star College System</a><br />
Lone Star College System makes good use of transparency.</p>
<p><a href="http://www.lonestar.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/lonestar.jpg" alt="Lonestar in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.wccnet.edu/">Washtenaw Community College</a><br />
Washtenaw Community College has great hand-drawn elements, and a unique layout and color scheme.</p>
<p><a href="http://www.wccnet.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/washtenawcc.jpg" alt="Washtenawcc in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.northlandcollege.edu/">Northland Community &amp; Technical College</a><br />
Northland Community &amp; Technical College has a sophisticated layout and color scheme.</p>
<p><a href="http://www.northlandcollege.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/northlandctc.jpg" alt="Northlandctc in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.nwicc.edu/">Northwest Iowa Community College</a><br />
The Northest Iowa Community College site uses a mix of collage, photorealistic, and hand-drawn elements.</p>
<p><a href="http://www.nwicc.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/nwicc.jpg" alt="Nwicc in Showcase of Academic and Higher Education Websites" /></a></p>
<h3>Art and Design Colleges &amp; Universities</h3>
<p><a href="http://web.lesley.edu/aib/default.asp">The Art Institute of Boston</a><br />
The Art Institute of Boston combines a simple layout with bold header graphics.</p>
<p><a href="http://web.lesley.edu/aib/default.asp"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/artinstituteofboston.jpg" alt="Artinstituteofboston in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.kcai.edu/">Kansas City Art Institute</a><br />
The Kansas City Art Institute uses bright colors, a collage-style background, and loose grid layout.</p>
<p><a href="http://www.kcai.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/kansascityartinstitute.jpg" alt="Kansascityartinstitute in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.mca.edu/">Memphis College of Art</a><br />
The Memphis College of Art site uses bright bright pink accents combined with a simple design and clean typography.</p>
<p><a href="http://www.mca.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/memphiscollegeofart.jpg" alt="Memphiscollegeofart in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.mcad.edu/">Minneapolis College of Art &amp; Design</a><br />
The patterned background, animated header, and clean typography set the site of the Minneapolis College of Art and Design apart.</p>
<p><a href="http://www.mcad.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/mcad.jpg" alt="Mcad in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.moore.edu/">Moore College of Art &amp; Design</a><br />
Bold graphics and a textured background makes the Moore College of Art &amp; Design site stand out.</p>
<p><a href="http://www.moore.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/moorecollege.jpg" alt="Moorecollege in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ocad.ca/">The Ontario College of Art &amp; Design</a><br />
The Ontario College of Art &amp; Design uses a grid layout and modern orange and white color scheme.</p>
<p><a href="http://www.ocad.ca/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ocad.jpg" alt="Ocad in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.pcad.edu/">Pennsylvania College of Art &amp; Design</a><br />
The Pennsylvania College of Art &amp; Design uses a modern color scheme and bold header.</p>
<p><a href="http://www.pcad.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/pennsylvaniacollegead.jpg" alt="Pennsylvaniacollegead in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.cca.edu/">California College of the Arts</a><br />
The California College of Arts uses a unique color scheme and animated header.</p>
<p><a href="http://www.cca.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ccota.jpg" alt="Ccota in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.falmouth.ac.uk/">University College Falmouth</a><br />
University College Falmouth’s site has bright accent colors, lots of negative space, and simple layout and navigation.</p>
<p><a href="http://www.falmouth.ac.uk/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ucfalmouth.jpg" alt="Ucfalmouth in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.mica.edu/">Maryland Institute College of Art</a><br />
MICA uses a grid layout, muted color scheme, and excellent typography.</p>
<p><a href="http://www.mica.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/mica.jpg" alt="Mica in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.scad.edu/">SCAD</a><br />
SCAD’s minimalist light-on-dark design sets it apart.</p>
<p><a href="http://www.scad.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/scad.jpg" alt="Scad in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.corcoran.edu/">Corcoran College of Art &amp; Design</a><br />
Corcoran’s mix of minimalist grid design and bold colors is fantastic.</p>
<p><a href="http://www.corcoran.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/corcoran.jpg" alt="Corcoran in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ecuad.ca/">Emily Carr University of Art &amp; Design</a><br />
Emily Carr University of Art &amp; Design has a wonderful minimalist layout and clean typography mixed with bold accent colors.</p>
<p><a href="http://www.ecuad.ca/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/emilycarr.jpg" alt="Emilycarr in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ocac.edu/">Oregon College of Art &amp; Craft</a><br />
Bold background, great typography, excellent navigation.</p>
<p><a href="http://www.ocac.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/oregoncollege.jpg" alt="Oregoncollege in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ringling.edu/">Ringling College of Art &amp; Design</a><br />
The grid layout and bold background give the website of Ringling College of Art &amp; Design a unique look.</p>
<p><a href="http://www.ringling.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ringlingcollege.jpg" alt="Ringlingcollege in Showcase of Academic and Higher Education Websites" /></a></p>
<h3>Other Institutions, Colleges &amp; Universities</h3>
<p><a href="http://www.asian-university.org/">Asian University for Women</a><br />
The Asian University for Women’s site has an excellent gold and maroon color scheme and plenty of negative space.</p>
<p><a href="http://www.asian-university.org/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/asianuniversity.jpg" alt="Asianuniversity in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.ciis.edu/">California Institute of Integral Studies</a><br />
The bold typography and great color scheme of the California Institute of Integral Studies sets it apart.</p>
<p><a href="http://www.ciis.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/ciis.jpg" alt="Ciis in Showcase of Academic and Higher Education Websites" /></a></p>
<p><a href="http://www.rit.edu/">Rochester Institute of Technology</a><br />
The orange and cream color scheme, simple navigation and clean typography make the Rochester Institute of Technology’s site unique.</p>
<p><a href="http://www.rit.edu/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/02/rit.jpg" alt="Rit in Showcase of Academic and Higher Education Websites" /></a></p>
<h3>Conclusion</h3>
<p>While the vast majority of college and university websites out there are in need of serious overhaul, there are some fine examples of sites if you look hard enough. If designing a site for a college or university, remember that simplicity and negative space are both important, regardless of the amount of information a site needs to contain.</p>
<p><em>Original article from <a href="http://www.smashingmagazine.com/2010/03/19/showcase-of-academic-and-higher-education-websites/">smashingmagazine</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/college-and-university-websites-showcases/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Showcase Of Web Design In China: From Imitation To Innovation</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/showcase-of-web-design-in-china-from-imitation-to-innovation/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/showcase-of-web-design-in-china-from-imitation-to-innovation/#comments</comments>
		<pubDate>Mon, 15 Mar 2010 16:49:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[china]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=441</guid>
		<description><![CDATA[
			
				
			
		
Today&#8217;s article on Smashing Magazine is showcase of China web design. So absolutely collect it into here.
China is a country with five thousand years of civilization. It is a multi-national entity extending over a large area of East Asia. China’s cultural influence extends across the continent, with customs and writing systems adopted by neighboring countries [...]]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fshowcase-of-web-design-in-china-from-imitation-to-innovation%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fshowcase-of-web-design-in-china-from-imitation-to-innovation%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Today&#8217;s article on Smashing Magazine is showcase of China web design. So absolutely collect it into here.</p>
<p><strong>China</strong> is a country with five thousand years of civilization. It is a multi-national entity extending over a large area of East Asia. China’s cultural influence extends across the continent, with customs and writing systems adopted by neighboring countries including Japan, Korea and Vietnam.</p>
<p>China has gone through numerous ups and downs and twists and turns, from wealthy and prosperous (as during the Tang Dynasty back in 618–907 AD) to powerless and colonized (as during the Qing Dynasty, just around 100 years ago). Now China is reopening its door to the world again, embracing the latest trends, concepts and technologies, the World Wide Web being one of them.</p>
<p>In our interviews with six well-known designers in China, each of whom wears different hats, the recurring theme was that China’s Web design industry is rising like a spiral from imitation to innovation and user-centered design.</p>
<p><a href="http://doopaa.cn/doopaademo/doopaashanguo/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-doopaa.jpg" alt="Image-doopaa in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="352" /></a><span id="more-441"></span><br />
<em>Chinese Web Design: <a href="http://doopaa.cn/doopaademo/doopaashanguo/">Dongpai</a></em></p>
<p>[Offtopic: by the way, have you already visited <a href="http://creatives.commindo-media.de/www/delivery/ck.php?oaparams=2__bannerid=1247__zoneid=0__cb=752b87925c__oadest=http%3A%2F%2Fwww.facebook.com%2Fsmashmag">Smashing Magazine's Facebook fan page</a>? Join the community for a stream of useful resources, updates and giveaways!]</p>
<h3>State Of Affairs</h3>
<p>The designers we interviewed had much to say about the direction of Web design in China, the status quo and trends. The individuals are spread out across four major cities in China, and they are:</p>
<ul>
<li><a title="Guo Yu" href="http://hi.baidu.com/madesign">Yu Guo</a><br />
Former chief designer at Baidu, China’s largest search engine.<br />
Current city: Beijing.</li>
<li><a href="http://uicom.net/blog">Whitecrow Zhu</a><br />
Co-founder of <a href="http://www.ucdchina.com/">UCDChina</a>, and principal product experience designer at Alipay, a subsidiary of Alibaba.<br />
Current city: Hangzhou.</li>
<li><a href="http://www.junchenwu.com/">Junchen Wu</a><br />
Co-founder of UCDChina, and director of products at Tuniu Travel.<br />
Current city: Nanjing.</li>
<li><a href="http://ucdchina.com/lytous">Lytous Zhou</a><br />
Visual designer, UI lead at CK Telecom and author of the book <a title="UI Evolution: HCI Design of Mobile Devices" href="http://lytous.ucdchina.com/?p=2103">UI Evolutionism</a>.<br />
Current city: Shenzhen.</li>
<li><a href="http://www.google.com/profiles/johnwoooo">John Woo</a><br />
Lead of the user-experience team at Google China.<br />
Current city: Beijing.</li>
<li><a href="http://blog.rexsong.com/">Rex Song</a><br />
Freelance information architect; co-founder of UCDChina.<br />
Current city: Beijing.</li>
</ul>
<p>The interviews were conducted via phone, Skype and Google Talk. Questions were sent to the designers before the interviews to give them context, but the actual interviews were semi-structured. Being interested in the scope of their thoughts, we asked them not to limit their answers to just “Web design.” The designers were told that Web design here refers not only to visuals, CSS and the front end, but also the back end, infrastructure, design rationale, cultural elements, user-experience design and research and so on. We wanted the designers to express their thoughts as openly and as creatively as they wanted to.</p>
<p><a href="http://mfm.moliyo.com/event/unionWar/index.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/china-2.jpg" alt="China-2 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="408" /></a><br />
<em><a href="http://mfm.moliyo.com/event/unionWar/index.html">MFM Moliyo</a>, a game website.</em></p>
<p><strong>Question: How do you see the status quo of Web design in China?</strong></p>
<p><em>Yu Guo:</em> Almost 70% of Chinese Internet users are under 30 years of age. They are young, open, and they adapt to new things quickly. They like to play games online and enjoy looking for ways to entertain themselves online. So, you may see <strong>visually attractive</strong> elements on many Chinese websites, the purpose of which is to cater to this group of users.</p>
<p><em>Whitecrow Zhu:</em> About two years ago, we witnessed a huge trend where designers in China were imitating Korean websites in their use of Flash. Flashy and colorful design was once the trend. However, with the introduction of Web 2.0, websites in China are improving. Users are exploring the content as opposed to exploring solely the visuals. Visuals alone do not satisfy Chinese users any more. They are looking for useful and helpful content, and they want to contribute to the websites as well.</p>
<p><em>Junchen Wu:</em> It’s on an upward trend, getting better and better, but like a spiral. In terms of Web knowledge and techniques, Chinese designers are on par with designers in Western countries, but they have not reached the point of fully utilizing that body of knowledge. An excellent example of this is user research. Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.</p>
<p><em>Lytous Zhou:</em> Well, two points. One, limited budgets are very common in China’s Web design market. As a result, Web design ends up with overwhelming visuals to attract attention. It might be flashy and pretty at first sight, but the information architecture might not be well planned, and usability can be poor. Regarding the second point, Chinese Web design tends to be very localized, as it should be.</p>
<p><a href="http://wbdq.midea.com.cn/2010/newyear/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-meidi.jpg" alt="Image-meidi in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="340" /></a><br />
<em>Chinese web design: <a href="http://wbdq.midea.com.cn/2010/newyear/">Midea Microwave Oven</a></em></p>
<p>For example, Alipay, a byproduct of Taobao, became a successful standalone product because it took into consideration the purchasing behavior and psychology of Chinese users. China is a big country, and some websites are successful because they cater to particular geographical locations. The other side of the coin is that Chinese Web design is not quite international yet. It’s such a huge market and can sustain itself without even reaching out to the international market. You will see that UCDChina.com and a lot of other Chinese websites don’t have English versions, even in their navigation.</p>
<p><em>John Woo:</em> China has not formed one distinctive Web design style yet, because the country is big, and Chinese users are complicated in many ways. The impression of foreigners of Chinese Web design might be that it is busy and flashy, but I take it as <strong>practical</strong>. When Flash design was the fashion, many designers (or their bosses) wanted to use Flash to make their Web pages attractive. When SNS was booming in the US, it was soon introduced in China, together with the Facebook and Twitter design styles. When it’s practical and useful, many Chinese people will just borrow the concept and develop it further. Baidu, QQ and Taobao won business and respect this way.</p>
<p><em>Rex Song:</em> China has a large population, and the saying “the more, the merrier” applies to its Web design. You will see some Web pages that are busy and cluttered, with designers or stakeholders trying to put everything on the page. The other thing is that, currently, the primary motivation to go online for the average web surfer in China is <strong>entertainment</strong>. So, Web designers in China tend to make their websites play-ish, SNS-ish and visually attractive, as we saw with the popular trend back in 2004 to imitate Korean Flash websites.</p>
<p><a href="http://www.shoebox.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-shoebox.jpg" alt="Image-shoebox in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="328" /></a><br />
<a href="http://www.shoebox.com.cn/">Shoebox</a></p>
<h3>Chinese Web Design In A Nutshell</h3>
<p>So, do you now have a rough idea of the status quo in Chinese Web design? Although our interviewees tended not to reduce Web design in China to certain patterns, we summarized a few bullet points based on the topics most frequently mentioned in our interviews.</p>
<h4>1. Flash-Heaviness: Born of Imitation</h4>
<p>Flash design has been a source of constant debates for years. The fact that optimizing Flash objects for search engines can be difficult is a major turn-off for some designers.</p>
<p>However, Flash was called out, and it’s the most frequently mentioned keyword in our interviews. Back in 2004, when Korean websites were all in Flash, Chinese designers and business owners considered Flash the “fashion.” Rex Song mentioned that when this trend was extremely popular a few years ago, you could even download ready-made Korean-style Flash ZIP files from online stores for little money, so that you could do it quick without spending a lot of effort.</p>
<p>Google is renowned for its focus on simplicity. But take a peek at the nuances that distinguish <a href="http://www.google.cn/">Google China</a> and<a href="http://www.google.com/">Google US</a>:</p>
<p><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-Google_-CN_US.jpg" alt="Image-Google -CN US in Showcase Of Web Design In China: From Imitation To Innovation" width="550" height="235" align="absmiddle" /></p>
<p>The design of Google China is a bit more vivid than that of Google US, with a hint of animation added to the former to enhance the richness of Google search. By the way, this concept was first implemented on Google Korea and Japan, although both of them have since reverted to a more static interface.</p>
<p>Although Flash implementation began as imitation, it is now increasingly featured in the portfolios of design studios and freelancers, on websites to launch new products and for products geared to the younger generation.</p>
<p><a href="http://www.shanghaivive.com.cn/">Shanghai Vive</a> is an old Shanghai cosmetics company that is trying to rebrand and attract high-end consumers. Its branding uses Flash heavily, depicting an elegant and high-class life.</p>
<p><a href="http://www.shanghaivive.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-vive.jpg" alt="Image-vive in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="290" /></a></p>
<p><a href="http://www.coolbear.cn/">Cool Bear Hi</a>, one of the product lines of Great Wall Motor, has a Flash website to promote its new car release.</p>
<p><a href="http://www.coolbear.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-coolbear.jpg" alt="Image-coolbear in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="341" /></a></p>
<p>To accommodate low-speed Internet connections, Cool Bear Hi does a good job of showing the progress of the loading Flash.</p>
<p><a href="http://www.coolbear.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-coolbear-progress.jpg" alt="Image-coolbear-progress in Showcase Of Web Design In China: From Imitation To Innovation" width="469" height="375" /></a></p>
<p>The text below the car on Cool Bear Hi changes as more Flash loads. With the chipper text there to assuage visitors, the loading Flash doesn’t seem that boring to watch. Above are a few screenshots we took, and below is what it says at various points in the loading process:</p>
<ul>
<li>At 4%: “Choose Cool Bear Hi. Share your happiness.”</li>
<li>At 22%: “Wear a smiling face every day, and say Hi to everybody.”</li>
<li>At 41%: “Cool Bear is impatient, ‘Why hasn’t anybody taken me home!’”</li>
<li>At 70%: “Book a test-drive appoint. Get your special gift and reward points.”</li>
</ul>
<p><a href="http://www.miandianfang.com/">Mian Dian Fang</a>, a ready-to-serve breakfast company, also uses heavily Flash on its corporate website. The animation gives the steam bread and “baozi” a human touch, having them do morning exercises and other activities. The metaphor persuades customers that the company serves a healthy breakfast.</p>
<p><a href="http://www.miandianfang.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-mian-dian-fang.jpg" alt="Image-mian-dian-fang in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="360" /></a></p>
<p>Let’s look at how Mian Dian Fang shows its loading progress:</p>
<p><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-mian-dian-fang-progress.jpg" alt="Image-mian-dian-fang-progress in Showcase Of Web Design In China: From Imitation To Innovation" width="397" height="407" /></p>
<p>The loading animation parodies the yeast process: the flour gets bigger and bigger, until you can see a full-blown website.</p>
<p><a href="http://www.shoebox.com.cn/">Shoebox</a>, a shoe brand for the younger generation in China, uses Flash across the whole website to show its grasp of fashion. In addition, the sketched art on the home page and old brown newspaper color for the background set up Shoebox’s philosophy: taste is an attitude of life; start with the simple; fashion is a kind of sport; start with Shoebox.</p>
<p><a href="http://www.shoebox.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-shoebox.jpg" alt="Image-shoebox in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="328" /></a></p>
<p><a href="http://www.ophone001.com/">Lenovo Mobile O1</a> takes advantage of personalities and embeds their stories in Flash to present the features, functionality and usefulness of its new product, Lenovo O1.</p>
<p><a href="http://www.ophone001.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-lenovo.jpg" alt="Image-lenovo in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="326" /></a></p>
<p><a href="http://www.artlans.com/">Artlans</a>, an interactive design studio, also uses Flash, especially for its menu buttons, the call to action and the language switcher. Design studios may not want to use Flash all over their portfolios, but rather in a few key places to show their skill at using Flash for clients.</p>
<p><a href="http://www.artlans.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-artlans.jpg" alt="Image-artlans in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="411" /></a></p>
<p><a href="http://www.conceives.cn/sheji/index.htm">Idea Design</a>, a design studio that uses Flash in full swing.</p>
<p><a href="http://www.conceives.cn/sheji/index.htm"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-idea-design.jpg" alt="Image-idea-design in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="319" /></a></p>
<h4>2. Designing for Entertainment</h4>
<p>We really liked our one-on-one interviews because not only did we hear different stories from different people, but we also heard certain other stories from <em>everyone</em>. For example, Whitecrow, Lytous, Yu, and Rex all talked about the “<strong>entertainmentalization</strong>” of Chinese Web design. “When a social networking website comes to China, it must become a game website,” said Whitecrow.</p>
<p>A case in point is a feature provided by <a href="http://www.kaixin.com/">Kaixin.com</a> (Kaixin means “happy”), which recently spurred a social phenomenon in China: “Stealing vegetables.” Kaixin pretty much copied Facebook’s navigation and user interaction. But it’s different in what it allows you to do: set up your “Happy Farm,” build your house, grow your own vegetables and then steal your friends’ vegetables when they are ready to be harvested. Some dedicated players even made Excel spreadsheets to track their friends’ harvest season in order to expedite stealing. It’s like any other video game but embedded on a social networking website, allowing you to play with a wider variety of users. “Stealing vegetables” became so popular that it drew the attention of censors from China’s Ministry of Culture. Under pressure from the Ministry, the game is now called “Picking vegetables,” a less offensive euphemism for mainstream Chinese culture. Online players still prefer the more accurate name.</p>
<p>Happy Farm<br />
<img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-kaixin2.jpg" alt="Image-kaixin2 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="389" /></p>
<p>Happy Ranch<br />
<img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-kaixin3.jpg" alt="Image-kaixin3 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="393" /></p>
<p>Happy Orchard<br />
<img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-kaixin4.jpg" alt="Image-kaixin4 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="395" /></p>
<p>The application was recently added to Facebook, but it is only for Chinese-speaking users at this time.</p>
<p><a href="http://lipton.renren.com/chain.do">Lipton Milk Tea</a> features a “Hug Relay” game that you can play right on the website. Hug your friends by validating your account on <a href="http://www.renren.com/">Renren</a>, another social networking website in China, and gain hug points.</p>
<p><a href="http://lipton.renren.com/chain.do"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-lipton.jpg" alt="Image-lipton in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="320" /></a></p>
<p>Once you accumulate enough hug points, you can shop on the online store and purchase gifts, an incentive to maintain momentum in the game:</p>
<p><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-lipton2.jpg" alt="Image-lipton2 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="302" /></p>
<p>Like Lipton, <a href="http://www.m-ms.com.cn/">M&amp;M China</a> also uses an online “relay” game to engage visitors to its website.</p>
<p><a href="http://www.m-ms.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-mm.jpg" alt="Image-mm in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="335" /></a></p>
<p><a href="http://www.iloveg3.com/">I Love G3</a>, a website from China Mobile to promote the 3G network and 3G cell phones, presents an animated Flash questionnaire for users to play around with.</p>
<p><a href="http://www.iloveg3.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-ilove3g.jpg" alt="Image-ilove3g in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="312" /></a></p>
<p>After you have answered a series of questions such as, “How would you kill time on a train?” and “How would you cross the ocean?” the system analyzes your personality and recommends 3G cell phones to match you:</p>
<p><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-ilove3g2.jpg" alt="Image-ilove3g2 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="310" /></p>
<h4>3. Designing for Clicks</h4>
<p>Unlike Latin and Germanic languages, Chinese is rooted in hieroglyphic characters. Typing in Chinese on an alphabet-based keyboard can be slow, especially for middle-aged and older users. So, you will see that some website user interfaces are extremely busy: text and image links everywhere—”the more, the merrier,” as Rex Song points out. These websites are designed for clicking, as opposed to searching (although keyword search is an essential component of any information-rich website).</p>
<p><a href="http://buy.yoho.cn/">Yoho</a>, an online shopping platform for the younger generation, takes advantage of every sliver of real estate on the page to promote its products. Yes, a search box is in the top-right for you to search, but with all of these images and hyperlinks, it’s more enticing to just click, click, click.</p>
<p><a href="http://buy.yoho.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-yoho.jpg" alt="Image-yoho in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="890" /></a></p>
<p>It’s the same with <a href="http://www.chinavisual.com/">China Visual</a>, a visual design resource portal. The home page presents all sections of the website as text and image links, giving you a quick peek of the content.</p>
<p><a href="http://www.chinavisual.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-chinavisual.jpg" alt="Image-chinavisual in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="1510" /></a></p>
<p><a href="http://www.163.com/">NetEase</a> (aka 163.com), one of the largest news portals in China, takes full advantage of the Web reading pattern of Chinese users: i.e. clicking.</p>
<p><a href="http://www.163.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-netease.jpg" alt="Image-netease in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="1875" /></a></p>
<p>Above is a screenshot of NetEase’s home page. The Chinese lunar New Year was approaching when we were writing this article, and you can see that this website uses red, a color symbolic of festivals, for the background. The page is filled with headlines of news and featured articles as well as ad spots. You can perform a search at the top of the page, but by scanning the entire page, you get a sense of what’s happening today. And if you’re interested in any of the headlines, just click—that easy.</p>
<p>All that said, many websites are working to unclutter their UI, increase the font size and line spacing and enhance readability. “<a href="http://www.sina.com/">Sina.com</a>, if you have been paying attention to its redesigns all the way back to the late 1990s, is doing better and better at information design,” said John Woo, lead of the Google China UX team.</p>
<h4>4. Designing for Culture</h4>
<p>When asked, “Can the world learn anything from Chinese web design?” Lytous Zhou answered without hesitation: “Culture. The Chinese respect <a href="http://en.wikipedia.org/wiki/Dao">Dao</a>, and we have our own set of values and mores. Websites targeted to the Chinese market should follow the online habits and aesthetics of Chinese users. For example, cultural symbols, calligraphic elements and festivities: all of these could be integrated into a Web design if applicable. A lake may just be a lake, but associating a fairy tale with a lake makes it prettier.”</p>
<p>True, if you add a fairy tale and human touch to a lake, the user’s perception of it would change.</p>
<p><a href="http://www.pizzahut.com.cn/">Pizza Hut China</a>, which is an example I like to use every time I explain cultural differences, uses Chinese elements heavily all over its website: in the color scheme and family theme. Warm reds and yellows are colors symbolic of festivity in China, and the family dinner is highly regarded in Chinese society.</p>
<p><a href="http://www.pizzahut.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-pizzahut.jpg" alt="Image-pizzahut in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="384" /></a></p>
<p>By comparison, <a href="http://www.pizzahut.com/">Pizza Hut US</a> highlights fast food and online ordering on its home page. Red is also Pizza Hut US’ theme color, but it’s more solid, darker and cooler than the warm red on the Chinese website.</p>
<p><a href="http://www.pizzahut.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-pizzahut-us.jpg" alt="Image-pizzahut-us in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="405" /></a></p>
<p>Same with <a href="http://www.mcdonalds.com.cn/momskids/momsclub.aspx">McDonald’s China</a> website, where one main menu is dedicated to the “Happy Family Party.”</p>
<p><a href="http://www.mcdonalds.com.cn/momskids/momsclub.aspx"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-mcdonalds.jpg" alt="Image-mcdonalds in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="401" /></a></p>
<p><a href="http://www.tong2studio.com/Version2009/index.aspx">Tong2 Studio</a> has a unique look and feel with this traditional Chinese floral pattern on its background.</p>
<p><a href="http://www.tong2studio.com/Version2009/index.aspx"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-tong2studio.jpg" alt="Image-tong2studio in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="308" /></a></p>
<p><a href="http://www.sixstation.com/">Six Station</a>, whose home page is a Chinese ink and watercolor painting in Flash, opens its creative and innovative mind to clients.</p>
<p><a href="http://www.sixstation.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-sixstation.jpg" alt="Image-sixstation in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="369" /></a></p>
<p><a href="http://doopaa.cn/doopaademo/doopaashanguo/">Dongpai Design</a>, an interactive design studio, has an interesting mini-website that borrows from the “Three Kingdom” story (a period of Chinese history) to communicate its design philosophy and values.</p>
<p><a href="http://doopaa.cn/doopaademo/doopaashanguo/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-doopaa.jpg" alt="Image-doopaa in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="352" /></a></p>
<p>While John Woo points out that incorporating national and cultural elements into design is not limited to the Web, he acknowledges the <strong>practicality</strong> of Chinese Web design—that designers will borrow anything that might be useful to them or their users.</p>
<h3>Want An Even Bigger Showcase?</h3>
<p>Not enough visuals for you? Here is a whole bunch of more websites to give you a better sense of design in China.</p>
<p><a href="http://www.wooov.com/">UI Seven</a><br />
A design studio.</p>
<p><a href="http://www.wooov.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-UI-Seven.jpg" alt="Image-UI-Seven in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="276" /></a></p>
<p><a href="http://www.idt.net.cn/">IDT</a><br />
A personal showcase that records the designer’s 12-year love affair with his girlfriend (now wife) and his own professional growth as the Web evolved during those years.</p>
<p><a href="http://www.idt.net.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-idt.JPG" alt=" in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="331" /></a></p>
<p><a href="http://www.uguanbing.com/">Youguan Cookies</a><br />
Also uses Flash animation to promote its product line.</p>
<p><a href="http://www.uguanbing.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-uguan.jpg" alt="Image-uguan in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="328" /></a></p>
<p><a href="http://www.xinhongru.com/">Xin Hongru</a><br />
An interactive design agency that uses both Chinese elements and Flash to showcase its work.</p>
<p><a href="http://www.xinhongru.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-xinhongru.jpg" alt="Image-xinhongru in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="292" /></a></p>
<p><a href="http://edge.thinkworld.com.cn/">Thinkpad Edge</a><br />
A new product line of the Thinkpad laptop.</p>
<p><a href="http://edge.thinkworld.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-thinkpad-edge.jpg" alt="Image-thinkpad-edge in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="323" /></a></p>
<p><a href="http://mfm.moliyo.com/">Moliyo MFM</a><br />
An online video game website, designed for clicks.</p>
<p><a href="http://mfm.moliyo.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/china-1.jpg" alt="China-1 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="962" /></a></p>
<p><a href="http://www.361sport.com/">361 Sports</a><br />
Borrows the theme of the 2010 Guangzhou Asian Games for its home page.</p>
<p><a href="http://www.361sport.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-361-sports.jpg" alt="Image-361-sports in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="323" /></a></p>
<p><a href="http://www.dovechocolate.com.cn/">Dove Chocolate China</a><br />
Uses Chinese elements and the lunar New Year to decorate its home page.</p>
<p><a href="http://www.dovechocolate.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-dove.jpg" alt="Image-dove in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="322" /></a></p>
<p><a href="http://www.bangbangwa.com/?jdfwkey=xtvav3">BangbangWa</a><br />
A snack company whose website is rich in games and Flash.</p>
<p><a href="http://www.bangbangwa.com/?jdfwkey=xtvav3"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-bangbangwa.jpg" alt="Image-bangbangwa in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="342" /></a></p>
<p><a href="http://www.juyun.org/">Brain Town</a><br />
A personal portfolio website.</p>
<p><a href="http://www.juyun.org/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-braintown.jpg" alt="Image-braintown in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="327" /></a></p>
<p><a href="http://shuxia.cc/">ShuXia</a><br />
A platform to showcase the creations of members.</p>
<p><a href="http://shuxia.cc/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-appletree.jpg" alt="Image-appletree in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="485" /></a></p>
<p><a href="http://www.jossyjo.com.cn/main.html">Jossy Jo</a><br />
A clothing brand.</p>
<p><a href="http://www.jossyjo.com.cn/main.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-jossyjo.jpg" alt="Image-jossyjo in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="323" /></a></p>
<p><a href="http://www.apsou.com/">Apsou</a><br />
An interactive consulting agency.</p>
<p><a href="http://www.apsou.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-apsou.jpg" alt="Image-apsou in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="304" /></a></p>
<p><a href="http://www.ppoqq.com/">Mole Lele</a><br />
A cartoonist’s personal website.</p>
<p><a href="http://www.ppoqq.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-molelele.jpg" alt="Image-molelele in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="490" /></a></p>
<p><a href="http://w.webe7.com/">WEBE7 Enterprise Network Interactive</a><br />
A portfolio website.</p>
<p><a href="http://w.webe7.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-webe7.jpg" alt="Image-webe7 in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="333" /></a></p>
<p><a href="http://www.sansheng-toscana.com/">Sanshen Toscana</a><br />
A real-estate website that relies heavily on Flash.</p>
<p><a href="http://www.sansheng-toscana.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-sansheng.jpg" alt="Image-sansheng in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="341" /></a></p>
<p><a href="http://www.wotoon.com/index.php">Wotoon Design</a><br />
A design agency.</p>
<p><a href="http://www.wotoon.com/index.php"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-wotoon-design.jpg" border="0" alt="Image-wotoon-design in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="665" /></a></p>
<p><a href="http://www.shaopan.net/index.html">Shaopan Film Studio</a></p>
<p><a href="http://www.shaopan.net/index.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-shaopan.jpg" alt="Image-shaopan in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="352" /></a></p>
<p><a href="http://www.energysource-cn.com/card/2009/">X’mas Tree Workshop</a><br />
A mini games website where you can create your own Christmas tree and send it as an e-card to your friends.</p>
<p><a href="http://www.energysource-cn.com/card/2009/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-xmastree.jpg" alt="Image-xmastree in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="331" /></a></p>
<p><a href="http://www.g-space.cn/main.html">The GF Space</a><br />
A design agency.</p>
<p><a href="http://www.g-space.cn/main.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-GFSpace.jpg" alt="Image-GFSpace in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="398" /></a></p>
<p><a href="http://www.hahadiy.com/">HAHA DIY</a><br />
A neat website for DIY home ornaments.</p>
<p><a href="http://www.hahadiy.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-HahaDIY.jpg" alt="Image-HahaDIY in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="326" /></a></p>
<p><a href="http://www.shizixiu.com.cn/">Yimei Cross Stitch</a></p>
<p><a href="http://www.shizixiu.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-yimei.jpg" alt="Image-yimei in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="304" /></a></p>
<p><a href="http://www.web081.com/tangsheng/web/">Happy Basket</a><br />
Designed for clicks.</p>
<p><a href="http://www.web081.com/tangsheng/web/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-happybasket.jpg" alt="Image-happybasket in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="884" /></a></p>
<p><a href="http://www.whcsj.com/main.html">WuHansoufang</a><br />
A pretty cool Flash website.</p>
<p><a href="http://www.whcsj.com/main.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-WuHansoufang.jpg" alt="Image-WuHansoufang in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="284" /></a></p>
<p><a href="http://www.nava.cn/nava/web/B2C/welcome.htm">Chateau Junding</a><br />
A domestic wine brand.</p>
<p><a href="http://www.nava.cn/nava/web/B2C/welcome.htm"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-chateau-junding.jpg" alt="Image-chateau-junding in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="318" /></a></p>
<p><a href="http://tiida.dongfeng-nissan.com.cn/">TIIDA</a><br />
Incorporates a family theme into its Flash design.</p>
<p><a href="http://tiida.dongfeng-nissan.com.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-TIDA.jpg" alt="Image-TIDA in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="327" /></a></p>
<p><a href="http://www.freewing.cn/">Magic Workshop</a><br />
A kids clothing company, using Flash-animated cartoons to capture the company’s culture.</p>
<p><a href="http://www.freewing.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-magicworkshop.jpg" alt="Image-magicworkshop in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="347" /></a></p>
<p><a href="http://www.jjying.cn/index.html">JJ Ying</a><br />
A neat personal portfolio website.</p>
<p><a href="http://www.jjying.cn/index.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-JJYing.jpg" alt="Image-JJYing in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="427" /></a></p>
<p><a href="http://www.orangebj.com/">Beijing Orange Advertising</a><br />
A creative showcase website.</p>
<p><a href="http://www.orangebj.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-orange.jpg" alt="Image-orange in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="346" /></a></p>
<p><a href="http://www1.poco.cn/topic/nescafe/">Nescafe</a><br />
Another website rich in both games and Flash.</p>
<p><a href="http://www1.poco.cn/topic/nescafe/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-nescafe.jpg" alt="Image-nescafe in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="325" /></a></p>
<p><a href="http://www.yeechino.cn/">Yee Chino</a><br />
A restaurant.</p>
<p><a href="http://www.yeechino.cn/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-YeeChino.jpg" alt="Image-YeeChino in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="369" /></a></p>
<p><a href="http://www.goldchino.com/">Gold Chino</a><br />
The sister restaurant of Yee Chino.</p>
<p><a href="http://www.goldchino.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-GoldChino.jpg" alt="Image-GoldChino in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="289" /></a></p>
<p><a href="http://www.89525.net/v1/">Guoguo Diary</a><br />
A fairly simple but creative personal website.</p>
<p><a href="http://www.89525.net/v1/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-guoguo.jpg" alt="Image-guoguo in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="342" /></a></p>
<p><a href="http://sh.vanke.com/shanghai/ranchosantafe/main.htm">Rancho Santa Fe</a><br />
A real-estate developer in Shanghai.</p>
<p><a href="http://sh.vanke.com/shanghai/ranchosantafe/main.htm"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-rancho-santa-fe.jpg" alt="Image-rancho-santa-fe in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="354" /></a></p>
<h3>Challenges, Opportunities, Trends</h3>
<h4>Challenges</h4>
<p>When it comes to challenges in the Internet industry, one of the frustrations mentioned by Whitecrow, Junchen, Rex and Lytous is government censorship. YouTube, Twitter, Facebook, and Flickr are all blocked in China because some of their content is considered “inappropriate.” And for compliance purposes, “Sina Microblogging has a team of humans whose job is to censor content, in addition to machine filtering,” says Whitecrow.</p>
<p>The international debate on how free and open the Internet should be is ongoing (see <a href="http://www.businessweek.com/innovate/NussbaumOnDesign/archives/2010/01/internet_freedo.html">Nussbaum</a>, 2010), and there is still no universal “policy” for the Internet. But without an open environment, China could be impeded from learning from and catching up to other countries.</p>
<p>Still, every coin has two sides. “It limits your freedom,” says Whitecrow Zhu, “but meanwhile, it has a positive effect on UI design and content presentation. There is less room for gimmicks. It forces you to concentrate on useful content and how to present your content.”</p>
<p>The other challenge mentioned by Junchen Wu and Rex Song was the lack of quality educational programs: “Vocational schools might teach you how to use Photoshop and Dreamweaver and how to code in HTML, CSS and JavaScript, but they may not teach you design thinking and the logic behind design. The World Wide Web is still young, and at higher-education institutions we have not seen any Information Architecture or User Experience Design degrees yet.”</p>
<p>Our interviews did point to the fact that designers in China have not yet taken full advantage of rigorous research methodologies. Take what Junchen Wu said about the status quo of Chinese Web design: “Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.”</p>
<p>And in response to the question, “How do you convince stakeholders that a design is right?” Rex Song brought up the notion of “<a href="http://en.wikipedia.org/wiki/Guanxi">guanxi</a>” and trust, and he thought the concept A/B and multivariate testing was “Western” and might yield a “low ROI.”</p>
<p>This is understandable on the one hand, because China has a long history of interpretive reasoning, be it Confucianism or Daoism. On the other hand, Chinese Web designers in general have a long way to go in using hard data to back up their design choices.</p>
<p>One might argue that the designer’s job is simply to design, the fact is that you need reasons to support your decisions that affect layout, color scheme, positioning of elements, user interaction and so on. Only “25% of the designers who relied on their personal opinion were right. A research study conducted by the <a href="http://www.useit.com/alertbox/guesses-data.html">Neilsen Norman Group</a> (2009) concluded that “you’d be better off tossing a coin than asking advice of these people.” This cannot, of course, be said of everyone, but it speaks to the importance of data.</p>
<h4>Opportunities and Trends</h4>
<p>We were inspired in all six interviews by the discussion of the opportunities and trends in Chinese Web design.</p>
<p><strong>Question: What trends do you foresee in Chinese Web design?</strong></p>
<p><em>Yu Guo:</em> <strong>E-commerce</strong>, I would say. Do you know Taobao? Some of my female colleagues have bought soy sauce, pickles and snacks that I’ve never heard of at Taobao. They love it. This is the market in China, and there is demand. I think every company should take advantage of it.</p>
<p>[<em>Authors' note</em>: Taobao is one of the largest shopping platforms in China to connect buyers and sellers of "baobei" (treasures). Out of curiosity, we searched for chocolate on Taobao and found those seasonal truffles that are sold around Thanksgiving and Christmas exclusively at Costco, the largest warehouse membership club in the US.]</p>
<p><a href="http://item.taobao.com/auction/item_detail-0db2-6a6550b38025a687387bcaf63d330343.jhtml?cm_cat=0"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-taobao-truffes.jpg" alt="Image-taobao-truffes in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="382" /></a></p>
<p><em>Whitecrow Zhu:</em> I think Web design in China is moving towards integrating more and more <strong>user-generated content</strong>. <a href="http://www.douban.com/">Douban</a>, an online book and movie club, is a good example. Like YouTube, the majority of the website’s content is user-generated, and it has been pretty successful. Douban existed before YouTube, by the way.</p>
<p><a href="http://www.douban.com/"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-douban.jpg" alt="Image-douban in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="386" /></a></p>
<p>Several years down the line, <strong>e-commerce</strong> in China will be in full bloom. E-commerce is not tied to any ideology other than simple economics and consumer interest. It has less of a chance of being censored, and people demand it.</p>
<p><em>Junchen Wu:</em> Creating more value for customers. Listen to what they say, look at what they do, do what they do and think what they think. My belief is that Chinese Web design is getting better and better, in an upward-spiral trend.</p>
<p><em>Lytous Zhou:</em> <strong>Focus on users and your service.</strong> I don’t think we’ll see anything unnecessarily extravagant, like crammed content and excessive visuals. Features, functionality, industry standards and meeting customer needs are the trends, I believe. And you’ve got to think outside of the box.</p>
<p><em>John Woo:</em> Functional, useful and usable. Making websites flashy, with lots of reds and greens, is absolutely unnecessary. Focus on user essentials and user needs. Though not a website, the Tianyu (KTouch) cell phone is very popular in China these days, and I bought six for my family: four with big font display and handwriting input for my parents and parents-in-law, one with 3x optical zoom and an 800 MP camera, and one that looks like lady’s powder case (see picture below). Tianyu was a “Shaizhai” manufacturer but is now a registered company with a pretty good share of China’s cell phone market. Why? It <strong>focuses on user essentials</strong> and basic needs. Websites are no different.</p>
<p>[<em>Authors' note</em>: "Shanzhai" literally means "villages in the mountain with stockade houses." The use of shanzhai became popular with the outstanding sales of shanzhai cell phones. Although shanzhai companies do not use branding as a marketing strategy, they are known for their flexibility in design to meet specific market needs. Shanzhai cell phones can be sold at prices much lower than normal cell phones. (<a href="http://en.wikipedia.org/wiki/Shanzhai">Wikipedia</a>, 2010)]</p>
<p><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/image-tianyu.jpg" alt="Image-tianyu in Showcase Of Web Design In China: From Imitation To Innovation" width="500" height="212" /></p>
<p><em>Rex Song:</em> In terms of online trends, we will develop our own Web design style using the backdrop of Chinese culture. Formatting-wise, we will be in line with the mainstream world, creating more <strong>user-centered designs</strong> and offering a better user experience.</p>
<h3>Wrapping Up</h3>
<p>The Web in China is young, and Chinese designers are playing catch-up. Despite the challenges, we see even more opportunities: smart people, a big market, increasing demand, flexibility and innovative and user-centered design thinking.</p>
<p>On many Chinese websites, we’ve already seen the “upward-spiral trend from imitation to innovation and user-centered design”. Innovation in China is a constant goal. It is being pushed in President Hu Jingtao’s State speech all the way down to classroom curricula. Says <a href="http://www.businessweek.com/innovate/NussbaumOnDesign/archives/2009/07/chinas_design_c.html">Bruce Nussbaum</a> (2009), “To its credit, China has made design a national priority and is pouring billions of yuan into design education.”</p>
<p>Through our interviews, we also collected some resources that our designers would like to share with Smashing Magazine readers (including those in languages other than Chinese).</p>
<h4>Events</h4>
<ul>
<li><a href="http://ucdchina.com/club/">UCDChina Book Club Meetups</a><br />
These monthly meet-ups occur on the third Sunday of every month in China’s eight major cities: Beijing, Shanghai, Nanjing, Shenzhen, Guangzhou, Hangzhou, Xiamen and Chengdu. They set a topic for each month, and club members can borrow the books from UCDChina library and return them at the next meet-up.</li>
<li><a href="http://ucdchina.com/club/2009/">UCDChina Annual Conference</a><br />
The first conference was held in Guangzhou in 2009. It’s free to attend.</li>
<li><a href="http://www.upachina.org/">UPA China Annual Conference</a><br />
The UPA China Chapter conference, different from UPA International. The conference is usually held on “Usability Day” every year.</li>
<li><a href="http://www.d2forum.org/">Designer and Developer Front End Technology Forum</a><br />
A biannual forum for designers and front-end developers in China.</li>
</ul>
<h4>Books, Blogs and Online Resources</h4>
<ul>
<li><a title="UI Evolution: HCI Design of Mobile Devices" href="http://lytous.ucdchina.com/?p=2103">UI Evolutionism</a><br />
About HCI design on mobile devices, written by local designer Lytous Zhou.</li>
<li><a href="http://www.amazon.com/Emotional-Design-Love-Everyday-Things/dp/0465051359">Emotional Design: Why We Love (or Hate) Everyday Things</a><br />
A classic must-read about design and emotion.</li>
<li><a href="http://www.amazon.com/Designing-Web-Interfaces-Principles-Interactions/dp/0596516258/ref=sr_1_1?ie=UTF8&amp;s=books&amp;qid=1265926562&amp;sr=8-1">Designing Web Interfaces: Principles and Patterns for Rich Interactions</a><br />
A book about design patterns for building Web interfaces with rich interaction.</li>
<li><a href="http://developer.yahoo.com/ypatterns/">Yahoo! Design Pattern Library</a><br />
This website was credited by our interviewees as “one of Yahoo’s most important contributions to the design industry.”</li>
<li><a href="http://www.douban.com/">Douban</a><br />
An online book and movie club, mostly user-generated comments and criticism.</li>
<li><a href="http://www.ifeng.com/">iFeng</a><br />
Phoenix News Media, a new portal.</li>
<li><a href="http://since1984.cn/blog/">Since 1984</a><br />
About design and beautiful things in the world.</li>
<li><a href="http://m.metroer.com/">Metroer</a><br />
About reading, including “design reading.”</li>
<li><a href="http://mooogu.cn/blog/">Mooogu</a><br />
About industrial and interior design. A good website to find inspiration.</li>
<li><a href="http://apple4.us/">Apple4us</a><br />
Community blog for tech demos, reviews and ideas.</li>
<li><a href="http://ffffound.com/">Ffffound!</a><br />
An image bookmarking website.</li>
<li><a href="http://www.notcot.org/">Notcot</a><br />
For your ideas, aesthetics and amusement.</li>
<li><a href="http://weheartit.com/">We Heart It</a><br />
A website that lets you create an online album from your favorite images and videos.</li>
<li><a href="http://core77.com/">Core77</a><br />
Design magazine and resource.</li>
<li><a href="http://www.engadget.com/">Engadget</a><br />
A Web magazine with obsessive daily coverage of everything new in gadgets and consumer electronics.</li>
<li><a href="http://thedesigninspiration.com/">The Design Inspiration</a><br />
Like its name suggests…</li>
<li><a href="http://www.dbcut.com/bbs/index.php">Dbcut</a><br />
A Korean design community portal.</li>
</ul>
<p><em>Original article from <a href="http://www.smashingmagazine.com/2010/03/15/showcase-of-web-design-in-china-from-imitation-to-innovation-and-user-centered-design/">smashing magazine</a>.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/showcase-of-web-design-in-china-from-imitation-to-innovation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>i-love-music website templates</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/i-love-music-website-templates/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/i-love-music-website-templates/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 07:55:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[music]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[templates]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=409</guid>
		<description><![CDATA[
			
				
			
		
After the beauty &#038; fashion, here come the i-love-music website templates.
Again, you can go to the site www.dreamtemplate.com for more.













The templates are from the site www.dreamtemplate.com.
]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fi-love-music-website-templates%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fi-love-music-website-templates%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>After the beauty &#038; fashion, here come the i-love-music website templates.<br />
Again, you can go to the site <a href="http://www.dpbolvw.net/click-3835713-10459980" target="_blank"><em>www.dreamtemplate.com</em></a> for more.</p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/421.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/421/20051202061233_1.jpg" alt=""/></a><br />
<span id="more-409"></span></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/988.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/988/20060802160537_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/3949.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/3949/20090210073025_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/563.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/563/20060317072021_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/3220.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/3220/20080628015837_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/2452.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/2452/20070507223137_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/3908.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/3908/20090210045601_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/617.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/617/20060317092245_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/2450.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/2450/20070507223018_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/2449.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/2449/20070507222927_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Flash_-_Music/detail/3660.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/63/3660/20081110211301_1.jpg" alt=""/></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Music/detail/81.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/11/81/20051114053111_1.jpg" alt=""/></a></p>
<p>The templates are from the site <a href="http://www.dpbolvw.net/click-3835713-10459980" target="_blank"><em>www.dreamtemplate.com</em></a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/i-love-music-website-templates/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Beauty &amp; Fashion website templates</title>
		<link>http://webdesigncollection.cn/wordpress/inspire/beauty-fashion-website-templates/</link>
		<comments>http://webdesigncollection.cn/wordpress/inspire/beauty-fashion-website-templates/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 07:01:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Inspire]]></category>
		<category><![CDATA[beauty & fashion]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[templates]]></category>
		<category><![CDATA[时尚]]></category>

		<guid isPermaLink="false">http://webdesigncollection.cn/wordpress/?p=398</guid>
		<description><![CDATA[
			
				
			
		
We can always get inspired from those beauty &#038; fashion website templates.
So, let&#8217;s take a look! Or, you can go to the site www.dreamtemplate.com for more templates.












The resources are from the site www.dreamtemplate.com.
]]></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%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fbeauty-fashion-website-templates%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwebdesigncollection.cn%2Fwordpress%2Finspire%2Fbeauty-fashion-website-templates%2F&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>We can always get inspired from those beauty &#038; fashion website templates.<br />
So, let&#8217;s take a look! Or, you can go to the site <a href="http://www.dpbolvw.net/click-3835713-10459980" target="_blank"><em>www.dreamtemplate.com</em></a> for more templates.</p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/3922.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/3922/20090210065553_1.jpg" border="0" alt="" width="490" height="525" /></a><br />
<span id="more-398"></span><br />
<a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/3299.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/3299/20080718230217_1.jpg" border="0" alt="" width="490" height="551" /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/209.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/209/20051118150105_1.jpg" border="0" alt="" width="490" height="361" /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/3340.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/3340/20080719001246_1.jpg" border="0" alt=""  /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/3884.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/3884/20081114073656_1.jpg" border="0" alt=""  /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/728.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/728/20060523201816_1.jpg" border="0" alt=""  /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/5473.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/5473/20090603221257_1.jpg" border="0" alt=""  /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/860.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/860/20060731134848_1.jpg" border="0" alt=""  /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/964.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/964/20060802152528_1.jpg" border="0" alt=""  /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/374.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/374/20051124014242_1.jpg" border="0" alt=""  /></a></p>
<p><a href="http://www.dreamtemplate.com/templates/Beauty_and_Fashion/detail/3216.html" target="_blank"><img src="http://www.dreamtemplate.com/product/images/8/3216/20080628015403_1.jpg" border="0" alt=""  /></a></p>
<p>The resources are from the site <a href="http://www.dpbolvw.net/click-3835713-10459980" target="_blank"><em>www.dreamtemplate.com</em></a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://webdesigncollection.cn/wordpress/inspire/beauty-fashion-website-templates/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
