21 Examples of Illustration and Hand Drawn Elements in Web Design

By / Nov 7, 2011 / Inspiration
shares

There are a lot of ways to give a website some personality, depth and style, and certainly illustration and hand drawn elements are a good example. From small background elements to complete illustrated websites, from illustrated icons to hand drawn typography, today we will show you some examples of websites using a different approach to spice up their layout. And if you consider that adding illustrated elements can make your page to messy, think twice and check some of the examples we have here. There are a lot of good ways to give your project a nice touch if you use the right amount of illustrative elements, so check out and enjoy.

eventipity

Inspiring Illustration and Hand Drawn Elements

Hello Studios

Inspiring Illustration and Hand Drawn Elements

The WP Co

Inspiring Illustration and Hand Drawn Elements

Big Daddy Weave

Inspiring Illustration and Hand Drawn Elements

palantir.net

Inspiring Illustration and Hand Drawn Elements

Cloudberry

Inspiring Illustration and Hand Drawn Elements

Woolly Robot

Inspiring Illustration and Hand Drawn Elements

inkling

Inspiring Illustration and Hand Drawn Elements

Ana Majik

Inspiring Illustration and Hand Drawn Elements

Tao Community

Inspiring Illustration and Hand Drawn Elements

yoke

Inspiring Illustration and Hand Drawn Elements

Vin & Societe

Inspiring Illustration and Hand Drawn Elements

Lounge

Inspiring Illustration and Hand Drawn Elements

2pxBorder

Inspiring Illustration and Hand Drawn Elements

Booki.sh

Inspiring Illustration and Hand Drawn Elements

Go Live

Inspiring Illustration and Hand Drawn Elements

City Dog

Inspiring Illustration and Hand Drawn Elements

Allure Graphic Design

Inspiring Illustration and Hand Drawn Elements

CL Designz

Inspiring Illustration and Hand Drawn Elements

Sunday Best Designs

Inspiring Illustration and Hand Drawn Elements

Code Slingers Challenge

Inspiring Illustration and Hand Drawn Elements

Source:

The Best Designs
unmatchedstyle
awwwards

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

13 Comments

  1. aledesign.it
    November 7, 2011

    Drawings like in the site by “Lounge” are my preferite. I hope in the future make a site with my hand drawings. This is a beautiful way make of art in the web. Thanks for sharing!

    Reply
  2. Web Design Fife
    November 7, 2011

    I love hand drawn art on websites as it gives a ‘unique’ ‘humain’ feel to them.
    As much as I am a fan of all things shiney & new looking you can not deny that hand drawn elements on websites give them a look that no computer generated graphic ever will!!

    Thanks for posting these inspiational examples.

    Robbie

    Reply
  3. Web Design Malaysia
    November 7, 2011

    Sunday Best Designs just gave us an inspiration on how we can build a tailor made suit online store! Thanks!

    Reply
  4. Houston SEO Company
    November 7, 2011

    Thanks for putting this list together for us. Using drawings in your web design is a great way to set your site apart from your competition. Great examples.

    Reply
  5. Orlando Application
    November 7, 2011

    Tao Community site stands out for me, altough i am not so sure about useablility, I would do extensive A/B testing between more “main stream” design and this to see how well the visitors finds things…

    Reply
  6. Web Design Florida
    November 8, 2011

    Hand drawn designs create a different effect and it looks very impressive, Nice Examples of hand drawn designs I like it very much

    Reply
  7. Sagar Ranpise
    November 8, 2011

    Nice Collection!

    I have also created a post on fresh and inspiring sites
    http://www.alldesignstuffs.com/2011/inspirational-websites-set-3-containing-fresh-and-latest-sites/

    I hope you like it!

    Reply
  8. Evan ‘OldWorld’ Skuthorpe
    November 8, 2011

    some lovely sites featured.

    Reply
  9. weekendpascher
    November 8, 2011

    Great collection !

    Reply
  10. Pratish
    November 11, 2011

    me like.
    me like a lot.

    Reply
  11. Swamykant
    November 11, 2011

    Great collection. GoLive site is superb

    Reply
  12. Daniele Proietti
    November 15, 2011

    Great collection! Thanks.

    Reply
  13. Sally Carns Gulde
    November 17, 2011

    Hey, my web designing cousin, santaclaradesign.com, just sent me this link. I designed the Big Daddy Weave CD package for Warner Bros. and they used all of my psd elements to make the site. I love it. I love what you web folks can do with our print stuff!

    And in case you’re wondering, to get that chalkboard effect, I typeset the words in Photoshop, printed it out and literally traced the printout using tracing paper using a pencil – making sure not to make it too perfect. This gave it a hand drawn feeling and texture. I then scanned that in and made it a channel in photoshop and added color to each element. Make sense?

    Reply

Leave a Reply