Outlaw Design Blog

30+ Websites that feature a Hand-Drawn style in their design

In the past 5 years we’ve seen an increasing trend of designers using a hand drawn style on their websites. As designers have gotten better and better at designing and developing websites we expect more out of them — we expect them to look cleaner, we expect them to function better, and we expect them to look more artistic. Including these hand drawn elements is an easy way for web designers to make their interface more artistic and less technical. Whoever is viewing the site doesn’t want to see the source code behind it or think about the unending lines of 1’s and 0’s that their computer is translating to create the image on the screen; they want an aesthetically pleasing, easy to navigate web experience and the use of hand drawn text and illustration is one popular way of accomplishing this. Here are some great examples of the use of a hand drawn style in web design.

Hand drawn style as a background or supporting image

While the content of these sites is still presented in a very clean and relatively simple format, the visual field is dominated by a single illustrated image or by a series of hand drawn elements throughout the background. Here the designers are using their “art” to frame the content.

While the content in this site is still very clean and easy to navigate, the “doodles” along the borders and in the background make it feel like a sheet torn out of someone’s school notebook. This makes the site appeal to a younger, more creative audience.

This site uses a single clever illustration to form the background outside the content area.

Each page on this site features a different set of clever hand drawn illustrations that help to keep the reader engaged and reinforce the message of the content.

This site uses one very nice, very large hand drawn illustration throughout the site as a way to draw everything together.

This artwork should be familiar to many of us.

Hand drawn style on the “fake” desk

These are a few examples of a design that we’ve all seen before. Some are executed better than others.

Hand drawn images and notes litter the different elements on this desk.

This designer uses a hand written style and various sketches to turn this site into a virtual sketchbook.

Another example of the open notebook on the virtual desk.

Hand drawn style to present illustrations

Here are a few examples where a designer has created a website in the same style as the content they’re presenting. When this is done well, the interface of the website can really serve to accent and elevate the quality of the work being presented.

The majority of this site is presented in a hand drawn style which fits well with and presents the actual illustrations on the site.

This site is an excellent example of an artist developing his or her website in the same style as the rest of his or her work.

Another good example of an artist whose personal style blends into the style of his or her website.

Hand drawn style used sparingly

These sites are examples of designers using hand drawn elements sparingly. Sometimes all it takes is a few illustrated elements to “soften” the whole interface or to make an otherwise Corporate site a little more “human.”

On this particular site the hand drawn elements are rather sparse; however, they do help draw your eye to particular areas of the page.

This Italian website uses a hand drawn style solely for the navigation elements.

The content area of this site is very clean and free of clutter; however the designer uses various hand drawn elements to give the site a more human feel.

Although the majority of this site is very clean, the designer created a header full of hand drawn elements.

Great use of just a few little hand drawn elements to add a little bit of fun to a very clean site.

Hand drawn navigation frames a very clean and clear content area.

Here is an excellent example of a site with just a few hand drawn icons.

Great hand drawn header at the top of an otherwise very clean website.

Vespa breaks out a few hand drawn elements along with some great illustrations on this site.

This is a great example of how a few hand drawn highlights can lighten up what would be an otherwise overly “corporate” website.

Hand drawn style used NOT sparingly

Finally, here are some examples of the hand drawn style taken to the extreme. Some of these sites are completely illustrated while some combine hand drawn elements with collage and photography. These sites have helped designers to think outside of the box and to take web and interface design to the next level.

I’m still not totally sure who this site is for but it sure is fun to look at the drawings!

This whole site uses hand drawn “sketches” as a way to present the content.

This site uses a more illustrative hand drawn style throughout to present content and navigation

This porfolio site uses a hand drawn style throughout to emphasize creativity.

This site uses hand drawn elements in conjunction with illustration and collage. The various design elements on this site combine very well to give a creative free-flowing feel to the site. Being a site targeted to a college undergrad population the style suits the target audience nicely.

The use of hand drawn elements and heavy collage give this snowboarding site a very “edgy” feel.

Very nice. You can’t get much more hand drawn than this.

This almost feels like a grocery list. There’s even a nice hand drawn animation on the splash page.

On this site there is a very carefree hand drawn style that continues throughout the pieces in his portfolio as well.

Excellent use of hand drawn elements to help appeal to a younger target audience.

Various hand drawn elements help to present this designer’s diverse portfolio.

Great use of illustration to communicate a very difficult message.

Ranging from one small element on the page to filling up the entire background with “doodles” these websites do a great job of incorporating this hand drawn style to connect with users. This is just one trend that’s out there. As web design continues to grow and improve we’ll keep our eye out for other trends that begin to emerge. Leave a comment and let us know about any new trends that you see emerging in Web Design!