Hand-Drawing Style In Modern Web Design

Advertisement

The most valuable and innovative ideas had all been handwritten first. That’s no big news, since designers tend to produce first sketches as paper prototypes anyway; still it’s important, because web design is different from “usual” design. Of course, it also has a personal note and it is hand-made, however users can’t see that. As CSS is “boxy but good”, designs tend to have a rather limited appearance — they are too boxy and too right-angled.

If designers want to achieve a different design, they have to draw their sites by themselves — or at least some parts of it. And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.

Sometimes designers create whole pages with paper, pencil and/or a tablet PC. More often single layout elements are designed in a special way — curved links, hand-made icons, backgrounds, notes, stickers and fuzzy lines are supposed to give the site a “human touch”. These elements makes a web-page which might not look different from dozens of similar pages, stand out and arise users’ curiosity. Caution: a quickly installed hand-written font can harm more than help (hint: Comic Sans is definitely not the way to go).

How impressive can the results be? And when can the hand-drawing style be used? Let’s take a look at some excellent examples of hand-drawing style in modern web design. All screenshots can be clicked and lead to the sites from which they’ve been taken.

1. Hand-drawing as artistic minimalism

Since hand-drawing is a typical feature of graphic artists, designers and illustrators and is often associated with creativity and inspiration, it is often used in portfolios and showcases.

The interesting thing is that the hand-drawn style is often the only element which is used by designers to present their work on their site. Below some examples of the artistic minimalism at its best.

Screenshot1
Caution: Flash! The design is consistent throughout all pages of the site.

Screenshot

Screenshot
Hand-written navigation elements in use. Stylish and trendy. The font size is definitely too small, though.

Screenshot2
Mel Kadel draws everything — even herself.

Screenshot3

Screenshot4
Both start page (top) and internal page (bottom) on this Brazilian site have hand-drawn elements. All internal pages have its own, unique style.

Screenshot5
Heather Sloane illustrates with Flash.

Screenshot6
Drawn elements complete a classic portfolio design. This design isn’t that minimalistic, but it doesn’t offer that much, neither.

2. The style supports the content

In some cases designers experiment with hand-drawn doodles to support the main content of the site rather than use hand-writing for main design elements. For instance, sketches are sometimes placed on the background of the site. Sometimes it works quite well.

Screenshot7

In the design below similar idea is used. However, only 20-30% of the page actually serves the content presentation. This is not what most users are expecting and this is exactly what make this site different. Jakob Nielsen wouldn’t be fascinated about the content presentation on this site.

Screenshot8

Also single design elements can be used in the hand-writing style. In the example below only an RSS-button on the right is hand-drawn.

Screenshot9

3. The content incorporates the style

Screenshot10

This example uses hand-written elements all across the site. It has a hand-written logo, hints, lines and even maps. The hand-drawn map on the start page contains links to single areas of the site.

While this is definitely an interesting and creative design, users might experience problems in finding the information they are looking for. In fact, visitors need to play around with the site to find out what information is actually presented.

Screenshot11

The design also includes hand-drawn elements throughout the site, e.g. to display videos a sketch of the TV set is used, and even tables follow this style.

Screenshot12
The content also incorporates the style in the HomeworkHouse (wax crayons).

Screenshot13
An online-shop with a number of hand-drawn elements.

Screenshot14
Simple yet impressive. Caution, Flash.

4. Hand-drawing combined with illustration

Since hand-drawn figures might sometimes lack visual appeal, this shortcoming is often addressed with the use of striking visual elements. The result is sometimes a wild, vivid, colorful — but always innovative design approach.

It’s important to note that such design decisions should be considered very precisely. It’s very easy to make the design more appealing by making it less intuitive at the same time. The design is different — not necessarily simplified or made more difficult to grasp. In fact, how well usability and accessibility issues are mastered depends mostly only on the developer’s skills.

Screenshot15
What you see looks like a prototype: Joe Grisham’s site looks authentic, hand-made and uses illustrations.

Screenshot16
This design combines hand-drawing style and vivid illustrations (comics). It isn’t supposed to be a Web 2.0 design.

Screenshot
This is a typical Web 2.0 design — with glossy buttons, reflections and (guess what!) hand-drawing style used for navigation, content and footer.

Screenshot17
Hand-made style in the advertisement of a Casio-product. Flash in use.

Some designers intertwine the hand-drawing style with illustrations unifying them into a single design element. This produces an artistic, unexpected and intriguing design and motivates visitors to explore the site. Not all visitors will be willing to do that, actually.

Screenshot18
Hand-drawing style hidden in details: Spinvox uses curved lines for the hover-effect.

