Hand-Drawing Style In Modern Web Design – Volume 2


When it comes to web design too often perfect, colorful and boxy designs make the cut; however, the reality is different as it is hard to find objects with a perfect shape and a perfect color in our daily routine. To achieve a unique and communicative design we need to consider more creative approaches. For instance, we can draw sites by ourselves — or at least some parts of it.

The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when perfect, boxy and rounded elements can be found almost everywhere. They look different and they can make a web-site look different. And this is what we usually are after in the first place.

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. This post presents fresh 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.

Please also have a look at our previous showcase

What’s new? Link

Few months ago we’ve declared2 that, in our humble opinion, shiny and glossy design elements were officially outdated. We have also suggested that web designs will become more subtle, more user-centric, more content-oriented and less loud. Indeed, this is exactly what we observe at the moment. Hand-writing, earlier often taken to extreme, now seems to become subtle, supporting and less dominating. Below you’ll find some examples which are supposed to prove exactly that.

Hand-drawn elements are used moderately Link

In particular, since designers try to provide visitors with a comforting, user-friendly presentations, they tend to use hand-drawn and hand-written elements moderately. Sometimes, only few design elements are designed accordingly while the rest of the design is focuses on clean conten presentation and isn’t drawn at all. For instance, often only category headers, search boxes or navigation are hand-written.

However, it is important to understand that there are still many examples of exaggerated use of hand-writing and hand-drawn elements (see examples below). Yet we’ve observed a growing number of designs where such elements are used sparsely and accurately.


Jeff Sarmiento4 combines hand-written and hand-drawn elements with a classic retro-look. Although there are only few elements which are actually hand-drawn, they give the design an authentic style which perfectly fits to its look. More precisely, hand-drawing is used only for category headers,

Script fonts gain on popularity Link

Since hand-drawn elements become more subtle, designers often tend to imitate hand-writing instead of using it. For instance, this is done by using clean and sharp script fonts instead of literally hand-written or drawn sketches. This approach helps designers to make the layout cleaner and easier to scan.


Paul Wallas6 uses script fonts in header and for category headings. The script font is, however, easy to read and perfectly fits to the informal style of the site.

Beware: usability issues! Link

Regarding the usability point of view we’ve managed to find some negative examples. Attempting to create a distinctive design, designers often tend to neglect usability issues. Whether some design element is hand-drawn or not, it is important that it successfully communicates its function and visitors are able to a) find it and b) immediately know how to use it.

Hand-Writing Screenshot7
Hand-written navigation options. That may be too much hand-writing at once.

Mind Never8 (screenshot above) uses hand-writing for 6 design elements — logo, tagline, navigation, headers, illustration and all clickable elements. The main problem with the design is the simple fact that it is hard to scan.



Furthermore, links are styled differently — sometimes they are blue, sometimes black, sometimes they have a hover-effect, sometimes they don’t. That’s not effective and not user-friendly. Here one should reduce the number of hand-drawn elements and use standard design elements instead.

Hand-Writing Screenshot11

Consider another example above. Omnia.ae12 uses hand-drawn design elements for almost every possible element in the layout. The image displays a country selector which is a radio-button. Although this is definitely an interesting solution, this selection is easy to overlook as it appears to be rather a part of the background image than a standalone design element.

Hand-Writing Screenshot13

Hand-Writing Screenshot14

While the RSS-button and a sign-up-illustration are likely to be perceived as clickable design elements, in the language selection above it is not the case. Keep in mind: if your decision to use an artistic element instead of a standard solution raises some usability issues, you should prefer a standard solution.

Let’s now take a look at some examples of how hand-writing and hand-drawing are used in practice.

1. Hand-drawing in logos and headers Link

When hand-written elements are placed in logo or in a header, the designer makes sure that visitors will detect these elements. Since these areas are clicked more often than other layout elements, the “hand-drawn”-feeling will be conveyed. That’s what some designers are trying to achieve. Besides, if the designer wants its design to convey a personal note and some design elements are already hand-written, it makes sense to consider adding some hand-written notes to the header as well.

Logos Link



Hand-Writing Screenshot17

Headers Link

Hand-Writing Screenshot18

Hand-Writing Screenshot19

Hand-Writing Screenshot20

2. Single hand-drawn design elements Link

To give the layout a “hand-written”-style design elements need to be styled accordingly. In fact, you can apply the style to any part of your layout. Usually designers use hand-writing for teasers, RSS-buttons, navigation, input fields, headers and background images.

Teaser, Slogan Link

Hand-Writing Screenshot21

Hand-Writing Screenshot22

RSS-feeds Link



Input fields Link

Newsletter Box

Search box

Illustration Link

