30 Creative Examples of the Hand Drawn Style in Web Designs

Mar 28 2009 by Jacob Gube | 54 Comments

Lately, there has been a trend towards incorporating hand drawn elements into web designs, bringing sketches and drawings that we typically see in the paper medium onto the web. Hand drawn elements can be seen in navigation bars, as backgrounds, as accenting elements, or as an entire site theme. They give a design a very unique, out-of-the-box, and organic/realistic look.

In this collection, you will be able to find some of the best designs that have hand drawn, "sketched" elements infused into them for your inspiration.

Bearskinrug

Bearskinrug - screen shot.

Tales Simon

Tales Simon - screen shot.

Sawyer Hollenshead

Sawyer Hollenshead - screen shot.

Kinetic Singapore

Kinetic Singapore - screen shot.

Christian Sparrow

Christian Sparrow - screen shot.

LOW MORALE

LOW MORALE - screen shot.

BootB

BootB - screen shot.

Pointless Ramblings

Pointless Ramblings - screen shot.

Kitty Attack

Kitty Attack - screen shot.

mel kadel

mel kadel - screen shot.

Frank PR

Frank PR - screen shot.

Redemption Maddie

Redemption Maddie - screen shot.

Legwork Studio

Legwork Studio - screen shot.

NJ REBEL

NJ REBEL - screen shot.

Dawghouse Design Studio

Dawghouse Design Studio - screen shot.

Design Jobs on the Wall

Design Jobs on the Wall - screen shot.

Jesse Willmon’s Winter 2009 Design

Jesse Willmon's Winter 2009 Design - screen shot./

marcol.art.pl

marcol.art.pl - screen shot.

Schlafman.com

Schlafman.com - screen shot.

Chemistry Recruitment

Chemistry Recruitment - screen shot.

Elan Snowboards

Elan Snowboards - screen shot.

PSYOP

PSYOP - screen shot.

Dann Whittaker Creative

Dann Whittaker Creative - screen shot.

We Are not Freelancers

We Are not Freelancers - screen shot.

Oink!

Oink! - screen shot.

Biola Undergrad

Biola Undergrad - screen shot.

Heather Sloane

Heather Sloane - screen shot.

Free People Clothing Boutique

Free People Clothing Boutique - screen shot.

Grupa Firm

Grupa Firm - screen shot.

Football made in Africa

Football made in Africa - screen shot.

Related content

54 Comments

Matt

March 28th, 2009

If you’re a good artist, and you want to show your skills, I’m all for it. But as a “style” I’m bored of this. It’s like an old joke.

spellathon

March 28th, 2009

Yes, hand drawn sketches are no doubt getting famous in WEB industry very quickly, infact some people out there are making very good sketches to convey some messages that can’t be delivered by any other means.

jack

March 28th, 2009

Nice list, but I think you missed A List Apart’s Kevin Cornells’ illustrative contributions to their articles!

jack

March 28th, 2009

I take it back – BearSkinRug is Keven’s personal website. Good job!

Adam

March 28th, 2009

cool post but you missed the most famous of them all
http://whytheluckystiff.net/ and his notorious book http://poignantguide.net/

Dan

March 28th, 2009

You’re missing one of my favorite ones: http://www.rob-sheridan.com/sketchblog/

Nobama

March 28th, 2009

I was planning on trying some hand drawn designs but with a stylus and pad… does that count?

Jacob Gube

March 28th, 2009

@Nobama: It doesn’t matter what you use, as long as it looks good right? You can use Illustrator, with a mouse, using AI pencil brushes or something: what matters is the end result, not the tool you used.

James Martin

March 28th, 2009

Good stuff. Rittenhouse Petis another good example.

Torley

March 28th, 2009

I like many of these, handwritten stuff — even if it’s a font simulating real scribing — adds character and personality. Especially if it’s YOUR writing, and hopefully not at the expense of being illegible.

Also have a look at some of the designs in virtual world Second Life, such as the aptly-named Scribble:

» http://www.flickr.com/photos/radiosignals/3060220721/

And Leafy!

» http://www.xstreetsl.com/modules.php?name=Marketplace&MerchantID=170333

ron

March 28th, 2009

if i never see that played out 3 years ago, self consciously crude, 3d block lettering style again ill be happy.

Amanda

March 28th, 2009

I think the hand drawn images are brillant and show the effort an artist/designer takes into presenting themselves as “unique”. Two artists never draw alike right? Wonderful list. I enjoed all the works shown.

hehu

March 28th, 2009

http://www.9point8studios.com is another example :P

Michael Nobbs

March 29th, 2009

These are just wonderful, I’ve got a busy morning ahead looking around them all. Thank you!

Two Socks

March 29th, 2009

While a nice round up of this style of web design, I am affraid iam with Matt on this…its old and boring.

virtual web symphony

March 29th, 2009

I always have tried such cool themes on my website but I found that over a period of time I lose interest in them probably the ones with good images stays there for long.

Patternhead

March 29th, 2009

Some great examples here. Thanks