Screenshot19
A classic web-site with individual hand-written elements. Actually, it’s a site of a university. More hand-drawn elements can be found across the site.

5. Hand-drawing delivers the message

This aspect becomes more apparent in Web 2.0-designs. Hand-drawing elements are used to make it easier for users to get the idea behind the product and service which is offered. This works pretty well in both web and print design, as it gives the provided explanation a more personal, emotional and informal nature. Take a look at the examples below.

Screenshot20
This is how a typical Web 2.0-site might look like once it’s provided with some additional visual cues.

Screenshot21
Videoegg uses artistic elements in the navigation menu.

6. Hand-drawing taken to extreme

Sometimes it’s the designer’s purpose to impress, shock or entice the reader to get noticed and create a lasting impression. While there are a number of ways to achieve this, an unusual design style is definitely one of them; it is also the only style that delivers the artistic side of the design extremely well. Of course, it doesn’t always lead to usable web-sites.

Screenshot22
A “sketchy” weblog. Where do you look at when you visit the site at the first time?

Screenshot23
A drawn navigation menu at the top of the site also has some cute hover-effects.

Screenshot24
Retro lives in this site.

6. Experiments and artistic approaches

Designers are artists, or at least they should try to be. And as such, designers tend to take radical design decisions, exploring their imagination and challenging visitors’ creativity. This doesn’t always work, but sometimes it does.

Screenshot25
This Flash-based site literally lets you play with its content.

Screenshot26
A portfolio with hand-writing: one more time.

Screenshot27
An ultimate solution: Kuba Dabrowsky labels everything manually.

Screenshot28
The style of street paintings. Yes, it looks quite trashy. But it is designed like this by purpose.

Screenshot29
Kev Adamson: you won’t find any similar WordPress-template.

Screenshot30
Maria Grossmann. The screenshot shows only a part of the page (Flash)

Screenshot31
A weblog with a pig, curved lines, hand-drawn elements and a unique navigation menu. And, of course, the site also changes your cursor.

Screenshot32
Portfolio designed with the the “old paper look” in mind.

