Hand-Drawing Style In Modern Web Design – Volume 2

Advertisement

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?

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

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.

Screenshot3

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

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.

Screenshot5

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!

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.

Screenshot9

Hand-Writing10

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

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

Screenshot15

Screenshot16

Hand-Writing Screenshot17

Headers

Hand-Writing Screenshot18

Hand-Writing Screenshot19

Hand-Writing Screenshot20

2. Single hand-drawn design elements

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

Hand-Writing Screenshot21

Hand-Writing Screenshot22

RSS-feeds

Screenshot23

Screenshot24

Input fields

Screenshot25
Newsletter Box

Screenshot26
Search box

Illustration

Hand-Writing Screenshot27

Hand-Writing Screenshot28

Preloaders

Screenshot29

Hand-Writing Screenshot30

Header

Hand-Writing Screenshot31

Hand-Writing Screenshot32

Hand-Writing Screenshot33

Hand-Writing Screenshot34

Hand-Writing Screenshot35

Screenshot36

Background image

Screenshot37

Hand-Writing Screenshot38

Hand-Writing Screenshot39

3. Hand-drawing in navigation

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.

Screenshot40
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

Screenshot44
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.

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.

Screenshot48

Screenshot49

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.

Screenshot51
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.

Screenshot53
Icons, navigation and products in an online-shop

Screenshot54
Coldplay offers some free downloads

Hand-Writing Screenshot55
Flash-based

Screenshot56

Screenshot57
Beware: Flash-based music player starts automatically

Screenshot58

Hand-Writing Screenshot59

Screenshot60

Screenshot61
This is a pretty hand-drawn sidebar!

Screenshot62

Screenshot63

Screenshot64

Screenshot65

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

Screenshot67
Grégory Dourdes with the same approach.

5. Hand-drawing used heavily

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

Screenshot69
Probably the largest hand-drawn design out there

Screenshot70

Screenshot71
Hand-drawn site layout

Screenshot72

Screenshot73
Creative chaos at its best

Screenshot74

Screenshot75

Screenshot76

Screenshot77

Screenshot78

Screenshot79

Screenshot80

Screenshot81

Footnotes

  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

Co-Founder and former CEO of Smashing Magazine. Sven is now writing Science Fiction Stories and looking for a publisher ...

Advertisement
  1. 1

    Hi, i found another cool hand draw website, take a look http://www.lowmorale.co.uk/

    0
  2. 52

    Ya I see in many sites handdrawing style designs in modern designing sites its look differ and good.
    If i give my personal opinion is that is different from others and looking great.

    0
  3. 103

    don’t like em, can barely read them

    0
  4. 154

    hehe ..realy nise

    0
  5. 205

    what an inspiration!

    0
  6. 256

    oh my god its nice

    0
  7. 307

    Perfect design! =)

    0
  8. 358

    very useful ..thanks

    0
  9. 409

    Hmmm, many of these are very nice, though even on broadband I can’t get all of them to load : ) Some are just huge.

    Does anyone else notice that there seems to be a creative web art explosion in the Eastern block countries (I can’t read them so dunno which languages those are, look like Polish etc)? Maybe Smashed just runs in that direction but Eastern Europe might be the new “design hotbed” (for western clients). Many of them are so very beautiful.

    0
  10. 460

    Pavan Kumar Somu

    July 6, 2009 4:31 am

    its really amazing

    0
  11. 511

    Loving these inspirations blog posts!

    Please include http://www.kingofspain.co.uk/ and http://muchuumusic.com, both hand drawn and looking great!

    0
  12. 562

    Nice Articles. I used to see their designs. I think it’s very unique. :)

    0
  13. 613

    while i was trying to design my website freelancing-on-net.com I was looking for hand drawing ideas and I came across this post. its greatly inspirational and very well researched. I then decided that if I employ hand drawings then I will be up against a lot of talents and finally scraped the idea.

    0
  14. 664

    An awesome post, liked the way things are categorized, would like to suggest a page that i really liked while surfing a magazine site, heritage-india.com/magazineAndcontents.php?activeTab=4

    0
  15. 715

    That’s a cool blog :)
    I thought the hand-drawn stuff were rare and only few creative people use it to show off or be different… but after seeing this blog… it seems I am the one left out :P hehe
    Thanx for such a nice post :)

    0
  16. 766

    fairly useful !!! THX !!!

    0
  17. 868

    Thanks for the inspiration! I used to do a lot more hand drawn work in the past, and this makes me think I should bring it back.

    0

↑ Back to top