• Tweet
• Buffer
• Pin It
•  37

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.

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.