Footnotes

  1. 1 http://www.psyop.tv/main.php
  2. 2 http://www.melkadel.com/
  3. 3 http://www.agenciatudo.com.br/
  4. 4 http://www.agenciatudo.com.br/
  5. 5 http://heathersloane.com/
  6. 6 http://www.eine-der-guten.de
  7. 7 http://www.alexbuga.com
  8. 8 http://www.swiths.com/1_0/
  9. 9 http://carsonified.com/
  10. 10 http://bootb.com/es/
  11. 11 http://bootb.com/es/about/
  12. 12 http://www.neighborhoodhomeworkhouse.org/
  13. 13 http://www.twentytwentyone.com/
  14. 14 http://www.christiansparrow.com/
  15. 15 http://www.notyouraveragejoe.com/
  16. 16 http://www.mariska.com/
  17. 17 http://www.casioexilimlab.com/
  18. 18 http://spinvox.com/
  19. 19 http://www.biola.edu/undergrad/
  20. 20 http://voicethread.com/
  21. 21 http://www.videoegg.com/platform/
  22. 22 http://www2.elansnowboards.com/
  23. 23 http://www.sarahhyland.com/
  24. 24 http://www.kcrevolution.org/
  25. 25 http://www.loworks.org/
  26. 26 http://www.untitled2.com/
  27. 27 http://www.kubadabrowski.com
  28. 28 http://www.talessimon.com/
  29. 29 http://www.kevadamson.com/talking-of-design/
  30. 30 http://www.mariagrossmann.de
  31. 31 http://oink.elrellano.com/index.php
  32. 32 http://www.flashsimple.com/

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Mike Leavitt’s website uses sIFR for a hand drawn font used in headers.

  2. 2

    that’s intuitionkitchen.com

  3. 3
  4. 4

    Oink me ha baneado. Pero soy bueno, muy bueno… feliz año.

  5. 5
  6. 6

    Some great web designs here. A few seem a little over the top, but definitely a great style of design. Anything that isn’t over-used gloss and web 2.0 buttons is fine with me :)

  7. 7

    This is more like it! Fantastic set of examples people! Cheers

  8. 8

    Awesome examples! There are a lot of CSS galleries out there so It’s nice to have a change once in a while.

  9. 9

    I’ve been looking at your site for quite a while and this is one of the best lists you’ve put together! We don’t get the opportunity to do enough stuff like this, most of our clients are very corporate.

    Excellent work!

  10. 10

    Enhorabuena Oink!

  11. 11

    I loved this list.

  12. 12

    Nice one!

    Fantastic work guys!

  13. 13

    Carl D. Patterson

    January 3, 2008 1:49 pm

    Also checkout Jeff Bridges.com. But I don’t know if ‘The Dude’ himself does the artwork.

  14. 14

    First site I thought of was Web Designer Wall: http://www.webdesignerwall.com/

  15. 15

    It’s great to see such creativity. Thanks!

  16. 16

    wow…though trendy, the absence of truly “trendy” elements is great. i remember utilizing this style in 2000 for a site..people thought i was insane…

  17. 17

    The great disadvantage of any hand drawn text is that it is a disaster from a search engine point of view.

    There’s no point having a beautiful site on which all the text is hard drawn, as no one will ever find it on Google.

  18. 18

    Ditto what Joeflattire said, been there and they didn’t aprove it. Funny to see how things change.

  19. 19

    SMASHING-LY SOLID selection!

  20. 20

    @.18 (Robert)

    Yea yea yea, we’ve all heard of such things, but honestly, we have to stop complaining about how such and such can be bad for search engines. How are we going to ever evolve when designing for the web? For example, some sites that used to be 100% flash, have converted to a hybrid of flash and html. To me, that’s an evolutionary step. Maybe we’ll see the same with the methods described above. It’s good to keep an open mind… especially when everything nowadays is engulf’d in the web2.0 look. grah!

  21. 21

    @18 Robert.
    Sites like this can be built and still be accessible to search engines. heavy use of image replacement techniques would leave you with semantic mark up. Then you could just add all you images. Thats what i would do anyway.

  22. 22

    Jonathan Solichin

    January 3, 2008 11:38 pm

    These are some great sites. Wish mine could be that good.

  23. 23

    you'll have someone's eye out

    January 4, 2008 1:39 am

    nice list – you’ve missed off my favourite one tho – http://www.frankpr.it – i just love the fact it is laid out like one big sheet of hand drawn paper

    it’s a flash site, for those that like to know that sort for thing beforehand ;-)

  24. 24

    I love this style of site, i’ve had a handwriting style on my website for a couple of years and have had some good comments (no where near as good as these ones tho!). Keep up the good work, nice to see some regular posts again. :0)

  25. 25

    Studio 7 Designs

    January 4, 2008 2:43 am

    Fantastic list!

    We have recently worked with a client to create a “hand drawn, watercolor” type website and brand. It was such a pleasure to step away from gradients and tackle a creative challenge for our client.

    Cheers!

  26. 26

    Greatest list. Love them so much. Thanks.

  27. 27

    Some of these designs are very appealing. The main problem with a design so dependent on background images is what happens if the user increases the size over a certain value. Then the whole effect falls apart.

  28. 28

    Beatiful list,… and please this is not spam…
    TRAGEDY: Please support Italy (Campania – Naples) visit my site to support us, thank you.

  29. 29

    Great List,

    I think there brilliant, can be hard to implement and make them look right but these designers have done a wicked job.

    Il be bookmarking some of those!

  30. 30

    Thats a new variant… Like a designers Hand Book
    Ah.. Eventhough This site is became more popular for their Navigation Menu (In SM too) http://www.webdesignerwall.com/ hasn’t listed in this section :)
    Checkout their hand drawn menu hovers

  31. 31

    Great pick! I’m a doodle fan and I’ve always liked this style. It’s my favorite style actually but I haven’t applied it to myself :S My favorite on the list are BootB, SpinVox, and Elan Snowboards.

  32. 32

    That was really inspirational… great post to start 2007!

    Wish you all and smashing magazine a rocking 2008…

  33. 33

    Image replacement is your friend.

  34. 34

    Thanks for putting this together!

  35. 35

    I was thinking of doing a similar portfolio for myself… but I couldnt gather much of reference, I’m really thankful for this great collection of handwrittens

  36. 36

    This means that my conceptual design is now considered passe and “mainstream”. So many people have it already… :cry:

    Darn. :(

  37. 37

    Very nice designs….

  38. 38

    thx for mentioning the Elan Snowboards :) it took me a while to design it :) it worked out great … i received a lot of compliments… you might also wanna check the new ;)

  39. 39

    Nice and interesting.
    But I think there is the risk to create confusing layouts: this tecnique should be used carefully.

  40. 40

    Can you say “image map”?
    I have to personally add that I think the majority of these examples are terrible from a _web_ design standpoint. If you were highlighting magazine adverts, that would be one thing; but as we all know — or should know, if we are reading this site — the world of web design is NOT graphic design.
    Hand-drawn elements, if used, must be used properly. From the examples I decided to view posted above, none were.
    I sense some pople have a bit of the old Flash-envy.

  41. 41

    Amazing work on your part for gathering and categorizing all these sites. I must say I find this style of design unusable and too heavy for the average visitor. However I must admit that most of these sites do look friendly, warm and of course impressive. It looks like websites tend to be more like magazines which i don’t know if we should consider a progress.

  42. 42

    Very nice! But it’s much work to draw a website by hand. Especially creating a HTML from…. I tried this in 2005 ….. ;-))

  43. 43

    Really nice! I really liked these :) Why didn’t they come up with this earlier?

  44. 44

    Thank you for a great article. I started adding drawings to my blog last year and wanted to incorporate them into my blog’s layout but didn’t really have a good plan. These are inspiration for making a new plan. There is a group on Flickr for handwritten blogs too.

  45. 45

    I’m pleasured to see our studio’s work here. Thanks :)

  46. 46

    Here is hand drawn site i finished a while back

    Khalsa Kids – http://www.khalsakids.org/

  47. 47

    And my entire portfolio is hand drawn too… it’s good to see hand made things making a come back

    Jesse Willmon- http://www.jessewillmon.com/

  48. 48

    Hi, excellent… very innovative way to present information….

  49. 49

    Great list…

    These designs really show that the “web” is really a great outlet of creativity….

  50. 50

    Akiva ~ how is the web design not related to graphic design? Design in general is organization of information & elements conveyed to a specific target market to promote sell or inform. Which all those sites do just fine… maybe you should stray away from front page and welcome some creativity.

  51. 51

    I think that the hand-writing style in desing, so like the “grunge style”, is a posibility to give web desing something like a warm feeling to this kind of stuff.

  52. 52

    these are sick

  53. 53

    great collection of examples!! awesome

  54. 54

    Such a pity that http://www.letterror.com has been redesigned. They used to have a splendid hand drawn website which would perfectly fit in this list of illustrated websites.

  55. 55

    Karl Francisco Fernandes

    February 22, 2009 11:24 pm

    I am a big fan of hand-drawn vector ornaments, especially urban and floral. Those weren’t prominently featured here… Great article!

  56. 56

    Super cooooooooool~~

  57. 57

    I’ve been wanting to create my hand drawn website for months. This collection (along with several good blog posts out there) really inspired me. Mountain Drawn is my contribution to the collection.

  58. 58

    These are all great! I need to find, or make up a project for me to use hand-drawing style in it!

  59. 59
  60. 60

    The Mighty Boosh sites uses this style. Their web is not the best for functionality, however it’s simplistic and when it does work, it’s easy to use.

    http://www.thankbooshitsfriday.co.uk/

    The crayon reflects the style and mentality of one of the main characters.

    This style is also prevalent in their Mighty Book of Boosh, which is essentially an art book based on the troupe and series.

    http://www.hihowareyou.com/
    is the website of Danial Johnson which also reflects this style.

  61. 61

    This is a great post. I’m working on my own hand drawn theme for my site and this is really good help at figuring out stuff xD Thanks.

  62. 62

    i really love all this work,i would love to get more information on how to improve my art works mostly when using paint in drawing and i will like to improve on my pen work.
    thank you.

  63. 63

    How is that hove effect of the handwritten text called and how can i get it?
    You can take a look at bottom menu of this website: http://www.legworkstudio.com or this one http://www.rednoseday.com/

  64. 64

    Can anyone suggest the required dimensions for a background illustration that will appear as a word press template? Is there a conversion tool somewhere that does something like “if your drawing is on a 9 x 11 piece of paper, at 72 DPI your image will be x amount of pixels” or some such thing? Thanks!

  65. 65

    Nice Hand drawn too: emotionalfunction.de

  66. 66

    This list is amazing and I was hoping that you might be able to add my design that is quite unique. This site is http://www.drawinghowtodraw.com/ and was made by drawing, then cutting and ripping pieces of paper, that were then assembled, photographed, and then laid out as a web site. I hope that you can add it to your list.

    Thanks.

  67. 67

    web design galway

    March 29, 2011 10:06 pm

    Fantastic collection of hand drawn websites! Sketching a website and making that personal mark right from the pen is so unique,
    I am going to create a hand drawn site for myself and place it here on our site examples fireskystudios.com/examples.html (if I can’t persuade a client to do so first), simply for satisfaction and enjoyment reasons!Thanks for sharing.

  68. 68

    Yes, really.

  69. 69

    Old post but still very relevant, especially now that i’m looking for hand drawn pencil effects :)

    Thank you!

↑ Back to top