<?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>Web Design Blog &#124; Web Design Fan &#124; Resources for Web Designers and Graphic Designers &#187; Design</title>
	<atom:link href="http://webdesignfan.com/tag/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://webdesignfan.com</link>
	<description>Web Design Fan is a blog focused on the beautiful and interesting world of web design and development. We post tutorials, review web tools and services, give away graphics, and deliver all of the information web designers need the most.</description>
	<lastBuildDate>Mon, 21 May 2012 11:00:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>30 Water-Based Website Designs</title>
		<link>http://webdesignfan.com/30-water-based-website-designs/</link>
		<comments>http://webdesignfan.com/30-water-based-website-designs/#comments</comments>
		<pubDate>Wed, 28 Mar 2012 18:20:36 +0000</pubDate>
		<dc:creator>Tara Hornor</dc:creator>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[water]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://webdesignfan.com/?p=9113</guid>
		<description><![CDATA[<p>Both web and print designs built around a water theme have become a popular trend in recent years, and such a theme can be found in everything from websites to business cards to designs for <a href="http://www.printplace.com/printing/postcard-printing.aspx">postcard printing</a>. Generally speaking, the color blue is associated with depth and stability and has a calming effect, which may be why blue is a popular color for  design. Many businesses incorporate some shade of blue into their brand colors, and water is a popular image for companies in many industries, not just the obvious ones. For example, some graphic designers, fashion companies, and even technology companies incorporate water into their websites.</p>
<p>In this collection, we focused on finding websites that were built around a water theme. These examples span the simple to complex references to water themes from splashing rivers to calm bodies of water. As you check these samples out, see how each affect you. Do they create a calming or exciting response? Which are your favorites?</p>]]></description>
			<content:encoded><![CDATA[<p>Both web and print designs built around a water theme have become a popular trend in recent years, and such a theme can be found in everything from websites to business cards to designs for <a href="http://www.printplace.com/printing/postcard-printing.aspx">postcard printing</a>. Generally speaking, the color blue is associated with depth and stability and has a calming effect, which may be why blue is a popular color for  design. Many businesses incorporate some shade of blue into their brand colors, and water is a popular image for companies in many industries, not just the obvious ones. For example, some graphic designers, fashion companies, and even technology companies incorporate water into their websites.</p>
<p>In this collection, we focused on finding websites that were built around a water theme. These examples span the simple to complex references to water themes from splashing rivers to calm bodies of water. As you check these samples out, see how each affect you. Do they create a calming or exciting response? Which are your favorites?</p>
<hr />
<h3><a target="_blank" href="http://www.belu.org/">Belu</a></h3>
<p>
  <img border=0 width=580 height=307 id="Picture 20" src="/tutimg/water/image001.jpg" title="30 Water Based Website Designs" alt="image001 " />
</p>
<hr />
<h3><a target="_blank" href="http://www.bustindownthedoor.com/flash.html">Bustin&#8217; Down the Door</a></h3>
<p>
<img border=0 width=580 height=306 id="Picture 2" src="/tutimg/water/image002.jpg" title="30 Water Based Website Designs" alt="image002 " />
</p>
<hr />
<h3><a target="_blank" href="http://www.pojeta.cz/">Thomas Projeta</a></h3>
<p><img border=0 width=580 height=290 id="Picture 3" src="/tutimg/water/image003.jpg" title="30 Water Based Website Designs" alt="image003 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.esintitasarim.com/">Esintitasarim</a></h3>
<p><img border=0 width=580 height=286 id="Picture 4" src="/tutimg/water/image004.jpg" title="30 Water Based Website Designs" alt="image004 " /> 
</p>
<hr />
<h3><a href="http://graphicmarks.files.wordpress.com/2009/08/kangen111.jpg">Graphic Marks</a></h3>
<p><img border=0 width=580 height=305 id="Picture 5" src="/tutimg/water/image005.jpg" title="30 Water Based Website Designs" alt="image005 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.enigmabg.com/en/">Enigma</a></h3>
<p><img border=0 width=580 height=309 id="Picture 6" src="/tutimg/water/image006.jpg" title="30 Water Based Website Designs" alt="image006 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.fijiwater.com/">Fiji Water</a></h3>
<p><img border=0 width=580 height=228 id="Picture 7" src="/tutimg/water/image007.jpg" title="30 Water Based Website Designs" alt="image007 " /> 
</p>
<hr />
<h3><a href="http://www.sandals.com/">Sandals</a></h3>
<p><img border=0 width=580 height=291 id="Picture 8" src="/tutimg/water/image008.jpg" title="30 Water Based Website Designs" alt="image008 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.wildoceanfilm.com/">Wild Ocean</a></h3>
<p><img border=0 width=580 height=308 id="Picture 9" src="/tutimg/water/image009.jpg" title="30 Water Based Website Designs" alt="image009 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.maunalani.com/">Mauna Lani</a></h3>
<p><img border=0 width=580 height=312 id="Picture 10" src="/tutimg/water/image010.jpg" title="30 Water Based Website Designs" alt="image010 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.hellenicholidays.com/">Hellenic Holiday</a>s</h3>
<p>
<img border=0 width=580 height=308 id="Picture 11" src="/tutimg/water/image011.jpg" title="30 Water Based Website Designs" alt="image011 " />
</p>
<hr />
<h3><a target="_blank" href="http://ocean.si.edu/">Ocean Portal</a></h3>
<p><img border=0 width=580 height=303 id="Picture 12" src="/tutimg/water/image012.jpg" title="30 Water Based Website Designs" alt="image012 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://ocean.nationalgeographic.com/ocean/">The Ocean</a></h3>
<p><img border=0 width=580 height=312 id="Picture 13" src="/tutimg/water/image013.jpg" title="30 Water Based Website Designs" alt="image013 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.wildwaterfun.com/">WildWater Kingdom</a></h3>
<p><img border=0 width=580 height=308 id="Picture 14" src="/tutimg/water/image014.jpg" title="30 Water Based Website Designs" alt="image014 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://soulsurfer.com/">Soul Surfer</a></h3>
<p><img border=0 width=580 height=309 id="Picture 15" src="/tutimg/water/image015.jpg" title="30 Water Based Website Designs" alt="image015 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.waterontheweb.org/">Water on the Web</a></h3>
<p><img border=0 width=580 height=500 id="Picture 16" src="/tutimg/water/image016.jpg" title="30 Water Based Website Designs" alt="image016 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.waterbottle.bz/">Water Bottle</a></h3>
<p><img border=0 width=580 height=348 id="Picture 17" src="/tutimg/water/image017.jpg" title="30 Water Based Website Designs" alt="image017 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.dasani.com/#/about">Dasani</a></h3>
<p><img border=0 width=580 height=368 id="Picture 18" src="/tutimg/water/image018.jpg" title="30 Water Based Website Designs" alt="image018 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.aquafina.com/">Aquafina</a></h3>
<p><img border=0 width=580 height=349 id="Picture 19" src="/tutimg/water/image019.jpg" title="30 Water Based Website Designs" alt="image019 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://appsprings.com/">Appalachian Springs</a></h3>
<p><img border=0 width=580 height=378 id="Picture 21" src="/tutimg/water/image020.jpg" title="30 Water Based Website Designs" alt="image020 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.liveh2o.org/">Live H2O</a></h3>
<p>
<img border=0 width=580 height=308 id="Picture 22" src="/tutimg/water/image021.jpg" title="30 Water Based Website Designs" alt="image021 " />
</p>
<hr />
<h3><a target="_blank" href="http://www.blackwatermovie.com/">Black Water</a></h3>
<p><img border=0 width=580 height=343 id="Picture 23" src="/tutimg/water/image022.jpg" title="30 Water Based Website Designs" alt="image022 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://trailers.apple.com/trailers/disney/oceans/">iTunes Movie Trailers</a></h3>
<p><img border=0 width=580 height=312 id="Picture 24" src="/tutimg/water/image023.jpg" title="30 Water Based Website Designs" alt="image023 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.mos.org/oceans/">Museum of Science</a></h3>
<p><img border=0 width=580 height=409 id="Picture 25" src="/tutimg/water/image024.jpg" title="30 Water Based Website Designs" alt="image024 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.flaquarium.org/">Florida Aquarium</a></h3>
<p><img border=0 width=580 height=309 id="Picture 26" src="/tutimg/water/image025.jpg" title="30 Water Based Website Designs" alt="image025 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.aqua.org/">National Aquarium</a></h3>
<h3><img border=0 width=580 height=434 id="Picture 27" src="/tutimg/water/image026.jpg" title="30 Water Based Website Designs" alt="image026 " /> </p>
<hr />
</h3>
<h3><a href="http://www.okaquarium.org/">Oklahoma Aquarium</a></h3>
<p><img border=0 width=580 height=299 id="Picture 28" src="/tutimg/water/image027.jpg" title="30 Water Based Website Designs" alt="image027 " />
</p>
<hr />
<h3><a target="_blank" href="http://www.seattleaquarium.org/">Seattle Aquarium</a></h3>
<p><img border=0 width=580 height=307 id="Picture 29" src="/tutimg/water/image028.jpg" title="30 Water Based Website Designs" alt="image028 " /> 
</p>
<hr />
<h3><a target="_blank" href="http://www.aquariumrestaurants.com/">Aquarium</a></h3>
<p><img border=0 width=580 height=309 id="Picture 30" src="/tutimg/water/image029.jpg" title="30 Water Based Website Designs" alt="image029 " /></p>
<hr />
<h3><a target="_blank" href="http://seewinter.com/">Clearwater Marine Aquarium</a> </h3>
<p><img border=0 width=580 height=310 id="Picture 31" src="/tutimg/water/image030.jpg" title="30 Water Based Website Designs" alt="image030 " /><br />
   
</p>
<div class="shr-publisher-9113"></div>
]]></content:encoded>
			<wfw:commentRss>http://webdesignfan.com/30-water-based-website-designs/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Helvetica Inspiration: 10 Best Videos</title>
		<link>http://webdesignfan.com/helvetica-inspiration-10-best-videos/</link>
		<comments>http://webdesignfan.com/helvetica-inspiration-10-best-videos/#comments</comments>
		<pubDate>Tue, 06 Dec 2011 14:30:11 +0000</pubDate>
		<dc:creator>Sonia Mansfield</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[helvetica]]></category>
		<category><![CDATA[Typography]]></category>

		<guid isPermaLink="false">http://webdesignfan.com/?p=9000</guid>
		<description><![CDATA[<p>When thinking of Helvetica, it is fair to assume that many of your minds will go immediately to printed medium. Posters, fliers and calendars all frequently use the font for their main design, usually to use an attractive typeface that isn't as overabused as the old standard, Arial. </p>
<p>But there are plenty of places where typography lovers can apply Helvetica. In this case, we are going to look at some of the small movies that have been made featuring the font prominently, sometimes as the main focus.</p>]]></description>
			<content:encoded><![CDATA[<p>When thinking of Helvetica, it is fair to assume that many of your minds will go immediately to printed medium. Posters, fliers and calendars all frequently use the font for their main design, usually to use an attractive typeface that isn&#8217;t as overabused as the old standard, Arial. </p>
<p>But there are plenty of places where typography lovers can apply Helvetica. In this case, we are going to look at some of the small movies that have been made featuring the font prominently, sometimes as the main focus.</p>
<h2>1. <a href="http://www.youtube.com/watch?v=TTUGhsNk6bk">Helvetica the Movie</a></h2>
<p><object width="550" height="403"><param name="movie" value="http://www.youtube.com/v/TTUGhsNk6bk?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/TTUGhsNk6bk?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="550" height="403" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>This film was made as a project to wish the font a happy 50th birthday. What I found most interesting was that the stop-motion format that shows people cutting and taking slices of cake made in the shape of the typeface reminded me a lot of those old scenes from “Sesame Street.” Even the new episodes use the ’90s retro scenes that are nearly identical. That makes me wonder if the maker intended that. If so, they did it well. </p>
<h2>2. <a href="http://www.youtube.com/watch?v=R1ZBknDPlu4">Helvetica in Motion</a></h2>
<p><object width="550" height="309"><param name="movie" value="http://www.youtube.com/v/R1ZBknDPlu4?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/R1ZBknDPlu4?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="550" height="309" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>Mike Parker is well known for his understanding of typography and general design methods, which is why he is one of the most quoted people in the industry. Evan Shuster used a clip from one of his interviews as a voice-over for this interesting <a href="http://speckyboy.com/2011/03/13/kinetic-typography-design-in-motion/">kinetic typography video</a> that shows the words soaring in Helvetica as the font is explained. It is beautifully done and shows that you really can keep it simple and still get great results. </p>
<h2>3. <a href="http://www.youtube.com/watch?v=Mn5EvCIvt-I">Typography Animation</a></h2>
<p><object width="550" height="403"><param name="movie" value="http://www.youtube.com/v/Mn5EvCIvt-I?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Mn5EvCIvt-I?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="550" height="403" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>This is a short history lesson for anyone who is interested in the life of Helvetica creator Max Miedinger and the making of this popular typeface. It presents all the facts in fast-moving kinetic typography, which is great, and there is a lot to see. But it moves a little fast, so honestly, it could have benefited from finding a smoother pace to allow the viewer to more easily read without rushing. </p>
<h2>4. <a href="http://vimeo.com/3193518">Design Sustainability</a></h2>
<p><object width="550" height="367"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3193518&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=3193518&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="367"></embed></object></p>
<p>While it has nothing to do with Helvetica, this typography video uses that font. The message is a change is needed in design culture as well as priorities that emphasize sustainability. The ideas are connected through a single video made by TEDify.org. It is very interesting to hear different designers from all over the world speaking about the same need for a shift in focus. </p>
<h2>5. <a href="http://vimeo.com/9634500">Anatomy of the Typeface</a></h2>
<p><object width="550" height="364"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9634500&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=9634500&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="364"></embed></object></p>
<p>The creator of this piece was a student whose assignment was to marry the concept of the video along with the chosen font, in this case, Helvetica. He goes through an informative rundown of the typeface, with a breakdown of the “anatomy.” It is short, but well made. </p>
<h2>6. <a href="http://vimeo.com/10086454">Typographic Motion Design</a></h2>
<p><object width="550" height="309"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10086454&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10086454&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="309"></embed></object></p>
<p>This is sadly short, and I would have liked to see more, given how good the 10 seconds of the test are. It takes a small audio clip that explains the change in <a href="http://www.graphicmania.net/a-guide-to-select-a-font-family-for-any-project/">font</a>, which is described as more “machined,” that led to Helvetica. It gives a nice representation of moving cogs along with this idea. </p>
<h2>7. <a href="http://vimeo.com/1113673">Helvetica in HD</a></h2>
<p><object width="550" height="309"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=1113673&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=1113673&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="309"></embed></object></p>
<p>Asked to make an animation opening for a hypothetical film based on a typeface, this university project made a fantastic video clip using <a href="http://www.chethstudios.net/2011/05/motion-typography-demystified-four-types.html">motion typography</a>. It reminds me a lot of those ’60s spy or secret agent movies, and it uses the names of the artists involved in the creation and evolution of Helvetica as the cast. This video is very clever, well made and funny. </p>
<h2>8. <a href="http://vimeo.com/4232821">Kinetic Typography</a></h2>
<p><object width="550" height="309"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4232821&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4232821&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="309"></embed></object></p>
<p>This is a simple kinetic typography clip that uses voice-overs from the design informational film “<a href="http://blog.psprint.com/printing/a-glimpse-of-helvetica/">Helvetica</a>.” There isn&#8217;t anything special here, but the basic concept is solid. They also use some gorgeous effects that really make the overall result, such as the shadows under the lettering as it moves across screen. The quotes used are also excellent.</p>
<h2>9. <a href="http://vimeo.com/10321691">Bob Dylan</a></h2>
<p><object width="550" height="413"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10321691&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10321691&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="413"></embed></object></p>
<p>Bob Dylan is one of the most famous voices of the past, and his songs are still as relevant today as they once were – perhaps more so. Using Dylan’s “Subterranean Homesick Blues,” the creator of this piece used Helvetica to create a simple motion typography video of the lyrics. He manages to get the best parts of the song, which is an added bonus.</p>
<h2>10. <a href="http://vimeo.com/1958903">Helvetica</a></h2>
<p><object width="550" height="415"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=1958903&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=1958903&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="550" height="415"></embed></object></p>
<p>A gentle piano solo, drifting Helvetica font with 3-D effects and soothing motions &#8230; don&#8217;t watch this while working, or you will find yourself falling asleep. It is extremely relaxing and quite pretty, even if it is fairly basic and not a whole lot is shown. </p>
<p>What are some of your favorite Helvetica videos? Let us know in the comments. </p>
<div class="shr-publisher-9000"></div>
]]></content:encoded>
			<wfw:commentRss>http://webdesignfan.com/helvetica-inspiration-10-best-videos/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Must See: Famous Logos and Icons in Pure CSS</title>
		<link>http://webdesignfan.com/must-see-famous-logos-and-icons-in-pure-css/</link>
		<comments>http://webdesignfan.com/must-see-famous-logos-and-icons-in-pure-css/#comments</comments>
		<pubDate>Fri, 28 Oct 2011 16:42:19 +0000</pubDate>
		<dc:creator>Zachary Brown</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[logos]]></category>

		<guid isPermaLink="false">http://webdesignfan.com/?p=8748</guid>
		<description><![CDATA[There are some incredible things happening with CSS these days, and I think I found my favorite. 

Cool things are happening over at <a href="http://www.ecsspert.com/">ECSSpert</a>. So far they have reproduced pure CSS logos for <a href="http://www.ecsspert.com/twitter.php">Twitter</a>, <a href="http://www.ecsspert.com/adidas-originals.php">Adidas</a>, <a href="http://www.ecsspert.com/adobe.php">Adobe</a>, an awesome animated <a href="http://www.ecsspert.com/atari.php">Atari</a>, and well... <a href="http://www.ecsspert.com/">just go look for yourselves</a>. More after the jump.]]></description>
			<content:encoded><![CDATA[<p>There are some incredible things happening with CSS these days, and I think I found my favorite. Check it out:</p>
<p><img class="alignnone size-full wp-image-8757" title="pepsi" src="http://webdesignfan.com/wp-content/uploads/2011/10/pepsi.png" alt="pepsi " width="354" height="284" /></p>
<p>And this one:</p>
<p><img class="alignnone size-full wp-image-8758" title="windows" src="http://webdesignfan.com/wp-content/uploads/2011/10/windows.png" alt="windows " width="423" height="264" /></p>
<p>These awesome logos (along with tons of others. See: the post thumbnail) are being created in pure CSS over at <a href="http://www.ecsspert.com/">ECSSpert</a>. So far there are designs for <a href="http://www.ecsspert.com/twitter.php">Twitter</a>, <a href="http://www.ecsspert.com/adidas-originals.php">Adidas</a>, <a href="http://www.ecsspert.com/adobe.php">Adobe</a>, an awesome animated <a href="http://www.ecsspert.com/atari.php">Atari</a>, and well&#8230; <a href="http://www.ecsspert.com/">just go look for yourselves</a>.</p>
<p>Speaking of increible CSS achievements, check out these 3 links to be in even further awe:</p>
<p><a href="http://graphicpeel.com/cssiosicons">Apple iOS Icons in CSS</a></p>
<p><a href="http://lab.jeffbatterton.com/iphone-css3/">iPhone in CSS</a></p>
<p><a href="http://desandro.com/articles/opera-logo-css/">Opera Logo in CSS</a></p>
<p>Note: you might want to view these using Safari or Chrome, though Firefox is OK, too. Don&#8217;t even bother if you are using IE. Sorry, IE peeps (though you were probably just going to go look at the Windows icon and leave, anyway).</p>
<h3>Got any others?</h3>
<p>Post them in the comments so everyone can see. No use in keeping incredible stuff like this under wraps!
<div class="shr-publisher-8748"></div>
]]></content:encoded>
			<wfw:commentRss>http://webdesignfan.com/must-see-famous-logos-and-icons-in-pure-css/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>14 Gorgeous Google+ Icons</title>
		<link>http://webdesignfan.com/14-gorgeous-google-icons/</link>
		<comments>http://webdesignfan.com/14-gorgeous-google-icons/#comments</comments>
		<pubDate>Mon, 18 Jul 2011 16:57:55 +0000</pubDate>
		<dc:creator>Zachary Brown</dc:creator>
				<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[google plus]]></category>
		<category><![CDATA[Icons]]></category>

		<guid isPermaLink="false">http://webdesignfan.com/?p=8219</guid>
		<description><![CDATA[With the release of Google+ this month, designers everywhere are getting their perspectives of the logo on the canvas. Here are 14 gorgeous examples of custom Google+ icons.]]></description>
			<content:encoded><![CDATA[<p>With the release of Google+ this month, designers everywhere are getting their perspectives of the logo on the canvas. Here are 14 gorgeous examples of custom Google+ icons.</p>
<h3>1. <a href="http://dribbble.com/shots/208968-Google-Plus" target="_blank">Matthew Martin</a></h3>
<p><a href="http://dribbble.com/shots/208968-Google-Plus" target="_blank"><img class="alignnone size-full wp-image-8279" title="mattmartin" src="http://webdesignfan.com/wp-content/uploads/2011/07/mattmartin.png" alt="mattmartin " width="400" height="300" /></a></p>
<h3>2. <a href="http://dribbble.com/shots/209773-Google-Plus" target="_blank">Housseynou Fall</a></h3>
<p><a href="http://dribbble.com/shots/209773-Google-Plus" target="_blank"><img class="alignnone size-full wp-image-8277" title="housseynou" src="http://webdesignfan.com/wp-content/uploads/2011/07/housseynou.png" alt="housseynou " width="400" height="300" /></a></p>
<h3>3. <a href="http://dribbble.com/shots/210722-Google-Icon" target="_blank">Alvin Thong</a></h3>
<p><a href="http://dribbble.com/shots/210722-Google-Icon" target="_blank"><img class="alignnone size-full wp-image-8273" title="alvin" src="http://webdesignfan.com/wp-content/uploads/2011/07/alvin.png" alt="alvin " width="400" height="300" /></a></p>
<h3>4. <a href="http://dribbble.com/shots/211312-Google-" target="_blank">Alex Patrascu</a></h3>
<h3><a href="http://dribbble.com/shots/211312-Google-" target="_blank"><img class="alignnone size-full wp-image-8272" title="alex" src="http://webdesignfan.com/wp-content/uploads/2011/07/alex.png" alt="alex " width="400" height="300" /></a></h3>
<h3>5. <a href="http://dribbble.com/shots/205099-Google-" target="_blank">Adrien Rochet</a></h3>
<h3><a href="http://dribbble.com/shots/205099-Google-" target="_blank"><img class="alignnone size-full wp-image-8282" title="rochet" src="http://webdesignfan.com/wp-content/uploads/2011/07/rochet.png" alt="rochet " width="400" height="300" /></a></h3>
<h3>6. <a href="http://dribbble.com/shots/210920-Google-Plus" target="_blank">Jian Wei</a></h3>
<h3><a href="http://dribbble.com/shots/210920-Google-Plus" target="_blank"><img class="alignnone size-full wp-image-8278" title="jian" src="http://webdesignfan.com/wp-content/uploads/2011/07/jian.png" alt="jian " width="400" height="300" /></a></h3>
<h3>7. <a href="http://dribbble.com/shots/215158-Google-1" target="_blank">Jack Rugile</a></h3>
<h3><a href="http://dribbble.com/shots/215158-Google-1" target="_blank"><img class="alignnone size-full wp-image-8283" title="rugile" src="http://webdesignfan.com/wp-content/uploads/2011/07/rugile.jpg" alt="rugile " width="400" height="300" /></a></h3>
<h3>8. <a href="http://dribbble.com/shots/211624-Google-Plus-1" target="_blank">Matt Gentile</a></h3>
<h3><a href="http://dribbble.com/shots/211624-Google-Plus-1" target="_blank"><img class="alignnone size-full wp-image-8276" title="gentile" src="http://webdesignfan.com/wp-content/uploads/2011/07/gentile.jpg" alt="gentile " width="400" height="300" /></a></h3>
<h3>9. <a href="http://dribbble.com/shots/208418-Google-iOS-Icon" target="_blank">Steffi Rakotozafy</a></h3>
<h3><a href="http://dribbble.com/shots/208418-Google-iOS-Icon" target="_blank"><img class="alignnone size-full wp-image-8281" title="rakoto" src="http://webdesignfan.com/wp-content/uploads/2011/07/rakoto.jpg" alt="rakoto " width="400" height="300" /></a></h3>
<h3>10. <a href="http://boldperspective.com/2011/free-google-plus-icon-vector/" target="_blank">Sean McCabe</a></h3>
<h3><a href="http://boldperspective.com/2011/free-google-plus-icon-vector/" target="_blank"><img class="alignnone size-medium wp-image-8274" title="boldpersp" src="http://webdesignfan.com/wp-content/uploads/2011/07/boldpersp-300x106.png" alt="boldpersp 300x106 " width="300" height="106" /></a></h3>
<h3>11. <a href="http://dribbble.com/shots/209049-Google-Icon" target="_blank">Sandeep Prabhakaran</a></h3>
<p><a href="http://dribbble.com/shots/209049-Google-Icon" target="_blank"><img class="alignnone size-full wp-image-8284" title="sandeep" src="http://webdesignfan.com/wp-content/uploads/2011/07/sandeep.png" alt="sandeep " width="400" height="300" /></a></p>
<h3>12. <a href="http://365psd.com/day/2-110/" target="_blank">Taiyab Raja</a></h3>
<h3><a href="http://365psd.com/day/2-110/" target="_blank"><img class="alignnone size-medium wp-image-8280" title="raja" src="http://webdesignfan.com/wp-content/uploads/2011/07/raja-300x93.jpg" alt="raja 300x93 " width="300" height="93" /></a></h3>
<h3>13. <a href="http://lovedsgn.com/post/7052" target="_blank">Hager Sebastian</a></h3>
<h3><a href="http://lovedsgn.com/post/7052" target="_blank"><img class="alignnone size-medium wp-image-8285" title="sebatian" src="http://webdesignfan.com/wp-content/uploads/2011/07/sebatian-300x199.png" alt="sebatian 300x199 " width="300" height="199" /></a></h3>
<h3>14. <a href="http://psd.fanextra.com/tutorials/design-a-sleek-google-icon-plus-free-google-icon-set-download/" target="_blank">Google + Icon Tutorial by FanExtra</a></h3>
<p><a href="http://psd.fanextra.com/tutorials/design-a-sleek-google-icon-plus-free-google-icon-set-download/" target="_blank"><img class="alignnone size-medium wp-image-8275" title="fanextra" src="http://webdesignfan.com/wp-content/uploads/2011/07/fanextra-300x200.jpg" alt="fanextra 300x200 " width="300" height="200" /></a></p>
<p>We offer all kinds of certification exams including <a href="http://www.thetestking.org/exam/MB6-285.html">MB6-285</a>. Our guaranteed <a href="http://www.mytestking.us/exam/MB7-839.html">MB7-839</a> exams are freely accessible all around the world of <a href="http://www.pass4sures.biz/MB5-198-testking.html">MB5-198</a> and <a href="http://www.mypass4sure.info/70-521-dumps.html">70-521</a>.
<div class="shr-publisher-8219"></div>
]]></content:encoded>
			<wfw:commentRss>http://webdesignfan.com/14-gorgeous-google-icons/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Modern Handwriting Fonts Roundup</title>
		<link>http://webdesignfan.com/modern-handwriting-fonts-roundup/</link>
		<comments>http://webdesignfan.com/modern-handwriting-fonts-roundup/#comments</comments>
		<pubDate>Fri, 15 Jul 2011 15:40:46 +0000</pubDate>
		<dc:creator>Sonia Mansfield</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[Fonts]]></category>
		<category><![CDATA[handwriting]]></category>
		<category><![CDATA[Modern]]></category>
		<category><![CDATA[roundup]]></category>
		<category><![CDATA[Typography]]></category>

		<guid isPermaLink="false">http://webdesignfan.com/?p=8265</guid>
		<description><![CDATA[A lot of people like the look of a handwriting font because it can make their website look more casual and inviting, and their documents unique - especially when crafting things like stationary or gift cards. There are hundreds of handwriting script typefaces available - many for free on the Internet - but there's a fine line between a font that looks like handwriting and one that is legible enough to read.]]></description>
			<content:encoded><![CDATA[<p>A lot of people like the look of a handwriting font because it can   make their website look more casual and inviting, and their documents   unique &#8211; especially when crafting things like stationary or gift cards.   There are hundreds of handwriting script typefaces available &#8211; many for   free on the Internet &#8211; but there&#8217;s a fine line between a font that   looks like handwriting and one that is legible enough to read.</p>
<p>If you&#8217;re thinking of using a handwriting font, take into account   that many people have difficulty reading even the clearest of cursive   handwriting; there&#8217;s just something about the connected letters that   causes them problems. Try to help by keeping the contrast simple and   clean with a black font on white background, making your font choice as   easy as possible to read.</p>
<p>Here are some of the best print and cursive handwriting fonts that you can try &#8211; and a couple of special styles.</p>
<h2>Print Handwriting</h2>
<p><img src="http://i133.photobucket.com/albums/q62/anya678/handwriting-fonts-03.jpg" alt="Print Handwriting" width="500" height="219" title="Modern Handwriting Fonts Roundup" /></p>
<ol>
<li><a href="http://www.fontshop.com/fontlist/families/mvb_calliope/">MVB  Calliope</a> &#8211; Available in three weights that  appear thin, bold and very bold, this is an interesting, separated font. It  looks a little messy, but in a rather natural way. It looks rather friendly and  casual.</li>
<li><a href="http://desktoppub.about.com/od/lessonplans/ig/Free-Print---Cursive-Fonts/Jarman.htm">Jarman</a> &#8211; I like this one because it is a  little unusual, but not too strange. The letters are slightly slanted and look  to have been traced. But there are these little ears on certain letters that  give them more of a flourish.</li>
<li><a href="http://desktoppub.about.com/od/lessonplans/ig/Free-Print---Cursive-Fonts/Penmanship-Print.htm">Penmanship  Print</a> &#8211; This one is great for teachers or websites teaching language skills. It comes  with its own rules, such as in a notebook, and the letters are incredible  proper and straight. But they still look to have been handwritten by someone  attempting to show perfect penmanship.</li>
<li><a href="http://www.yourownfont.com/shop/index.php?main_page=product_info&amp;cPath=65&amp;products_id=384">Jolly</a> &#8211; This one costs $3.99, but I think  it is worth the price. It has a rather fun touch and really looks like somoene  scribbled down the note. One thing I found interesting, however, was a sample  using it to tell a macabre story. It worked quite well, proving that just  because it looks &#8216;jolly&#8217; at first glance, it can be applied to other purposes  as well.</li>
<li><a href="http://www.fontshop.com/fonts/singles/linotype/venture_com_script/">Venture</a> &#8211; This one has a bit of a fancy touch to it, as the writing  has an extra flow. But it is still very easy to read and presented in a large,  bold font that is pleasing to the eye. I have seen this one &#8211; and similar ones  &#8211; used a lot lately in ads.</li>
<li><a href="http://www.fontshop.com/fonts/downloads/sherwood/p22_kaz_pro_set/">P22 Kaz</a> &#8211; This font makes me laugh because it looks a lot like my  own handwriting. A little odd, it is still clear and has a little something  that is more unique than many of the others. Or maybe that is just a bias,  since I use many of the same strange flourishes in my own writing.</li>
</ol>
<h2>Cursive Handwriting</h2>
<p><img src="http://i133.photobucket.com/albums/q62/anya678/handwriting-fonts-01.jpg" alt="Cursive Handwriting" width="500" height="257" title="Modern Handwriting Fonts Roundup" /></p>
<ul>
<li><a href="http://www.fontshop.com/fonts/singles/mvb_fonts/mvb_sacre_bleu_ot/">MVB Sacre  Bleu</a> &#8211; One of the biggest issues with  using cursive in design is &#8220;letter-form repetition.&#8221; This is when you use  double letters like &#8216;ee&#8217; and they sort of meld together. This isn&#8217;t so much of  an problem in calligraphy, but it can be a designer&#8217;s nightmare. MVB Sacre Bleu  gets around this by providing several alternate letter types in their font  style to break this up. The end result is much cleaner and less boring.</li>
<li><a href="http://www.fontshop.com/fonts/downloads/fontfont/ff_market_ot/">FF Market</a> &#8211; You know that full look of lettering written with a felt  tip marker? This one has that, which is a look I love. The font itself has an  odd mix between traditional cursive and letters that look more broken away. The  up side to this is it looks more genuinely handwritten, such as in a signature.</li>
<li><a href="http://www.fontspace.com/billy-argel/blessed-day">Blessed Day</a> &#8211; I love this one. The whole thing looks a lot more formal,  like someone who has carefully traced a more advanced form of calligraphy. But  it still has the hand done look to it, and seems as though it would be better  suited for a celebration message or announcement. Very pretty.</li>
</ul>
<h2>Specials</h2>
<p><img src="http://i133.photobucket.com/albums/q62/anya678/handwriting-fonts-02.jpg" alt="Specials" width="500" height="243" title="Modern Handwriting Fonts Roundup" /></p>
<ul>
<li>
<ul>
<li><a href="http://new.myfonts.com/fonts/canadatype/lipstick/">Lipstick</a> &#8211; This font has a fun and flirty air that some of you will  just love. The name is exactly what it is&#8230;a font that looks like it was  written in bright red lipstick. The lettering is in a clear print, and there  are little symbols like hearts and kiss marks also available. I downloaded this  one for a note to the hubby recently; I hate cleaning up real lipstick.</li>
<li><a href="http://new.myfonts.com/fonts/fontbureau/avalon/">Avalon</a> &#8211; As a prisoner in Egypt, Austrian artist Fredrich  Neugebauer fought to keep his mind and art by creating a calligraphy style that  is still recognizable today. When he ran out of ink he used toothpaste,  refusing to stop. His forgeous style has been adapted here. The sweeping  expanse and careful precision are gorgeous.</li>
<li><a href="http://www.fontspace.com/blambot/youmurderer-bb">YouMurdererBB</a> &#8211; A nice, creepy font for you, this one uses an  interesting, faded block letter style that has a genuinely dark tone. The best  part to me are the symbols, which includes little black handprints that look a  lot like they were made from blood rather than ink.</li>
<li><a href="http://cooltext.com/Download-Font-Crazy+Killer">CrazyKiller</a> &#8211; The one above not enough for you? This one looks like a  genuinely psychopathic mind scribbled a note for those who found his victims.  The letters look practically carved into paper with a pen or pencil, and they  are very jagged and angry.</li>
</ul>
<p>If you just can&#8217;t find a font that you like, then Handfont.com will help you create your own. Simply fill out the provided form with   your font style, scan it, upload it to the site and download a full font   version.</p>
<p>The ability to choose an interesting and little-known font allows the   freedom to create a unique website and printed materials. Some people   go wild like kids in a candy store, putting several different   handwriting fonts on one site, which should be avoided.</p>
<p>Keep in mind that, above all else, the font you choose must be   readable or people won&#8217;t stay around long enough to get your message.   Some handwriting fonts can be just as difficult to read as real   handwriting, so choose wisely and keep your visitor&#8217;s visual comfort   in mind.</li>
</ul>
<p>Make your success certain by using our incredible <a href="http://www.thetestking.org/exam/MB6-818.html">MB6-818</a> study packages and <a href="http://www.thepass4sure.info/MB6-291-test.html">MB6-291</a>. We are providing the best <a href="http://www.pass4sures.biz/MB5-854-testking.html">MB5-854</a> training solutions for preparations. You can also get <a href="http://www.mypass4sure.info/70-542-dumps.html">70-542</a> from our website.
<div class="shr-publisher-8265"></div>
]]></content:encoded>
			<wfw:commentRss>http://webdesignfan.com/modern-handwriting-fonts-roundup/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->
