30 Creative Examples of the Hand Drawn Style in Web Designs
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
































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.
Joseph
March 28th, 2009
what about http://www.givemethatdollar.com?
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
Liz Gebhardt
March 29th, 2009
Great post.
Two other examples:
http://www.thinkingoutloud.com
http://www.everythingsanoffer.com
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
Tyrexito
April 11th, 2009
Another one: http://www.evitalasdrogas.com/
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