Web Design Trend: Hand-Drawn Style

Posted on by

There are plenty of trends in web design, from wooden to large background, and to barely there. The style featured in this post is the hand-drawn style. This, ‘sketchy’ style is used on many websites but still provides an original touch to any design.

In this post, I’ve collected a few of the greater hand-drawn designs on the web today, as well as resources and a few tips on how you can achieve this style for yourself.

Examples

Here are some of the great samples on the Internet today of hand-drawn, sketchy designs.

The best thing about hand-drawn style is that it isn’t necessarily always hand-drawn. Although drawing and scanning is one of the techniques most web designers will use, there are a number of other tools that can help you get the sketchy style, without being too sketchy yourself.

Here are some extra tools to include in your design for a hand-drawn look.

Fonts

If you’re going for the on-paper, real, and hand-drawn look, it’s probably not a good idea to have a fancy font that nobody could possibly hand-write.

Sketchy fonts are very common, and the right mixture of them can be beneficial to a lot of design styles, especially this one.

If you just do a search on a font website, you can get hundreds of these sketchy fonts for free. Try DaFont, 1001Fonts, and UrbanFonts for starters. Search terms on these websites like ‘sketchy’, ‘hand-written’, ‘hand-drawn’, ‘written’, etc. I’ve listed the direct pages of some handwritten fonts below on these various websites.

Icons

You can’t have a glossy, sleek, bright RSS icon when you have your sketchy style all over the rest of your webpage. Web 2.0 style icons are popular and easy to find, but don’t use them in a hand-drawn design. Here are a few sets that the designers have already drawn for you.

These sets have your basic RSS/Atom feed icons, email, chat bubble, calendar, and of course, all your social bookmarking icons. (Facebook, Del.icio.us, StumbleUpon, etc.)

Brushes

If you don’t want to draw your own design and scan it, the next method for most designers is to find some sketchy brushes and mix and match to get the look their going for. Here are some that I’ve found. Unfortunately, most of them are only in Photoshop because that’s just what professional designers who make these brushes use.

Tutorials

Here are some tutorials about getting a hand-drawn look in web design. Some are all done digitally, some are done on paper using different techniques.

Tips & Tricks

In order to successfully pull off a hand-drawn design, there are some basic guidelines you should follow. Here are a few tips to make a good looking sketchy design.

  • The overall layout of the content area, navigation bar, header, etc. should be fairly basic and grid-like. The sketchy images used will create enough ‘craziness’ in the layout. These areas should also be nicely sized, and allow a nice amount of margin and padding space so the layout doesn’t become clustered.
  • Be careful about what kind of website you use a sketchy layout. The hand-drawn theme provides a style that is more personal and informal. You should only use a sketchy style in a personal site or blog, design portfolio, or for a business selling something crafty and sketchy itself. The sketchy design does not go well with say a hosting company, where the design should look more professional and sleek.
  • The main part of any sketchy design are the images themselves. It is important to remember this, and images should be used more in a hand-drawn design than in another type. Don’t think just about the header or background in a hand-drawn design. Also provide sketchy looking images for icons, borders, the navigation, <hr> line breaks, etc. Remember, you want the design to look as if you wrote your entire website on paper.
  • When you have to finally use a web-based font instead of an image to write something, don’t use clean fonts. You’ll want to use something like Georgia or Bookman, rather than Verdana, Tahoma, and Arial.