Quick & Dirty Designs: How to add hand drawn elements to your website

As a designer I love me a site with great architecture, strong grid structure, clean lines, and striking contrast.

White and black all over is classic, obviously, but there’s nothing like the excitement of something a little bit unexpected. Creating and incorporating a hand-drawn element into your design can introduce that perfect amount of surprise into your otherwise starkly designed site. And it doesn’t have to take forever!

Some great ways to incorporate hand-drawn elements into your next website design:

You could bring in hand-drawn elements for smaller details like these checkboxes used on an unordered list:

You can express great emotion with hand drawn lettering like the delightful and playfun lettering in “Eat Cheesecake”:

Or set the tone for your entire website with a large illustrated image like the beautiful one Vimeo uses on their homepage:

Now try this:

The quick and dirty way to incorporate hand-drawn elements in your site


  • Pencil

  • Paper

  • Sharpie/dark pen

  • Camera phone

  • Adobe Photoshop

How to:

  1. 1. Do a little bit of research and decide what you are going to do. I like to look on google and find images that inspire me.

  2. 2. Sketch what you want, try drawing it a few times, a few different ways.

  3. 3. When you are ready, do a final draft with your pencil.

  4. 4. Outline your pencil sketch with your sharpie (or other thick black pen).

  5. 5. Take a picture with your phone.

  6. 6. Email yourself the picture.

  7. 7. Move your photo into Photoshop.

  8. 8. Using select > color range remove the white background.

  9. 9. Now work into your website design.