taylan

March 29th, 2009

Great list. Thanks…

Tom Ross

March 29th, 2009

I’ve seen a few roundups for this style, but this is the best one yet. I hadn’t seen most of these sites, so it was great to check out some new artwork.

Danh ba web 2.0

March 29th, 2009

Excellent post. Thanks a lot !

bushahr

March 29th, 2009

quite an interesting collection. though some of them are strictly ‘mediocre’. good collection nonetheless. one addition to the list could be this site that i stumbled upon a couple of weeks back—> http://www.tiffinboxindia.com/geekyghosh/

Jan

March 29th, 2009

Thanks for including me on this list guys! :)

Sean

March 29th, 2009

http://whytheluckystiff.net has done this for a while, not to mention his “poignant guide to ruby” – http://poignantguide.net

Tony Ramos

March 29th, 2009

In the video realm, there’s http://commoncraft.com/

kevadamson

March 29th, 2009

Nice examples. “Hand drawn style” totally floats my boat (and is also the style of my own site) :)

Jonathan Stark

March 29th, 2009

Wow, what’s with the cooler-than-thou haters? Maybe if the design snobs here could deign to grace the proletariate with some links to what *they* think is the bleeding edge of web design, it would be a little less obnoxious. Sheesh.

Allie

March 29th, 2009

Awesome drawings

Kimby

March 30th, 2009

The hand-drawn trend is starting to remind me of the time when vector flourishes ruled the earth. But if it’s done outstandingly well, it will still be an outstanding piece of design.

Barbara Ling, Virtual Coach

March 30th, 2009

And don’t forget http://www.nicky510.com ! Not old and boring by a longshot.

Oink!

March 30th, 2009

Thanks for the mention!!!! :-)

jane

March 30th, 2009

The hand-drawn trend is starting to remind me of the time when vector flourishes ruled the earth. But if it’s done outstandingly well, it will still be an outstanding piece of design..

Andrew McKinney

March 30th, 2009

I tried the “low-fi/hi-fi prototype” on the app I created for my portfolio. It kinda worked, but I realized I’m not a lo-fi guy :)

http://andrewmckinney.com/portfolio

My take-away: Hand drawn websites are tough to do! They are graphically and technically intense, and require a level of consistency that demands great effort for the designer.

Timothy

March 30th, 2009

Nice list! Delicioused

Jutta

March 31st, 2009

Great idea!

Radek

March 31st, 2009

Hey you may want to change “Grupa Firm” to “Values – Grupa Firm Doradczych”. Right now it means “Group of companies”. A tip from Polish side of the web :)

Ste

March 31st, 2009

I do really like hand drawn websites, but I wish some people would be more creative with the lettering, there’s a lot of 3D sans-serifed fonts & they always look the same!

webhosting

March 31st, 2009

these are some awesome designs, one negative point: not all of the sites arez optimal to view on a large screens, they get messed up :-(

WebKilla

March 31st, 2009

All design sucks. Period.

I’m way too cool for all of it.

Callum Chapman

April 1st, 2009

great stuff, i love this style of work! cheers!

Paul West

April 1st, 2009

Some great designs here, I think hand drawn webdesigns can be more expressive and be fun! I use cartoons on my status updates.

Liza

April 1st, 2009

Very nice collection, but while some of them use really hand drawn images and sketches, other use “aka hand drawn” font and add a few grungy element to achieve the same visual result.

Shekhar

April 4th, 2009

good man nice work i really want to create this kind of layouts but must be lacking somewhere!!!!!!!!!!!!

Johnson Koh

April 6th, 2009

I like Kinetic Singapore. Very entertaining along with the music and sound effects!

iboi

April 6th, 2009

love it… thanks

Gis

April 16th, 2009

awesome collection… this is totally my favorite style out there :D

SiteArt

September 21st, 2009

…yeah the ones that are actually had-drawn compared to using “hand drawn” fonts are definitely better.

Ashley Adams

September 23rd, 2009

I’ve always found hand drawn elements very interesting………they bring a personalized touch to any design. I particularly loved Low Morale, Dawghouse Design Studio, Elan Snowboards, and Football made in Africa. Keep posting

Fi

November 5th, 2009

Thanks for this compilation. I love to see hand drawn elements on web pages. They’re so much more personable and expressive.

Richard Rabil, Jr.

September 17th, 2010

Thanks so much for posting. I’m inspired!

Rachel

November 9th, 2010

Wow – very cool compilation of hand-illustrated site layouts. I love this design style and I just redesigned my drawing community in a hand-drawn style – http://www.drawinghowtodraw.com/ – it was difficult to create – I used a 3-d illustration style which meant that I first drew it, transferred them to different cut and torn pieces of paper, glued them together, photographed the entire layout, then transferred it to a final design and css. I hope that everyone likes it…it was very difficult to do…but I love it.

Thanks …
Rachel

peter

December 30th, 2010

Quality sketches, reminds me of the many jotters i had as a toung lad.

Leave a Comment

Subscribe to the comments on this article.