Napkin Sketches for

If my mom had told me making money would be this fun, I’d have gone to check with my dad. recently hired me to create some napkin sketch style artwork for his sales/support process.

The Sketches

The sketches were created first with good ol’ pencil and paper and later redrawn in Illustrator. The final versions shown here represent the phases that any company goes through between its formation and its back end support structure:

  1. Start-up
  2. Sales
  3. Service
  4. Support

Sketches like these are a great way to show your customers what your business is all about. They can also, in short order, show your site visitors how to get around, how your process works, where step one is, etc.

What’s the benefit of these hand-drawn icons?

Before I answer that, let’s have a look at the web. The whole thing. What is it? Primarily and simply, it’s just a visual medium for getting your point across. It being a visual medium, it’s one that your visitors scan. Meaning their eyes go from headline to sub-heading, to an image, to bold text, etc.

That’s not news, and it’s why people have been generally getting better at typography, why images are more and more common in web pages and so forth.

But the funny thing, the web is getting very polished now. On the web, corners are always perfectly square or perfectly round. Circles are perfect circles. Precise grid systems are more and more evident. It’s all just so squeaky clean now which isn’t a bad thing. It’s just ordinary and anything ordinary isn’t grabbing as much attention as it can.

Wake up the web!

The solution to a polished (and maybe slightly stagnant) website is to go the other route and give your visitors something different to look at. What’s different on the web nowadays? Wavy lines, sketches, imperfect fills and gradients, hand-writing, pencil strokes.

Try this on for size:

I mean, look how slick that is. In all its simplicity, that icon just looks awesome. As an icon it’s interesting, it’s cute, it’s well-behaved…if I had a daughter I’d let her date that little icon for sure. Or his friend who looks like this:

He’s just as cool, although a tad on the heavy side. I’m sure you see the point, yes? These icons are perfect for your scanning readers.

Now what?

A little while ago, we at Charfish wrote a post about breathing. Now, just a few short months later, everyone’s doing it. I have no doubt that something similar is going to happen now that we’ve unwrapped the genius of napkin sketches.

Lest you be left behind in the new race to feature old-world, hand-crafted iconography on your site, you should probably write me immediately. Let me know what kind of drawings I can do for you!


Subscribe to the Charfish Design Newsletter and get more design-related goodness than you can shake a stick at!


Charlie Pabst is a guitar-wielding designer, a sharp-shooting writer, and a tell-it-like-it-is ever-kid. He is also not afraid of hyphens.

He is the founder of Charfish Design and Ignite Living.

You can read more about him here. And you should definitely follow him on Twitter.

9 Responses to “Napkin Sketches for”

  1. Charlie

    Stephen –

    Yeah, I’m reading it now. The idea for these sketches came to my client via Dan’s book. It’s a great read and is full of excellent graphics.

    To the rest of ye: if you want some tips on making effective Powerpoint presentations or how to use a whiteboard effectively, read Dan’s book.

  2. Charlie,

    Very, very nice “sketches.” I’m a huge fan of hand-work. This really has a nice feel, while still being clean enough for Internet use.

    I haven’t read The Back of the Napkin. Off to check it out now.

    Great post!



  3. Charlie

    Kelly –

    I guess you’re right putting “sketches” in quotes, as the finished versions are a little too polished.

    Boy, but you should have seen the actual pencil versions I did. Eek.

    I’m a huge fan of hand-work as well, and am actually toying with an idea of creating a whole WP theme that is “hand drawn.” Headlines that appear to be pencil, sketchy imperfect icons as in this post, etc. I don’t actually know if it can be done…at least not on a full-scale open-to-the-public sort of way. I mean, would I have to redraw new headlines for everyone who used the theme? Anyway…I’m thinking on it.

    Thanks for the comment! And thanks for involuntarily voting for my “sketchy” theme idea.

  4. Charlie,

    The first time I read the post in my email I didn’t see the “Illustrator” part, so I actually came over to ask , “yeah, but how’d you get it so clean?” Then I re-read before commenting, thus the quotation marks. They’re just the right amount of polished, though. Not too much.

    I like the sketchy theme idea. You could choose a nice sketchy font like Alcira for the headlines only, to keep from having to draw every headline? (Alcira is a bit hard to read but you get the point.) Or maybe do the whole sketchy theme but contrast with a really crisp headline? Hmm.

    There, now I’ve voted voluntarily. 🙂

    Until later,


  5. Charlie

    Kelly –

    Ooh! You’re now on my “insider list.” Anyone who introduces me to new fonts instantly becomes a member without paying the fee.

    I have a serious problem with fonts. If they were people, I’d have been arrested long ago for stalking. Can’t get enough, and Alcira, believe it or not, is new to me as of your post. Thanks for the link!

  6. Charlie,

    Get myfonts’ email newsletters. They have a couple of different ones. It won’t cure the addiction, but it does soothe the savage beast. I think does one, too.

    I have a whole “stalk list” of fonts I want bookmarked. Some ladies wait until they get a good payday and run to get shoes; I buy a new typeface or two. Well, that and champagne… 🙂

    Hehe, the insider list. I like that.

    Until later,


  7. Charlie,

    Great to see that you have run with the idea of sketches. I have received comments from others regarding the sketches on my website. As always, I refer you as “the man”!



Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Subscribe to the Charfish Design Newsletter and get more design-related goodness than you can shake a stick at!

POWERED BY: WordPressBluehost