× Terms of Use Privacy Policy

Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

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

Materials:

  • 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.

Your email address will not be published.

3 comments

  1. Helen Replied

    Love the clear simple instructions and screenshots. I can do this!

  2. kelly thompson Replied

    this is cool and I think I will try it!

  3. annie Replied

    Love this hand! Love hand drawn elements! xoxo

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.