46 Sites To Get Inspired And Familiar With Hand Drawing Style

Posted in Illustration, Inspiration5 years ago • Written by 33 Comments

title-hand-drawn As You may notice in Year 2008 hand-drawn designs became one of the most popular creative trends, people tend to add more personal look and creative feel to their sites trying to stand out between traditional web 2.0 style, boxy layout sites. Hand-drawn design not always necessarily mean sketched or hand-drawn, there can be also creative things we use everyday like pencils, erasers, stamps, notepapers, stickers – could continue so on, but I will show examples doing through detailed research – so You could understand what’s really represented with “Hand-drawn design”. And actually this trend is very natural since many designers still sketch up their sites on the paper at first and only then start to design actual site.

I was really surprised when I read book “Nature Form Aesthetics” and noticed nature has already created everything, we just starting to realize it and through learning use those natural wonders for our own purposes. Okay, I’ll give an example – did You know the first real camera was created when people started to learn how our own eye is constructed? It’s the same objective with lens as our own eye! Of course cameras are constructed a little bit different but idea is the same!

What did I want to tell with this? Natural forms create aesthetical harmony in human’s mind, let them to associate design with childhood, creativity and real life, I believe now people are a little bit tired from all web 2.0 look designs, so we are showing sites on virtual board, notepaper creating interesting associations. However there’s a problem – it’s easy to overdo and harm usability, so people tend to use hand-drawn style just on the parts of the site like header, background, navigation or by using sketched notes or handwritten fonts in several places.

Usually sites using this style are creative, design related blogs, portfolio and showcase sites expressing inspiration, creativity not only between graphic designers but also tourism agencies, writers, interior designers, illustrators, dressmakers and so on.

Let’s try to answer the question showing examples – What’s represented with hand-drawn design?

One of the best hand-drawn style web examples in my opinion.

Notice pencil sketched background, watercolors, handwriting fonts, notes, fuzzy lines, paper clips, sketches – actually one of the best examples.

Web-Designer-Wall

Also take a look on navigation menu on mouseover, sticky notes using handwriting text elements to add even stronger creative feel.

web-designer-wall-example web-designer-wall-example-2

Estrya’s Handwriting font is very good for adding handwriting style notes as we see on WebDesignerWall screenshot examples above.

estrya-handwriting

As main header on jobs section also is used natural background with illustrations and handwriting font Sketch Rockwell – very useful for headers and titles.

design-jobs

Use watercolor brushes in background to get creative look:

casio-exilim-website-design

Very often people tend to use one main paper where whole page is based and add notes, pins, creative tools- this is actually main feature how to recognize this style:

simply-fired

great-design

danny-whitetaken-website-design

homedesignfind-webdesign

dpivision-website-design

viget

Site using hand-drawn style in subtle way with paper imitation and charming page fold.

web-template-site loading-preloader

Warning – Flash site image below imitating workspace on Your office, using handwriting notes, photos.

portfolio-flash-website

sirinec-creative-design

restaurant-creative-design

tbe-blizzards-website

13-creative-website

garry-nock-portfolio-website

Sites using just a few design elements to get that personal look with sewing cloth imitation and cute box layout roundup margins.

ewedding

zzz-thedrink-flash-website two-december-logotype

Sometimes entirely hand drawn sites can look amazing, but shouldn’t forget about usability since it’s easy to overuse this technique:

about-st-francis-website

chi-garden-webdesign

Portfolio website using a lot of sketched elements to express their creativity.

galan-design-website

Kind of childish looking site but in the same time – very good example:

what-a-lovely-name

Use ribbons in navigation or titles to get really special fashioned 3D effect :)

from-the-couch-website

change-in-command-website

adapt-lines

Vintage/Grunge sites using hand drawn elements:

scratch-22-creative-website

forty-seven-media

More like vintage style page using old paper, paper folds, stickers:

blue-moon-dueling-piano