Hand-Writing Screenshot27

Hand-Writing Screenshot28

Preloaders Link


Hand-Writing Screenshot30

Hand-Writing Screenshot31

Hand-Writing Screenshot32

Hand-Writing Screenshot33

Hand-Writing Screenshot34

Hand-Writing Screenshot35


Background image Link


Hand-Writing Screenshot38

Hand-Writing Screenshot39

3. Hand-drawing in navigation Link

Navigation is the primary element of every site design. Designers know it and give it some unique artistic elements to make the design more unique and distinctive. However, you shouldn’t experiment too much with navigation. Make sure it works. The function is more important than the design. Below you’ll find some example of how one can effectively combine the hand-drawing-style with clear and intuitive navigation.

Hand-drawn rectangles for navigation options

Hand-Writing Screenshot41
Hand-drawing combined with hand-writing

Hand-Writing Screenshot42
Hand-drawn icons appear when the navigation option is hovered

Hand-Writing Screenshot43
Hand-drawn icons are used to indicate navigation options

Hand-drawn icons appear when a section is hovered

Hand-Writing Screenshot45
A script font in use

Hand-Writing Screenshot46
Subtle hand-writing used for tabs

Hand-Writing Screenshot47
Tiny hand-writing for section headers and script font used to display navigation options

4. Hand-drawing used moderately. Link

As we have written above, designers attempt to make sure that the design looks distinctive without compromising the usability and user-friendliness of the design. In fact, it’s not that hard as it may look like. Consider the examples below.



Hand-Writing Screenshot50
This is how we like it: huge typography, flashy colors, memorable favicon and a sweet roboter willing to help. Well, the roboter speaks hand-writing, of course.

The design become more interesting when standard-elements are mixed with some hand-written elements. In such cases visitors are offered the design which looks unusual and different. That’s a good way to impress visitors with an unusual design approach. That’s what Li Chin52 does. The navigation menu has hover-effects as well.

Icons, navigation and products in an online-shop

Coldplay offers some free downloads

Hand-Writing Screenshot55


Beware: Flash-based music player starts automatically


Hand-Writing Screenshot59


This is a pretty hand-drawn sidebar!





Graphic artists and illustrators seem to have no problems with drawing a web-site from scratch. This is how Sarah Rays has done it.

Grégory Dourdes with the same approach.

5. Hand-drawing used heavily Link

There are still many examples of exaggerated use of hand-writing and hand-drawn elements, however they seem to lose on popularity. It’s hard to say if it’s a trend or not — a simple explanation we can come up with is a fact that overcrowded, “too artistic” designs are likely to attract a limited target group while design with moderate use of hand-drawing can be aimed at everybody.

Hand-Writing Screenshot68
Flash in use

Probably the largest hand-drawn design out there


Hand-drawn site layout


Creative chaos at its best









