Inspiration Served: Hand-Drawn Effects In Web Design

By   |  Stashed in Inspiration
24

Overview

I love the look of hand drawn effects in web design, and I don’t think I’m alone in this. I have no idea what gene that’s in us web geeks, but I’d say most of us have it.

With that in mind, I’ve compiled this list of the best inspirational sites, resources, freebies and tutorials that utilize hand-drawn effects. There is so much more available, but these are many of my faves. I hope you enjoy!

Inspirational Sites

These sites utilize hand drawn effects to just the right amount. They are fresh and original. That is what’s so great about this style, by it’s very nature, it’s unique.

happy-in-greenville

grow-interactive

we-are-not-freelances

web-designer-wall

satsu

unlimited-creativity

juno

getting-crazy

basmati-tree

paul-wallas

Freebies & Resources

You don’t always need a pencil and pad to make this style work. Sometimes a quick fix is utilizing free resources.

Free Hand Drawn Doodle Icon Set for Bloggers

spoon-graphics

45+ Most Wanted Beautiful Free Hand Drawn Fonts

naldz-graphics

Vector Freebie: Hand Drawn Wings

go-media-wings

120+ Free Hand-drawn Vector Arrows

think-design

Handycons: A Free Hand Drawn Social Media Icon Set

handycons

Hand Drawn Social Vector Set

phire-design

Tutorials

Alright, so now your inspired to create some of these effects, well here’s how.

Photoshop: Hand Drawn Design

web-designer-wall-tutorial

Technique For Creating A Hand Drawn Website Style

design-shard

How to: Make a Hand-Drawn Font

bittbox1

Create a Sketchy Hand-Drawn Camera Illustration in Illustrator

vector-tuts

Your Turn

I’d love to getting feedback; let me hear your thoughts. What do you think of this style? Are you tired of seeing it, or are you loving the uniqueness of it?

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • Dennis

    Coool! Great Post! Thank you

  • http://www.jankoatwarpspeed.com Janko

    Great roundup and thanks for including Handycons!

    Janko´s last post was… How to create Skype-like buttons using jQuery

  • http://brandingeye.com javier romero

    love these thanks! It’s nice to see the growing popularity of hand drawn art.
    Best,
    @javierjrdg

  • http://typegeek.blogspot.com Typegeek

    Honestly I haven’t seen much of them. I like it a lot and will have to check out these resources.

    Man, there is too much stuff out there.

    Typegeek´s last post was… My first thoughts with Thesis

  • http://www.psdfan.com Tom Ross

    Great roundup Andrew! I actually had a very similar post planned out, but I may not post it now :P

    Tom Ross´s last post was… Interview with Grant Friedman of ColorBurned

  • http://riseall.com Alison Lee cousland

    Thanks Andrew,
    You really have shown the variety and uniqueness that’s possible with hand drawn effects in web design. Your post has inspired my to try designing some myself from my own drawings now.

    Alison Lee cousland´s last post was… Global Verge Mailer * Travel * Buzzirk * Aqualife

  • http://www.myinkblog.com Andrew Houle

    @Janko Glad to include them :) They have such a cool style to them!

    @Tom Glad you liked the post. That’s funny I got to the idea before you. I think I recall a time I had a post idea that you posted about right before I got the chance :) Oh well, I say still post it, a couple of different perspectives are nice. Not to mention, it’s nearly impossible to write about a design topic that hasn’t been covered at least one other time. The main thing is that you add your own unique flare to it.

    @Alison Glad to hear it. Learning more about the technique has definitely perked my interest as well.

  • http://www.thinkdesignblog.com Nick Pagano

    Great roundup Andrew! Some awesome sites, and some very cool resources. Thanks for mentioning my arrows! Appreciate it :)

    Nick Pagano´s last post was… Free Vectors – 28 Halftone Vectors (Clean & Grunge Versions)

  • http://www.thinkdobecreate.com/ @5t3ph

    Hey! My website has lots of hand-drawn goodness too ;) Currently…redesign is coming soon!

    Good list though! Many of these same ones inspired mine!

  • http://www.blog.spoongraphics.co.uk Chris Spooner

    Fantastic roundup, I’m a big fan of the old hand drawn style.
    Thankyou for including the blogger icons, I hope they come in handy!

    Chris Spooner´s last post was… Twitter Background Design How-To and Best Practices

  • http://wirthdesign.com Kevin Wirth

    Very cool, makes me wanna try a layout using this style

  • http://www.gettingcrazy.info Fabio

    thanks for including my blog in this roundup, i am a great fan of this site and was very happy to be on the spot.
    cheers!

  • http://www.logodesignguru.com/A/Logo-design-Articles.asp Logo Design guru

    I love the hand drawn look. It has become so obsolete with all the new technology of today that it is so nice to see it brought back.

  • http://phiredesign.net AJ Troxell

    Thanks for adding my icon set to the list of other great designs and sites. Loving the ink on myInkBlog!

    AJ Troxell´s last post was… Hand Drawn Social Vector Set

  • http://www.1stwebdesigner.com Dainis Graveris

    loving hand-drawn style, social network vector set was new for me.:)

    Dainis Graveris´s last post was… 101 High Quality CSS And XHTML Free Templates And Layouts: Part 1

  • http://iniwoo.net T-Law

    It’s so useful and informational, big thanks ;)

    T-Law´s last post was… Graphic design inspiration: Video Games Fan Art

  • http://www.theroxor.com Kevin

    Some really nice websites and icons.

    Kevin´s last post was… Beautiful Game Covers

  • http://brushfire.wordpress.com Leo

    basmati tree is awesome … like this post.
    can’t imagine where you get all this stuff from :)

    Leo´s last post was… extremes Licht

  • http://10steps.sg/ Johnson Koh

    There is one more to add, http://kinetic.com.sg/ ;)

    Johnson Koh´s last post was… Create Powerball Effect for Movie Poster

  • http://activr.com hami

    i liked the post, its great to see such a nice work all over the web and the compilation make us love their work more and more..

    Keep it up, now following your blog … nice domain too :D

    You rock

    hami´s last post was… 50+ Search Engines to Search Files on Rapidshare

  • http://www.fatheads.co.uk fatheadsuk

    Hi, our site is an interesting blend of vector and hand drawn effect charecters! Currently in a redesign stage.

    Great list of samples, many thanks.

  • http://www.ronarts.com Ron Arts Web Design

    This post has described a great variety and creative use of hand drawn effects in web design. I t is awesome to see such an excellent work. Good job!!!!

  • http://www.holidaygermany.com Holiday Germany

    Hand design effects in web design looks good but make more difficult for designers to design a classy website but concept is unique. Thanks for sharing.

  • http://www.photolinkdesign.co.uk/ Brand Design Agency

    What a great collection you have put together here, we love the hand drawn effects in web design its both creative and visually attractive thanks for shraing.