Excellent example of hand writing font usage in navigation, logotype and also notice creative contact boxes  in the footer and sketched arrow. Simple and creative design.

mandible-cafe-header

mandible-cafe-footer

dawghouse-design-studio

Fuzzy lines, shapes, handwriting text and polaroid photo imitation looks really good:

salvemosalarbol-webdesign

chirag-web-graphic-design-site

Header using paper background and dashed (dotted could look good too) line with scissors.

psd-to-html

Sites using leather or fabric elements in their background or navigation with stitches.

viral-film-festival

works-for-sure-website

wandering-goat-coffee-company

alpine-meadows-unfiltered

61-pixels-online-portfolio-site

fabrice-ehret-creative-design

I think also wood texture in backgrounds is also very typical hand-drawn style feature and there are many examples showing why :

css-jockey-webdesign

freelance-creative-design

tasty-apps-webdesign

new-element-designs

ashes-and-milk-website

This site could be more considered vintage/grunge style website, but there are also very good examples of background usage, polaroid photos, wood materiality and map.

cottonseed-oil-comeback-tour

Site using table surface as background with many typical hand-drawn style daily use things, stickers, papers, pins, handwriting text and so on.

tvinky-blog-webdesign

Go crazy being creative – whole site is dedicated to represent Your workspace and tools You are using. (warning:flash site)

emilie-chollat

Creative board with lot’s of notes, pins, badges, checks and handwriting text.

feel-fit-webdesign

Actually I thought I will be a lot easer to describe this style, but as You see – images can tell more than description. Look carefully through those great websites, if You want to really stand out and forget about web 2.0 look site, which is already overused. Get inspired!

Subscribe to my RSS feed and stay updated because the next article will be huge hand-drawn resource collection with brushes, fonts, template images You can use to spice Your site or get totally creative without wasting Your time in tiresome resource search.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

215 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