Footnotes Link

  1. 1 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
  2. 2 http://www.smashingmagazine.com/2008/03/11/the-secrets-of-grunge-design/
  3. 3 http://www.jeffsarmiento.com/
  4. 4 http://www.jeffsarmiento.com/
  5. 5 http://www.paul-wallas.co.uk/
  6. 6 http://www.paul-wallas.co.uk/
  7. 7 http://www.mindnever.com/work/studentske_avanture/
  8. 8 http://www.mindnever.com/work/studentske_avanture/
  9. 9 http://www.mindnever.com/work/studentske_avanture/kontakt.html
  10. 10 http://www.mindnever.com/work/studentske_avanture/dokumentacija.html
  11. 11 http://www.omnia.ae/
  12. 12 http://www.omnia.ae/
  13. 13 http://www.omnia.ae/
  14. 14 http://www.omnia.ae/
  15. 15 http://www.kuefer.ch/
  16. 16 http://99designs.com
  17. 17 http://kevinjohngomez.com/
  18. 18 http://www.paul-wallas.co.uk/
  19. 19 http://www.jeffsarmiento.com/
  20. 20 http://pointlessramblings.com/
  21. 21 http://www.hotmeteor.com/
  22. 22 http://www.monkdevelopment.com/
  23. 23 http://www.jeuxdemaux.com/
  24. 24 http://www.catalyststudios.co.uk/
  25. 25 http://www.davebarnes.com/
  26. 26 http://www.catalyststudios.co.uk/
  27. 27 http://www.webdesignerwall.com/trends/2008-design-trends/
  28. 28 http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html
  29. 29 http://www.artfuldodgerny.com/
  30. 30 http://www.starbuckscoffeeathome.com/
  31. 31 http://www.jeffsarmiento.com/
  32. 32 http://sessions.collectiveidea.com/
  33. 33 http://www.ayushsaran.com/
  34. 34 http://www.pizza-venetia.ro/
  35. 35 http://www.pizza-venetia.ro/
  36. 36 http://www.toucouleur.fr/
  37. 37 http://www.prowebdesign.hu/
  38. 38 http://www.omnia.ae/
  39. 39 http://www.toucouleur.fr/
  40. 40 http://li.pixelmind.net/
  41. 41 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
  42. 42 http://www.jeffsarmiento.com/
  43. 43 http://www.hebatec.de/
  44. 44 http://www.anomalyd.com/
  45. 45 http://www.dairien.com/
  46. 46 http://www.craigwickersham.com/
  47. 47 http://www.kylehaskins.com/
  48. 48 http://spring.tnvacation.com/
  49. 49 http://www.kuefer.ch/
  50. 50 http://www.aespec.co.uk/home/
  51. 51 http://li.pixelmind.net/
  52. 52 http://li.pixelmind.net/
  53. 53 http://www.twentytwentyone.com/
  54. 54 http://www.coldplay.com/song.html
  55. 55 http://www.starbuckscoffeeathome.com/
  56. 56 http://www.shawnjohnston.ca/
  57. 57 http://www.davebarnes.com/
  58. 58 http://www.hebatec.de/
  59. 59 http://www.theseen.biz/
  60. 60 http://pointlessramblings.com/
  61. 61 http://www.catalyststudios.co.uk/
  62. 62 http://www.aa-rf.co.uk/
  63. 63 http://driixart.com/
  64. 64 http://www.carlkrull.dk/
  65. 65 http://www.prowebdesign.hu/
  66. 66 http://www.sarahray.co.uk/
  67. 67 http://www.le-telier.ch/index.html
  68. 68 http://www.njrebel.com/
  69. 69 http://www.omnia.ae/
  70. 70 http://www.toucouleur.fr/
  71. 71 http://www.asifabih.com/
  72. 72 http://www.njrebel.com/
  73. 73 http://great-design.blogspot.com/
  74. 74 http://www.artfuldodgerny.com/
  75. 75 http://mixtape.exopolis.com/
  76. 76 http://www.busboysandpoets.com/
  77. 77 http://www.foto.marcol.art.pl/
  78. 78 http://rames.blogspot.com/
  79. 79 http://www.adventurehere.com/
  80. 80 http://www.timeforcake.com/
  81. 81 http://www.gingerbeards.com/

