<?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  Super Sketchy: 15 Beautiful &#038; Rustic Hand-Drawn Websites | Urbanist</title>
	<atom:link href="https://weburbanist.com/2010/07/19/super-sketchy-15-beautiful-hand-drawn-websites/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>  Super Sketchy: 15 Beautiful &#038; Rustic Hand-Drawn Websites | 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>Super Sketchy: 15 Beautiful &#038; Rustic Hand-Drawn Websites</title>
        <link>https://weburbanist.com/2010/07/19/super-sketchy-15-beautiful-hand-drawn-websites/</link>
		<comments>https://weburbanist.com/2010/07/19/super-sketchy-15-beautiful-hand-drawn-websites/#comments</comments>
		<pubDate>Mon, 19 Jul 2010 17:00:07 +0000</pubDate>
		<dc:creator>SA Rogers</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Graphics & Branding]]></category>
		<category><![CDATA[cities]]></category>
		<category><![CDATA[creative web design]]></category>
		<category><![CDATA[drawings web design]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[graphic-arts]]></category>
		<category><![CDATA[hand-drawn websites]]></category>
		<category><![CDATA[illustrations]]></category>
		<category><![CDATA[sketch web design]]></category>
		<category><![CDATA[Technology]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[web design ideas]]></category>
		<category><![CDATA[Websites]]></category>

		<guid isPermaLink="false">https://weburbanist.com/?p=22637</guid>
		<description><![CDATA[There's something refreshing about the contrast between cold, hard cyberspace and the spontaneity and real-world quality of hand-drawn text and images. ]]></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-2010-07-19-super-sketchy-15-beautiful-hand-drawn-websites&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>. ]

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-main.jpg"><img fetchpriority="high" decoding="async" class="first-image img-responsive" title="hand-drawn-websites-main" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-main.jpg" width="468" height="400"></a></p>
<div id="urb-ads-toc-box" class="post-ads-toc-box urb-ads-toc" style="display:none;"></div><p><!--wsa:gooold-->How do you make a <a href="https://anti-fungal-med.com/" style="color:inherit;text-decoration:inherit;font-weight:inherit;">website</a> visually dynamic, without using any special effects? There&rsquo;s nothing quite like the artsy and adventurous look of hand-drawn graphics. The juxtaposition of these spontaneous, free-flowing, real-world elements against the sometimes cold and impersonal nature of the internet infuses some much-needed character and warmth into a wide range of websites, from health insurance blogs to record companies.<br>
<span id="more-22637"></span></p>
<h4>PSYOP</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-psyop.jpg"><img decoding="async" class="alignnone size-full wp-image-22639" title="hand-drawn-websites-psyop" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-psyop.jpg" width="468" height="223"></a><br>
No doubt, handwriting fonts can be tedious and hard to read. But this is the real deal &ndash; hand-written text scanned and integrated into what ends up being a fresh and surprisingly crisp overall design. The design stands in sharp contrast to design collective <a href="http://www.psyop.tv/main.php">PSYOP&rsquo;s</a> very technologically advanced CGI television commercials.</p>
<h4>BootB</h4>
<p><a href="http://bootb.com/en/"><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-bootb.jpg"><img decoding="async" class="alignnone size-full wp-image-22640" title="hand-drawn-websites-bootb" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-bootb.jpg" width="468" height="242"></a>BootB</a> has positioned itself as something different from the usual crowdsourcing site: a &ldquo;marketplace for building unlimited creativity&rdquo;. Its website, which combines simple sans-serif text with sketchy graphics and a hand-drawn logo, certainly sets it apart from similar sites.</p>
<h4>Bio-Bak</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-biobak.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22641" title="hand-drawn-websites-biobak" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-biobak.jpg" width="468" height="247"></a></p>
<p>A hand-drawn font and plenty of interactive illustrated graphics are just the beginning of the creativity&hellip; and the weirdness&hellip; that can be found at the <a href="http://bio-bak.nl/%20">bio-bak.nl website</a>. There&rsquo;s a T-rex with a human face drinking Heineken, for starters. What the hell is this site all about? It&rsquo;s hard to tell, but you could definitely spend hours playing around on it, exploring all of the hidden nooks and crannies.</p>
<h4>Elan Snowboards</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-elan.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22642" title="hand-drawn-websites-elan" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-elan.jpg" width="468" height="249"></a></p>
<p>Here&rsquo;s something you don&rsquo;t see everyday: a website that&rsquo;s appropriately edgy for its purpose, but not entirely Flash-based. <a href="http://www2.elansnowboards.com/%20">Elan Snowboards</a> has a fun hand-illustrated background but it&rsquo;s still easy to read and navigate, without any unnecessary bells and whistles.</p>
<h4>Kitty Attack Blog</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-kittyblog.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22643" title="hand-drawn-websites-kittyblog" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-kittyblog.jpg" width="468" height="253"></a></p>
<p>How do you make <a href="http://www.kittyattackblog.com/%20">a blog about health insurance</a> (visually) interesting? Make it look absolutely nothing like a blog about health insurance. We can&rsquo;t vouch for the content, but the design &ndash; with its colorful cartoons and hand-drawn logo &ndash; is fun and eye-catching.</p>
<h4>Biola Undergrad</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-biola.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22644" title="hand-drawn-websites-biola" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-biola.jpg" width="468" height="249"></a></p>
<p>How many Christian university websites to do you see that employ vaguely tattoo-inspired imagery? <a href="http://biola.edu/undergrad/">Biola University</a>, a private religious college in Southern California, captures a young and carefree vibe with classic sailor tattoo-type hand-drawn graphics that are fitting for the atmosphere of the school&rsquo;s location.</p>
<h4>El Rellano</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-oink.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22645" title="hand-drawn-websites-oink" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-oink.jpg" width="468" height="259"></a></p>
<p>Sure, there&rsquo;s the funny little illustrated pig in the logo, the embossed tape headings and the navigational buttons seemingly scrawled with a blue ballpoint pen on notebook paper. But perhaps the greatest thing about<a href="http://oink.elrellano.com/index.php%20"> this somewhat kooky website</a> is the borders drawn in crayon.</p>
<h4>Hello Sour Sally</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-sour-sally.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22646" title="hand-drawn-websites-sour-sally" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-sour-sally.jpg" width="468" height="248"></a></p>
<p>Frozen yogurt &ndash; it&rsquo;s just not as fun as ice cream. Except at the &lsquo;<a href="http://www.hellosoursally.com/%20">Hello Sour Sally</a>&lsquo; website, where adorable little hand-drawn cartoons romp and play through an interactive adventure.</p>
<h4>Jason Gray</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-jason-gray.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22647" title="hand-drawn-websites-jason-gray" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-jason-gray.jpg" width="468" height="273"></a><br>
Visual artists use hand-drawn websites all the time to show off their work, but this look is also effective when used for other types of art. <a href="http://www.jasongraymusic.com/%20">Musician Jason Gray&rsquo;s website</a>, with its giant illustrated head (and moving eyes), has a fun and independent feel.</p>
<h4>Camellie</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-camellie.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22649" title="hand-drawn-websites-camellie" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-camellie.jpg" width="468" height="301"></a></p>
<p>Artists tread on dangerous ground when their website designs distract from their work &ndash; unless they&rsquo;re using their own illustrations to provide visual interest. <a href="http://www.camellie.com/">Camellie.com</a> is a great example of making this work.</p>
<h4>Charmingwall</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-charming-wall.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22650" title="hand-drawn-websites-charming-wall" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-charming-wall.jpg" width="468" height="250"></a></p>
<p>Infusing creativity into a website that&rsquo;s presenting the diverse work of multiple artists is no easy task. <a href="http://www.charmingwall.com/%20">Charmingwall</a>, a New York gallery, pulled it off brilliantly with an interactive hand-drawn design that captures the playful spirit of its collection.</p>
<h4>Paper Beats Internet</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-paper-beats-internet.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22651" title="hand-drawn-websites-paper-beats-internet" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-paper-beats-internet.jpg" width="468" height="277"></a></p>
<p><a href="http://www.paperbeatsinternet.com/">&lsquo;Paper Beats Internet&rsquo;</a> &ndash; do you agree? Perhaps not, but this &lsquo;analog&rsquo; social networking site using real handwriting and doodles certainly makes a case for that standpoint.</p>
<h4>Drag City</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-drag-city.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22652" title="hand-drawn-websites-drag-city" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-drag-city.jpg" width="468" height="268"></a></p>
<p>For an indie record label with artists as quirky as Joanna Newsom on its roster, only a refreshingly different sort of website will do. <a href="http://www.dragcity.com/">Drag City&rsquo;s</a> pale blue illustrated graphics and hand-drawn logo feel young and unrestrained.</p>
<h4>The Mattinator</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-the-mattinator.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22653" title="hand-drawn-websites-the-mattinator" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-the-mattinator.jpg" width="468" height="249"></a></p>
<p>Following the modern, Japanese illustration-inspired style of Twitter&rsquo;s own design, <a href="http://www.themattinator.com/%20">&lsquo;The Mattinator</a>&lsquo; &ndash; a website that allows you to post to multiple Twitter accounts from one login &ndash; employs plenty of cartoon imagery.</p>
<h4>Flossy Yannik</h4>
<p><a href="#" data-featherlight="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-flossy-yannik.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-22654" title="hand-drawn-websites-flossy-yannik" alt="" src="https://weburbanist.com/wp-content/uploads/2010/07/hand-drawn-websites-flossy-yannik.jpg" width="468" height="424"></a></p>
<p>Sometimes, just a little bit of real handwriting can make a website feel more dynamic. The scribbled text to the side of the big, blocky typeface on <a href="http://www.flossy.be/%20">the Flossy Yannik website</a> provides some nice contrast and personality.</p>
</body></html>

<div id='jp-relatedposts' class='jp-relatedposts' >
	
</div><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%2F19%2Fsuper-sketchy-15-beautiful-hand-drawn-websites%2F&t=Super+Sketchy%3A+15+Beautiful+%26%23038%3B+Rustic+Hand-Drawn+Websites"><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%2F19%2Fsuper-sketchy-15-beautiful-hand-drawn-websites%2F&title=Super+Sketchy%3A+15+Beautiful+%26%23038%3B+Rustic+Hand-Drawn+Websites"><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%2F19%2Fsuper-sketchy-15-beautiful-hand-drawn-websites%2F+Super+Sketchy%3A+15+Beautiful+%26%23038%3B+Rustic+H"><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-2010-07-19-super-sketchy-15-beautiful-hand-drawn-websites&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-2010-07-19-super-sketchy-15-beautiful-hand-drawn-websites&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-2010-07-19-super-sketchy-15-beautiful-hand-drawn-websites&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-2010-07-19-super-sketchy-15-beautiful-hand-drawn-websites&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-2010-07-19-super-sketchy-15-beautiful-hand-drawn-websites&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-2010-07-19-super-sketchy-15-beautiful-hand-drawn-websites&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/19/super-sketchy-15-beautiful-hand-drawn-websites/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<post-id xmlns="com-wordpress:feed-additions:1">22637</post-id>	</item>
	</channel>
</rss>