33 Comments Best Comments First
  • pastels

    Tuesday, January 27th, 2009 23:55

    1

    work of art and i cant stop staring at each one of them. thanks for posting!

    pastelss last blog post : Watch 24 Season 7 Episode 9 | 24 Full Episodes | 24 Day 7

    0
  • Elizabeth Kaylene

    Wednesday, January 28th, 2009 17:43

    12

    I love this look and I love how even small elements can really spice up a normally boring website. I can’t wait to see what’s next!

    Elizabeth Kaylenes last blog post : I hate New Haven

    0
  • Dee Langdon - BloggerNewbie

    Wednesday, January 28th, 2009 15:27

    11

    I like the “hand writing” look. I chose a font for my logo that somewhat resembled hand writing. It does add a personal touch.

    Dee Langdon – BloggerNewbies last blog post : EntreCard – Yes, No or Maybe?

    0
  • john milton

    Thursday, January 29th, 2009 08:26

    13

    Hi..

    I love the idea of hand drawn style which is mentioned in this site.

    As it breaks the traditional rule of web site design, trough hand drawn style we can have more creativity and also add personal touch to our websites.

    Thanks
    john

    0
  • One

    Thursday, January 29th, 2009 00:53

    14
    0
  • Hari

    Saturday, January 31st, 2009 18:46

    16

    Seriously great post. I recently forun another site with handwritten logo Oxcili …. I know it is not as good as you have shown above but worth a mention that such a trend is catching on!

    0
  • Tom Ross

    Friday, January 30th, 2009 23:07

    15

    Really awe inspiring list. These designs are awesome!

    Tom Rosss last blog post : A Beginners Guide to Photo-Manipulation and Ani-Morphing

    0
  • Carter Harkins

    Wednesday, January 28th, 2009 22:03

    10

    I love the free-flowing feeling of sites like this. It really breaks the “boxy” design rules, which is a good thing. Organic looking sites are restful on the eyes, even if there is a lot going on.

    Carter Harkinss last blog post : 5 Do-It-Today Media Strategies for Getting Noticed in New Places on the Web

    0
  • Peter Fullerton

    Wednesday, January 28th, 2009 13:28

    9

    This is a great post. I like the breakdown of Web Designer Wall. Well done.

    You missed a classic hand drawn site though:

    http://www.WeArenotFreelancers.co.za

    0
  • CSSJockey

    Wednesday, January 28th, 2009 00:07

    3

    Thanks for including http://www.cssjockey.com in the list.
    I appreciate your effort..

    Thanks,
    CJ

    CSSJockeys last blog post : Google Juice: Update Services and Optimize Link Structure

    0
  • joyoge designers' bookmark

    Wednesday, January 28th, 2009 02:10

    2

    nice inspiring thanks for post..

    0
  • Angie Bowen

    Wednesday, January 28th, 2009 02:26

    4

    I love the sketchy/hand drawn style in web design. This is a great source of inspiration, thanks!

    Angie Bowens last blog post : Arbenting’s Best of the Week for 01/18 – 01/25

    0
  • Sai-Kit Hui

    Wednesday, January 28th, 2009 06:53

    5

    I’m hawking my own “hand-drawn” site. Hope it inspires you to do something… completely different.

    Great choices btw.

    Sai-Kit Huis last blog post : Starbucks IS coffee culture

    0
  • Уеб дизайнер

    Wednesday, January 28th, 2009 13:26

    8

    Lol! Very nice list. thanks i feel inspirated!

    0
  • Todd Adams

    Wednesday, January 28th, 2009 18:14

    7

    Thanks a lot for listing my site! I am curious as to why it was listed in the Hand Drawn category, but any recognition is good recognition so thanks!

    0
  • Clint

    Wednesday, January 28th, 2009 14:56

    6

    great list here.
    i think this is another site worth mentioning.http://www.ecenglish.com/younglearners/

    0
  • Jan

    Wednesday, February 4th, 2009 01:47

    17

    Thanks for including me in this list :)

    0
  • iDevelopThings

    Saturday, February 7th, 2009 04:53

    18

    Sweet! one more.. http://karalekian.com/

    0
  • john

    Tuesday, July 20th, 2010 15:21

    29

    THanks for sharing. It’s great

    0
  • PSD Cutups

    Wednesday, May 5th, 2010 05:41

    28

    Very nice list….

    0
  • Liena Aifen

    Friday, October 1st, 2010 08:48

    30

    Great articles. like your post. very intersting

    0
  • Ride a Wave

    Wednesday, February 16th, 2011 18:14

    31

    These are brilliant!!

    0
  • Marianne

    Monday, January 23rd, 2012 07:41

    33

    Thanks for the great collection. I love this style although it seems out of fashion lately…hopefully we will see more sites like these in future.

    0
  • Barsha

    Thursday, July 21st, 2011 11:01

    32

    casio and web designer wall are really beautiful, they are very talented.

    0
  • John Parks

    Monday, August 3rd, 2009 12:21

    27

    A beautiful roundup of websites that feature hand-drawn style.

    0
  • Jay

    Sunday, August 2nd, 2009 21:09

    26

    It’s amazing how you can accumulate so many great designs at once. I have a list of my own. Soon my design will be on your blog LOL! Well done.

    0
  • Tanya

    Saturday, February 14th, 2009 22:26

    20

    Great collection! Here’s another take on handdrawn websites that I think is cool http://www.matthewgraygubler.com/ – I featured it on my blog. Evan Eckard also has a really cool wordpress theme called Notepad Chaos that fits into this style, I used bits of it on my blog.

    Tanyas last blog post : Favorite Web Personality #15: Pascal-Auban Scher

    0
  • rOBSAN

    Sunday, February 8th, 2009 17:07

    19

    How do you get the backgroundimage (main-bg.jpg) to shine through the divs?

    0
  • AthenaEmily

    Saturday, February 14th, 2009 21:20

    21

    Fantastic list!!
    Absolutely love these sites!

    AthenaEmilys last blog post : February Wallpaper: Twenty-two

    0
  • Lee Munroe

    Sunday, February 15th, 2009 15:55

    22

    Great resource and showcase. Good work

    Lee Munroes last blog post : Web Design Trends: Stars and Aurora Effect

    0
  • Jermaine Pleas

    Saturday, July 4th, 2009 04:24

    25

    Hi, all I wanna say is these designs are totally rad. Thanks for posting them here.

    0
  • gaus surahman

    Monday, June 15th, 2009 07:22

    24

    I had drawn caricature and real drawing for almost 10 years, but never thought I could hand-draw my site. Thanks for inspiration.

    gaus surahmans last blog post : Facebook-like chat panel with drupal chat module

    0
  • Arie Zonshine

    Wednesday, February 18th, 2009 11:06

    23

    Excellent list, here’s my addition: Lionways

    0
  • Marianne

    Monday, January 23rd, 2012 07:41

    33

    Thanks for the great collection. I love this style although it seems out of fashion lately…hopefully we will see more sites like these in future.

    0
  • Barsha

    Thursday, July 21st, 2011 11:01

    32

    casio and web designer wall are really beautiful, they are very talented.

    0
  • Ride a Wave

    Wednesday, February 16th, 2011 18:14

    31

    These are brilliant!!

    0
  • Liena Aifen

    Friday, October 1st, 2010 08:48

    30

    Great articles. like your post. very intersting

    0
  • john

    Tuesday, July 20th, 2010 15:21

    29

    THanks for sharing. It’s great

    0
  • PSD Cutups

    Wednesday, May 5th, 2010 05:41

    28

    Very nice list….

    0
  • John Parks

    Monday, August 3rd, 2009 12:21

    27

    A beautiful roundup of websites that feature hand-drawn style.

    0
  • Jay

    Sunday, August 2nd, 2009 21:09

    26

    It’s amazing how you can accumulate so many great designs at once. I have a list of my own. Soon my design will be on your blog LOL! Well done.

    0
  • Jermaine Pleas

    Saturday, July 4th, 2009 04:24

    25

    Hi, all I wanna say is these designs are totally rad. Thanks for posting them here.

    0
  • gaus surahman

    Monday, June 15th, 2009 07:22

    24

    I had drawn caricature and real drawing for almost 10 years, but never thought I could hand-draw my site. Thanks for inspiration.

    gaus surahmans last blog post : Facebook-like chat panel with drupal chat module

    0
  • Arie Zonshine

    Wednesday, February 18th, 2009 11:06

    23

    Excellent list, here’s my addition: Lionways

    0
  • Lee Munroe

    Sunday, February 15th, 2009 15:55

    22

    Great resource and showcase. Good work

    Lee Munroes last blog post : Web Design Trends: Stars and Aurora Effect

    0
  • AthenaEmily

    Saturday, February 14th, 2009 21:20

    21

    Fantastic list!!
    Absolutely love these sites!

    AthenaEmilys last blog post : February Wallpaper: Twenty-two

    0
  • Tanya

    Saturday, February 14th, 2009 22:26

    20

    Great collection! Here’s another take on handdrawn websites that I think is cool http://www.matthewgraygubler.com/ – I featured it on my blog. Evan Eckard also has a really cool wordpress theme called Notepad Chaos that fits into this style, I used bits of it on my blog.

    Tanyas last blog post : Favorite Web Personality #15: Pascal-Auban Scher

    0
  • rOBSAN

    Sunday, February 8th, 2009 17:07

    19

    How do you get the backgroundimage (main-bg.jpg) to shine through the divs?

    0
  • iDevelopThings

    Saturday, February 7th, 2009 04:53

    18

    Sweet! one more.. http://karalekian.com/

    0
  • Jan

    Wednesday, February 4th, 2009 01:47

    17

    Thanks for including me in this list :)

    0
  • Hari

    Saturday, January 31st, 2009 18:46

    16

    Seriously great post. I recently forun another site with handwritten logo Oxcili …. I know it is not as good as you have shown above but worth a mention that such a trend is catching on!

    0
  • Tom Ross

    Friday, January 30th, 2009 23:07

    15

    Really awe inspiring list. These designs are awesome!

    Tom Rosss last blog post : A Beginners Guide to Photo-Manipulation and Ani-Morphing

    0
  • One

    Thursday, January 29th, 2009 00:53

    14
    0
  • john milton

    Thursday, January 29th, 2009 08:26

    13

    Hi..

    I love the idea of hand drawn style which is mentioned in this site.

    As it breaks the traditional rule of web site design, trough hand drawn style we can have more creativity and also add personal touch to our websites.

    Thanks
    john

    0
  • Elizabeth Kaylene

    Wednesday, January 28th, 2009 17:43

    12

    I love this look and I love how even small elements can really spice up a normally boring website. I can’t wait to see what’s next!

    Elizabeth Kaylenes last blog post : I hate New Haven

    0
  • Dee Langdon - BloggerNewbie

    Wednesday, January 28th, 2009 15:27

    11

    I like the “hand writing” look. I chose a font for my logo that somewhat resembled hand writing. It does add a personal touch.

    Dee Langdon – BloggerNewbies last blog post : EntreCard – Yes, No or Maybe?

    0
  • Carter Harkins

    Wednesday, January 28th, 2009 22:03

    10

    I love the free-flowing feeling of sites like this. It really breaks the “boxy” design rules, which is a good thing. Organic looking sites are restful on the eyes, even if there is a lot going on.

    Carter Harkinss last blog post : 5 Do-It-Today Media Strategies for Getting Noticed in New Places on the Web

    0
  • Peter Fullerton

    Wednesday, January 28th, 2009 13:28

    9

    This is a great post. I like the breakdown of Web Designer Wall. Well done.

    You missed a classic hand drawn site though:

    http://www.WeArenotFreelancers.co.za

    0
  • Уеб дизайнер

    Wednesday, January 28th, 2009 13:26

    8

    Lol! Very nice list. thanks i feel inspirated!

    0
  • Todd Adams

    Wednesday, January 28th, 2009 18:14

    7

    Thanks a lot for listing my site! I am curious as to why it was listed in the Hand Drawn category, but any recognition is good recognition so thanks!

    0
  • Clint

    Wednesday, January 28th, 2009 14:56

    6

    great list here.
    i think this is another site worth mentioning.http://www.ecenglish.com/younglearners/

    0
  • Sai-Kit Hui

    Wednesday, January 28th, 2009 06:53

    5

    I’m hawking my own “hand-drawn” site. Hope it inspires you to do something… completely different.

    Great choices btw.

    Sai-Kit Huis last blog post : Starbucks IS coffee culture

    0
  • Angie Bowen

    Wednesday, January 28th, 2009 02:26

    4

    I love the sketchy/hand drawn style in web design. This is a great source of inspiration, thanks!

    Angie Bowens last blog post : Arbenting’s Best of the Week for 01/18 – 01/25

    0
  • CSSJockey

    Wednesday, January 28th, 2009 00:07

    3

    Thanks for including http://www.cssjockey.com in the list.
    I appreciate your effort..

    Thanks,
    CJ

    CSSJockeys last blog post : Google Juice: Update Services and Optimize Link Structure

    0
  • joyoge designers' bookmark

    Wednesday, January 28th, 2009 02:10

    2

    nice inspiring thanks for post..

    0
  • pastels

    Tuesday, January 27th, 2009 23:55

    1

    work of art and i cant stop staring at each one of them. thanks for posting!

    pastelss last blog post : Watch 24 Season 7 Episode 9 | 24 Full Episodes | 24 Day 7

    0

Comments are closed.

67.202.56.112 - unknown - unknown - US