Technique for creating a hand drawn website style

We first got into the blogging world with our website blog “We Are not Freelancers“. The site is a combo of the “Ten Pixel Method” and hand drawn characters and letters.

hand drawn font

A lot of people who we have met say they wish they could create something similar but will not because they can’t draw.

We say anyone can draw if you use a simple technique.

David gives you a quick lesson on how to create a hand drawn website using the ‘don’t lift the pencil‘ technique.

Hand drawn technique video tip

Brought to you by: From-The-Couch

Supporting Elements

There are also few more hand drawn elements within the footer and header design.

hand drawn elements

Author of this post: David Perel

David Perel is the founder of South African web design company 'OBOX-Design'. He is also a co-host of the Web 2.0 Show 'From the Couch' and designer/author of the blog 'We Are not Freelancers'. David enjoys giving his opinion on anything happening on the web and is often not shy of speaking his mind online. See all posts by: David Perel

36 Comments (Leave a Comment)

  1. Imagination is more important than knowledge-Einstein.

    Reply
  2. YES! Great piece, keep up the terrific work. This is the type of information that should gain recognition for it’s craft.

    Reply
  3. This is a wonderful idea. I am sure many people will find this useful. Singapore Photography

    Reply
  4. This is a wonderful idea. I am sure many people will find this useful. Singapore Photography

    Reply
  5. I don’t comment on blogs too often, but I like this post and theme – just wanted you to know that!     
    Thanks! 
    Thank You Note Wording

    Reply
  6. what a stunning blog post about search engine optimization. I’m frankly quite startled that it hasn’t really been articulated before to such an extent.

    Reply
  7. Thank you so much, for the great post.!
    Here, I found a youtube video about watching tv online that I would like to share: international Tv channels Online.
    But seriously, amazing post and thanks allot !!
    i look ahead to your next post !

    Reply
  8. nice post, great work :)
    rockport texas´s last blog ..Rockport Texas Homes for Sale

    Reply
  9. I have numerous troubles with my web browser LYNX on your website. The chimpanzees are still in the page :-(.

    Reply
  10. I love hand drawn stuff. And you really have a nice and useful video here. These hand drawn websites really look awesome and I really hope that this trend will hold its own and is not going to be just a phase.

    Reply
  11. Great little video, this has inspired me to create a hand drawn website.

    Creare Web Design´s latest blog post..How to do rounded corners in CSS 3 video

    Reply
  12. Nice tutorial

    We did a similar thing for a free Wordpress template – it’s up on the Wordpress theme directory – http://wordpress.org/extend/themes/scribblings

    The font used is Pointy – love this font – gives it that scruffy “drawn with a biro” type look

    Reply
  13. nestleomega

    the video loads like snail…possible for a download link?

    Reply
  14. The hand drawn style has been very popular lately, and rightfully so – it can look awesome. The real matter will be to see how it stands the test of time. Is this going to be a phase, or will this trend hold its own? Only time will tell…

    Either way, nice post!

    Shay Howe´s latest blog post..Japanese Web Design

    Reply
  15. Hand drawings are everywhere and they look great on websites. Using hand drawn design elements gives a website a unique look and personality. Nice list you have here!

    Reply
  16. Hi,

    Very useful tips. I am learning web designing and graphics designing. I will help us. Thanks

    certblog´s latest blog post..Become a Successful Professional with MySQL Certification

    Reply
  17. Dunno why, but I have always imagined that hand drawing is something hard to do. Well, it doesnt look that way no more. Thanks for a nice tutorial ;]

    Reply
  18. It worked for me and it gives a familiar look.

    thinkflick´s latest blog post..Best Web 2.0 Graphics Generators

    Reply
  19. I love this look on a website. It gives it more of a personable look and feel.

    Reply
  20. I always wanted to create a website with a handrawn vibe.
    the designs looks very natural and very unique. great post!
    thanks for sharing this one out.

    Reply
  21. @Zach – Great stuff. I hope you come up with something awesome!

    @Srikanth – Glad you liked it!

    @Nic – Pleasure ;)

    Reply
  22. Nic

    Thank you so much! It’s great to see something simple and different.

    Reply
  23. Srikanth.Kavuri

    Hi, I am a 3d artist.This tutorial on line drawing was really great,
    a good start up to become an artist, it helped me to start drawing, I need a perspective drawing i hope i can get a video on this.
    Thank u
    How to download this video ?

    Reply
  24. I nice insight into another way of creating graphics for a web site. I am not a big fan of their type of drawing but, it does move away from what everyone else is doing. I’ll try to implement the technique into one of my future projects.

    Godserv´s latest blog post..Time Is Almost Up

    Reply
  25. Thanks for this! You’ve inspired me to dust off my Wacom and get to drawing. It makes line art a whole lot easier!

    Zach Dunn´s latest blog post..22 Well Done State Tourism Websites

    Reply

Leave a Reply

CommentLuv Enabled
Website Templates Wordpress Hosting

Monthly Archives

Design Shard Flickr Group

Mind the Body!ELIZABETH:::GothamCreate An Exciting 3D Composition Using Xara 3D and Photoshop -TutorialcastablastTron Legacy ver.3Tron Legacy ver.2O que rendeu mais (2009)Ausdruckslos | Die Kreativagentur aus BraunschweigAusdruckslos | Die Kreativagentur aus BraunschweigSearch For Infinity