<?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>WebUrbanist  unusual web design | Web Urbanist</title>
	<atom:link href="https://weburbanist.com/tags/unusual-web-design/feed/" rel="self" type="application/rss+xml" />
	<link>https://weburbanist.com</link>
	<description>Urban Art, Architecture, Design &#38; Built Environments</description>
	<lastBuildDate>Thu, 15 Jan 2026 02:15:38 +0000</lastBuildDate>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<language></language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://weburbanist.com/wp-content/uploads/2016/05/cropped-urbanisticon-32x32.png</url>
	<title>  unusual web design | Web Urbanist</title>
	<link>https://weburbanist.com</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">74409875</site>	
	<item>
        <title>Workflow: 14 Artistic Examples of Watercolor in Web Design</title>
        <link>https://weburbanist.com/2010/07/26/14-artistic-examples-of-watercolor-in-web-design/</link>
		<comments>https://weburbanist.com/2010/07/26/14-artistic-examples-of-watercolor-in-web-design/#respond</comments>
		<pubDate>Mon, 26 Jul 2010 17:00:42 +0000</pubDate>
		<dc:creator>SA Rogers</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Graphics & Branding]]></category>
		<category><![CDATA[artistic web design]]></category>
		<category><![CDATA[arts]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[painting]]></category>
		<category><![CDATA[painting web design]]></category>
		<category><![CDATA[unusual web design]]></category>
		<category><![CDATA[watercolor]]></category>
		<category><![CDATA[watercolor web design]]></category>
		<category><![CDATA[watercolor websites]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[Websites]]></category>

		<guid isPermaLink="false">https://weburbanist.com/?p=22783</guid>
		<description><![CDATA[Watercolor infuses a carefree sense of the organic to what can otherwise be cold and impersonal websites, whether used as an accent or for the entire design.]]></description>
			<content:encoded><![CDATA[
    <!-- custom per item content begin -->
    
    [ By <a href='http://weburbanist.com/steph/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-tags-unusual-web-design&utm_content=unknown&utm_term=feed-author'>SA Rogers</a> in <a href="https://weburbanist.com/category/design/" rel="category tag">Design</a> &amp; <a href="https://weburbanist.com/category/design/graphics-branding/" rel="category tag">Graphics &amp; Branding</a>. ]

    <p><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-22784" title="watercolor-websites-main" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-main.jpg" width="468" height="400" /><br />
<!--wsa:gooold-->Nothing softens the harshness of the world wide web like a little watercolor. Whether used as a sheer splash of color on an otherwise minimalist website or as the basis of an entire web design, watercolor can be understated or bold, ethereal or grungy. These 14 websites are a showcase of artistic flair, with watercolor effects created both digitally and the old-fashioned way.<br />
<span id="more-22783"></span></p>
<h4>Electric Pulp</h4>
<p><img decoding="async" class="alignnone size-full wp-image-22785" title="watercolor-websites-electric-pulp" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-electric-pulp.jpg" width="468" height="288" /></p>
<p>This <a href="http://electricpulp.com/">web design firm</a> advertises its services well with an eye-catching, visually dynamic and organic wood background and just a hint of watercolor effect at the very top and in a few details further down the page. A great example of beautiful balance in watercolor web design.</p>
<h4>Agami Creative</h4>
<p><img decoding="async" class="alignnone size-full wp-image-22786" title="watercolor-website-agami" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-website-agami.jpg" width="468" height="308" /></p>
<p>Appropriately enough for a firm with &#8216;creative&#8217; in its very name, <a href="http://www.agamicreative.com">this website</a> is bold and colorful, using watercolor as one of the main visual elements on the page. But even as loose and messy as watercolor can be, the overall design remains readable and cohesive with sans-serif typeface and a tight color scheme.</p>
<h4>Fabien Barral</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22787" title="watercolor-websites-imaginary-moments" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-imaginary-moments.jpg" width="468" height="312" /></p>
<p>How else to set off a vibrant splash of watercolor but with plenty of white space? This is <a href="http://imoments.org/">the older website</a> of designer Fabien Barral, whose <a href="http://www.fabienbarral.com/ ">new website</a> also features stunning watercolor effects. In both cases, the strokes of a watercolor brush reveal celestial imagery and text that is hidden in the white background.</p>
<h4>Weberica</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22788" title="watercolor-websites-weberica" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-weberica.jpg" width="468" height="357" /></p>
<p>Watercolor is often used on the web in two forms: organic, and grungy. The <a href="http://www.weberica.net/">web design firm &#8216;Weberica&#8217; </a>combines both with a messy army-green background and illustrations of flowers and birds.</p>
<h4>Viget Inspire</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22789" title="watercolor-websites-viget" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-viget.jpg" width="468" height="221" /></p>
<p><a href="http://www.viget.com/inspire">Web consulting firm Viget Labs</a> uses watercolor in its most natural iteration – as part of a landscape. The mountainous, forested header image combined with sketches here and there – and plenty of white space to ease eye strain and provide room to breathe – is soft, yet fresh and modern.</p>
<h4>Ali Felski</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22790" title="watercolor-websites-ali-felski" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-ali-felski.jpg" width="468" height="284" /></p>
<p>Graphic designer <a href="http://www.alifelski.com/blog ">Ali Felski&#8217;s website</a> is not watercolor, per se. However, a gradient within the same color family, from deepest midnight blue down into bright white, provides a similar look to great effect.</p>
<h4>Five Points Interactive</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22791" title="watercolor-websites-5pts-interactive" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-5pts-interactive.jpg" width="468" height="304" /></p>
<p>The overarching theme of designer <a href="http://www.5pts-interactive.com/">Jeralyn Merideth&#8217;s website</a>? Paper. Notebook paper, memo paper, paper tags and yes, watercolor paper. There is no actual watercolor paint in the design, just a suggestion of texture and pleasing pastel colors.</p>
<h4>Boompa</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22792" title="watercolor-websites-boompa" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-boompa.jpg" width="468" height="221" /></p>
<p>Now <a href="http://www.boompa.ca/">here&#8217;s a website</a> that really allows watercolor art to shine. The entire background is made up of watercolor images of trees, clouds, rain, birds&#8230; nature, essentially. Just the right vibe for this independent Canadian record label.</p>
<h4>Le Bloe</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22793" title="watercolor-websites-le-bloe" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-le-bloe.jpg" width="468" height="256" /></p>
<p>Almost certainly, the &#8216;watercolor&#8217; at <a href="http://www.lebloe.com/ ">LeBloe.com</a> was created using a computer, but it&#8217;s no less effective, and the choice of watery blues and purples just intensifies the beauty of the effect.</p>
<h4>Corvus Art</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22794" title="watercolor-websites-corvus" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-corvus.jpg" width="468" height="234" /></p>
<p><a href="http://www.corvusart.com/">The Corvus website</a> is no stranger to design accolades, included in all sorts of web design lists, and with good reason. Designer Jessica Miller “gets a lot of her inspiration from wildlife, and wanted to incorporate her love of nature into her business life. This often shows in her design style, which has been described as &#8216;organic&#8217; and &#8216;ethereal&#8217;.”</p>
<h4>Toucouleur</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22795" title="watercolor-website-toucoleur" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-website-toucoleur.jpg" width="468" height="272" /></p>
<p>Lovers of minimalist design may turn their heads in utter shock at the “busy-ness” of <a href="http://www.toucouleur.fr/">the Toucouleur website</a>, but many others will fall in love with the carefree jumble of imagery which includes bits of watercolor here and there beyond all the photos, drawings, texture and decorative elements.</p>
<h4>Washtenaw Community College</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22796" title="watercolor-websites-washtenaw" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-washtenaw.jpg" width="468" height="302" /></p>
<p>The <a href="http://www.wccnet.edu/ ">Washtenaw Community College website</a> is a great example of using just a touch of watercolor to enhance an otherwise simple design. The drawing that makes up the background of the main column on the page creeps upward in a tuft of blue sky and white clouds.</p>
<h4>Deep Roots &amp; Wide Wings</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22797" title="watercolor-websites-deep-roots" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-deep-roots.png" width="468" height="282" /></p>
<p>There&#8217;s something grounding about the use of paper-inspired imagery on the web. A blog called &#8216;<a href="http://www.deeprootsandwidewings.com/ ">Deep Roots &amp; Wide Wings</a>&#8216; features a soft splash of watercolor but also the edge of a piece of watercolor paper, carefully torn to suggest the shape of hills.</p>
<h4>The Croquis</h4>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22798" title="watercolor-websites-the-croquis" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/watercolor-websites-the-croquis.jpg" width="468" height="334" /></p>
<p><a href="http://thecroquis.com/">&#8216;The Croquis&#8217;</a> – an online portfolio of fashion illustrations – is a minimalist version of watercolor on the web, perfectly suited to the subject matter but using just one colorful watercolor element against a stark white background for a subtle yet somehow still dramatic effect.</p>
<h2></h2>
   
  <span id="fb_share" style="margin-left: 5px;"><a name="fb_share" type="button"  href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fweburbanist.com%2F2010%2F07%2F26%2F14-artistic-examples-of-watercolor-in-web-design%2F&t=Workflow%3A+14+Artistic+Examples+of+Watercolor+in+Web+Design"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-share.png" width="60" height="19" alt="Share on Facebook"/></a></span>
  <a style="margin-left: 5px;" href="http://www.facebook.com/WebUrbanist"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-like-mini.png" width="66px" height="19px" /></a>
  <a style="margin-left: 5px;" href="http://www.facebook.com/WebUrbanist"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-like.png" width="220px" height="19px" /></a>

<hr width="375px" align="left" />
  <a style="margin-left: 5px;" href="http://www.stumbleupon.com/submit?url=https%3A%2F%2Fweburbanist.com%2F2010%2F07%2F26%2F14-artistic-examples-of-watercolor-in-web-design%2F&title=Workflow%3A+14+Artistic+Examples+of+Watercolor+in+Web+Design"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-SU.png" width="74px" height="19px" /></a>
  <a style="margin-left: 9px;" href="http://twitter.com/home?status=%40weburbanist+https%3A%2F%2Fweburbanist.com%2F2010%2F07%2F26%2F14-artistic-examples-of-watercolor-in-web-design%2F+Workflow%3A+14+Artistic+Examples+of+Waterco"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-retweet.png" height="19" width="48" /></a>
  <a style="margin-left: 5px;" href="http://twitter.com/weburbanist"><img border="none" src="https://weburbanist.com/wp-content/themes/urbanist/dist/images/feed-twitter.png" width="220px" height="19px" /></a>
<div style="clear: both;"></div>

    <hr width="375px" align="left" />

        <span style="float:left; margin-left: 10px;">[ By <a href='http://weburbanist.com/steph/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-tags-unusual-web-design&utm_content=unknown&utm_term=feed-author-footer'>SA Rogers</a> in <a href="https://weburbanist.com/category/design/" rel="category tag">Design</a> &amp; <a href="https://weburbanist.com/category/design/graphics-branding/" rel="category tag">Graphics &amp; Branding</a>. ]</span>

<br /><br />
  <span style="color: #ddd; float:left; margin-left: 10px;">[ <a style="color: #ddd;" href="http://weburbanist.com/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-tags-unusual-web-design&utm_content=unknown&utm_term=feed-footer-title">WebUrbanist</a> | <a style="color: #ddd;" href="http://weburbanist.com/archives/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-tags-unusual-web-design&utm_content=unknown&utm_term=feed-archives">Archives</a> | <a style="color: #ddd;" href="http://weburbanist.com/galleries/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-tags-unusual-web-design&utm_content=unknown&utm_term=feed-galleries">Galleries</a> | <a style="color: #ddd;" href="http://weburbanist.com/privacy/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-tags-unusual-web-design&utm_content=unknown&utm_term=feed-privacy">Privacy</a> | <a style="color: #ddd;" href="http://weburbanist.com/terms/?utm_source=Mozilla%2F5.0+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%3B+compatible%3B+ClaudeBot%2F1.0%3B+%2Bclaudebot%40anthropic.com%29&utm_medium=feed&utm_campaign=feed-main-tags-unusual-web-design&utm_content=unknown&utm_term=feed-tos">TOS</a> ]</span>
<div style="clear: both;"></div>
<br />

<div style="clear: both;"></div>
<br />
    <!-- custom per item content end -->
    ]]>
    </content:encoded>
			<wfw:commentRss>https://weburbanist.com/2010/07/26/14-artistic-examples-of-watercolor-in-web-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<post-id xmlns="com-wordpress:feed-additions:1">22783</post-id>	</item>
	</channel>
</rss>