↑ Back to top Tweet itShare on Facebook

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

    Perfect web sites :)

    Always a good inspiration way

  2. 2

    Good stuff! =)

  3. 3

    Clemson Donnatucci

    June 18, 2008 9:32 am

    Good stuff.

  4. 4

    Great stuff as always!

    Would love to do that kinda thing to my sites, but my handwriting is crap.. :-)

  5. 5

    very nice! n_n

  6. 6

    Really nice showcase! Great for inspiration

    I noticed a small error (above the omnia.ae rss image): “Reason: the design element appears to be too artistic and is “, the last word seems to be omitted.

  7. 7

    Wow! I just realize that personally designed stuffs would have a unique effect. But i think the more meticulous it is, the more unique, the more time needed to finish those designs.

    Another factor that can be considered is, it would be difficult to change from time to time: it can be but another great amount of time would be needed.

  8. 8

    awesome stuff..

  9. 9

    Vitaly Friedman & Sven Lennartz

    June 18, 2008 10:07 am

    @Fabian: thanks, fixed.

  10. 10

    One of the things much forgotten is an alternative for the stylish menu images or elements.
    Try some sites with images turned off.
    Example: http://li.pixelmind.net/ where did the nav go without the images?

    Beauty should be accessible too.


  11. 11

    incredible designs!!!!

  12. 12


    Thats an even better example of a site that doesn’t work with images turned off or css turned off even if it looks nice it’s bad practice.

  13. 13

    Nice Article. Lots of great ideas.

  14. 14

    Isn’t the background of my website hand drew enough ?
    Here : La Ronde des Fromages

  15. 15

    Amazing keep it up guys.

  16. 16

    I really like how there is a focus on not just the website but the details these designers have gone to the trouble to perfect!

    Great stuff, keep it up

  17. 17

    I visited a website that had one cool hand made background. look http://www.wanderlima.com

  18. 18

    Sorry, I really like your site and visit it every day, but the ad you have on this page is the worst I have ever heared. Pls make sure you wont get ads with such a crazy sound and without the possibility to stop it other then trun off the speakers.

    This kind os stuff shouldnt be on any site, so they can learn to make some clever banners rather than this noisy trash.

    Thanks and keep on the good work

  19. 19

    Fantastic guys. Would live to see some new templates that use these styles. Thank you

  20. 20

    great stuff.
    anyway, just installed firefox 3. then the headers cannot be read. it shows random unicodes.
    anyone know why?

  21. 21

    Same problem here

  22. 22

    i’d check out sinisterbutsweet.com for full on drawn loveliness.

  23. 23
  24. 24

    nice list.

    love the aespec-design.

  25. 25

    I like it. Es zeigt mal wieder was alles möglich ist. Ein Feld zum Toben. Usabilitiy hin oder her – dass brauchen wir.
    Vielen Dank für Eure, mal wieder ausführliche Recherche. Inspiration pur.

  26. 26

    sehr inspirierend – dankeschön für die vielen schönen beispiele. like it very much!

  27. 27

    an old, awardwinning website. hand-drawing in flash :)

  28. 28

    web design company

    June 19, 2008 12:51 am

    This post presents fresh examples of hand-drawing style in modern web design.

  29. 29

    Really nice designs :)

  30. 30

    We used hand drawn illustration extensively on the new version of our website.


    Nice to be in fashion for a change.

  31. 31

    Just finished a site in a very similar vein for the dress designer Alexandra Faro that uses her handwriting, sketches, doodles etc and scanned elements from her studio…

  32. 32

    Markus Koljonen

    June 19, 2008 2:20 am

    Awesome, very inspiring. When using solutions that are potentially harmful to usability, legibility and clarity, the design should follow the function and have a defined meaning. The examples illustrate (!) this very well.

  33. 33

    great stuff!

  34. 34

    the site that goes to pointlessramblings.com uses a very popular photshop brush in the header.

  35. 35


    Please keep showcases coming!

  36. 36

    I love this style!!!! beautiful !!!!!!!!!!!

  37. 37

    Wow.. Some of these design look great but from what I’ve seen… if you disable the images you can’t navigate some of them, the page loads entirely too slow and some are just way too busy.

    The look is great but as you said in this article… hopefully people won’t forget usability.

  38. 38

    Thanks Smashing!

    I don’t love the script font on Paul Wallas’ header. I think in this case he actually would have done better to use his own handwriting, or at least the same script font.

    Why? He’s using a piece of ripped out paper as his background. But you would never see someone print on sketchbook paper, it just looks off.

    Great post though, thanks again!

  39. 39

    Good choice!!! :)

  40. 40

    love it!

  41. 41

    Nethanel Kalish

    June 19, 2008 1:05 pm

    That’s greate!!!!!!!!!!!!!!!!!!!!!!!!1

  42. 42

    Suprised this one didn’t make it into the list.

  43. 43

    Thanks for this great post. Though I was kinda surprised by the lack of Bearskin Rug, one of my favorite blogs by the very talented illustrator Kevin Cornell. His site is filled with wonderful, hand-drawn details.

  44. 44

    Miracle studios -- web design company

    June 22, 2008 11:23 pm

    H mm i know hand written styles are creating a lot of buzz these days ……

    They are out of the block ……..

  45. 45

    As indicated, hand drawn flavors are definitely in fashion at the moment. My prediction is that this trend will be short lived. After just scrolling to the bottom of the post my eyes needed something simpler.

  46. 46

    Great summary, again. Thank you for your great work.


  47. 47

    neat article. ive been a huge fan of hand drawing on web sites even though im not much of an artist. i just threw together an interactive bio (radparvar.com/dave) with a really simple drawn element…really good response so far!

  48. 48

    It is worth to keep in mind, that those web-designers are either beginners, or complete amateurs, and some of them are totally neglecting the “Web Content Accessibility Guidelines”, most of the sites posted dose not reflect actual design practices, they are simply impractical.

    Furthermore their websites may stand out yes, but they are hard to navigate on, and finally some of them totally lack contrast. It must be todays answer to yesterdays websites doing All-Center-Aligned-Text, which was impractical as well.

    They also seam to neglect the importance of beeing able to change the font-size, and some of the sites are over-designing, which creates a lack of contrast in the text, which again drastically lowers the readability.

  49. 50

    Wonderful hand writting designs………………..

  50. 51

    I’d just like to point out that our site, the timeforcake site, though placed in the category of “too much hand drawing” on this page — only uses the handwritten font in the nav and the sidebar titles. Everything else is placed within a strict grid structure, is displayed in arial, and is quite clean.

    Additionally, the code does not disregard Accessibility very much. Not only is the code semantic (and it of course validates), but, as an example, the header/nav is done in Flash yet degrades gracefully and cleanly for those who do not have Flash or who have it turned off.

    Just wanted to share my thoughts. :)


↑ Back to top