Though it may be rather challenging at first, it helps when you get inspired by masters. So in this article, I collected a bunch of very impressive and edgy hand drawn websites that would inspire you. Here goes…

1.Bearskinrug

2. Richard Stelmach

3. Lotie

4. Kinetic Singapore

5. Sawyer Hollenshead

6. Draw & Fold Over

7. Dawghouse Design Studio

8. College Prowler

9. Hello Sour Sally

10. It Looks Good

11. Talessimon

12. Bowtie

13. Elan Snowboards

14. Neighborhood Homework House

15. Jcbsong

16. Get Ready to Rox

17. Sarah Hyland

18. Wing Cheng

19. Leonite Internet Ventures

20. Tennessee Education

21. Denise Chandler

22. Idiotic Adventures Of Philippe And Pierre

23. Monkeehub.com

24. DoodlePad

25. Look Designs

26. Legwork Studio

27.  So Interactive

28. Kitty Attack

29. Biola

30. Xixinobanho

31. Kutztown University

32. Casio

33. Mobious

34. Bootb

35. Mikimottes

36. Heather Sloane

37. Lucuma

38. Mel Kadel

39. Mariska

40. PSYOP

41. Multi Account Twitter Tweeter – MATT

42. Kev Adamson

43. Christian Sparrow

44. Leo Burnett

45. Jesse Willmon

46. Dann Whittaker Creative

47. Project 365

48. Giant Ant Media

49. Draw For Joy Blog

50. Robbin Ingvarsson and Waldemar Wegelin

51. Deborah Cavenaugh Illustrator and Painter

52. Mixtel Gonzalez Zabalo

53. Nela Dunato and Chatte Noire

54. Schlafman Illustrations and Drawings

55. Studio Racket

56. FatHeads Creative Studio

57. Swiths Site With Style

58. Low Morale Design

59. Agami Creative

60. WEFAIL Design

* Hand drawn images are really edgy and funky. It makes your page very personalized and it catches so much attention that it would make you want to do more. I hope you enjoyed this list & inspired you as well. I salute to those people capable of such imaginative & creative pieces. Kudos!

Various office supplies, tools, notes, brushes, stock photos

1. Office Photoshop brushes Version 2 by 9mmbmf

2. Drawing pins brushes by shadymedusa-stock

3. Office Stuff Brushes by redheadstock

4. Price sticker brushes by chokingonstatic

5. Office tools Photoshop brushes by xenomorphaka

6. 13 Various office tool Photoshop brushes by ponker

7. Office Photoshop brushes by purple-quartz-brush

8. 16 Office supply Photoshop brushes by shoe-fly

9. High resolution office stock photos by masseva

10. Morning coffee Photoshop brushes by photoshoprangerstock

11. Vector notes and pins by masseva

Sketched, hand-drawn Icon set roundup

Freehand Icons – $16

12. Sketched Up Iconset by addictedtocoffee.de

13. Handycons

Handycons is a free, hand drawn social media icon set that contains 12 icons. Package contains icons for del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed & Email icon, of course. All icons are available in four sizes: 16×16, 24×24, 32×32 and 48×48 pixels.

14. Notebook Paper Image Files by kittenbella

15. Free Hand Drawn Doodle Icon Set for Bloggers

16. Red Little Shoes Icon set by raindropmemory

17. Natsu handdrawn icon set by raindropmemory

18. Skitchy sketchy icons by overtone

19. Hand drawn icons by superlegoman

20. Kreski lines handdrawn icons by azazel100

Relevant:  Watercolor Icons for the Web – Black & White – $9 200+ icons!

Hand-drawn vectors, doodles, fuzzy lines, sketches

21. 120+ Free Hand-drawn Vector Arrows

22. Doodle Photoshop Brushes by chokingonstatic

23. Arrow Doodle Photoshop brushes by chokingonstatic

24. Doodle Photoshop brushes by narcissus

25. Dotted doodle Photoshop brushes by chokingonstatic

26. Creative doodle brushes

27. Drawn object brushes

28. Hand drawn floral patterns

29. 15 drawn flower brushes by domino-88

Note papers, backgrounds, textures, old papers, paper templates

30. Old Photo paper image set by libelinha77

31. Note paper background

32. 10 Paper office stock textures by sanami276

33. Old paper background

34. Old paper pack by ayelie-stock

35. Old book texture by temabinastock

36. Old wrinkled paper texture

37. 15 Photoshop paper shapes by gojol23

38. Note Book Texture by annfrost-stock

39. Note Paper brushes by luminicity

40. Three paper notes by wklize

41. Really old paper texture

42. 9 big notebook textures by yunyunsarang

43. 19 big notebook textures by yunyunsarang

44. More paper textures

45. Natural Paper Texture Pack by cloaks

46. High resolution paper texture by spiteful-pie-stock

47. Old paper stock by arpadstock

48. Songs texture

*Updated

Also I found very good free high resolution plain and grunge paper textures article from fudgegraphics, thought might be useful.

Wood textures, wallpapers, backgrounds

49. Free Wood Journal+Gallery CSS Pack by bobbyperux

50. Wood texture by gnrbishop

51. Dark wood by zygat3r

52. Dark wood texture pack by cloaks

53. 45 wood textures by jammurch

54. 9 seamless wood patterns by silver-

55. 2 Large wood textures by nureen-restock

56. 90 High resolution wood texture collection

57. The Teak wood wallpaper/texture by iamfreeman

58. Wood wallpaper/texture by oliuss

59. Wood wallpaper – Refreshed by oliuss

60. Darker wood wallpaper/texture by paulensane

Cork textures and backgrounds

61. Cork board PSD template by sedart

62. Texture Cork board by von-chan

63. Corkboard Wood Cork Composite by enchantedgal-stock

64. Cork Board Stock by rainydoll-stock

Leather texture

65. Leather black texture by jaqx-textures

Hand Drawing Style related tutorials

66. Pin board tutorial by photoshop-tutorials

Learn how to create pinboard, notes, pins, polaroids and paperscraps.

67. How to create old sticker – Tutorial by tom1988

68. Hand drawn design tutorial by WebDesignerWall

69. Design Watercolor Effect Menu Tutorial – Create + Code

70. Tutorial how to create hand-drawn type website in Photoshop

As always feel free to add any more related articles, resources to make even better list!

Also You can look over this article I created before with free PSD files – sticky notes, papers to use in Your hand-drawn site designs.

45+ Free Design Template And PSD Files

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.

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

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

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

Use watercolor brushes in background to get creative look:

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:

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

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

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

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

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

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

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

Vintage/Grunge sites using hand drawn elements:

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

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.

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

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

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

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

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.

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

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

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

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.