Let me tell you a story…

At the end of 2007 I gave away a free ebook to my customers over at IgniteLiving.com, another site of mine. At the time, the site was only a couple months old and had exactly 17 RSS subscribers.

My plan was to offer a great ebook that would attract some visitors and possibly some business. So, I wrote the book and designed the hell out of it. I gave it a slick cover, nice fonts and typography, a cool color scheme and made it available for free download.

When the post went live, a whole lot of nothing happened. Which is sort of what you’d expect of a site with 17 subscribers. But within a few days the ebook had been download dozens and dozens of times and my RSS subscriber count was going out the roof.

Even better, and far more important, were the comments and emails that started coming in. Relationships were blossoming all over the place, and before I knew it I’d made fast friends with quite a lot of people. And as will happen anywhere real relationships are born, a few of those connections were very valuable and are providing income to this very day.

All of that from one 30-page ebook that I published almost two years ago to a handful of people.

Of course, I designed it myself so it didn’t cost me a dime, but even if I’d paid $500 for it, it would have been well worth the price. (Oh, and don’t worry…$500 is NOT what I charge to design a 30-page book

Now, let’s ask the obvious question. Would all that profit have happened, would all those relationships have been made if my ebook had been some hideous beast? No way in the furthest reaches of the icy plains of Hell.

So, read this and remember it well:

Every single thing you produce right now, whether it’s an ebook or something else, free or not, IS a pre-launch to any future project you have.

The quality of what you do and produce right now is a barometer and compelling factor (good or bad) for anything you sell down the road.

So, yes, be productive and be proactive. Get your stuff out there, but make it good, because people DO judge books by their covers.

And if you need help making it good, contact me and I’ll certainly help you out. You will probably get famous and end up on TV.

ThreeGears.com 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!

The Reinvention Institute is run by Pamela Mitchell, its CEO and Chief Vision Officer. (Is that not the coolest title ever? Chief Vision Officer…love it.) Pamela is an amazing woman and was a total blast to work with. And to say she is a consummate professional is sort of like saying Winston Churchill was an alright orator.

Pamela has the Midas touch. Every email and phone call we had was a reminder that some people cannot help being very very good at what they do. That’s Pamela.

As to the site, what you see is pretty similar to what the site was before I got to it. It was a little older looking, a bit musty and shop worn but still a great site. Pamela wanted some new boots for it so we gave it some new boots. It turned out very nicely, with a TON of luscious white space, a great color scheme and some nice iconic navigation.

Could say more, but that would be beating it to death. Just have a look at the screenshot or, better yet, head over to The Institute to check it out. And if you need to reinvent yourself, your business or your career…that’s the place to do it. Tell Pamela I sent you. She’ll probably say, “Who?”

I recently got the opportunity and honor to work with Leo Babauta, the creator of the ultra-successful ZenHabits blog.

Recently Leo released a new blog that is already well on its way to becoming ultra-successful in its own right. His new blog, WritetoDone.com, is a great place to pick up what Leo has to teach about the art and craft of writing.

Thanks to a great pal and erstwhile client of mine, Stephen Smith, Leo and I were introduced to each other. At the time, WritetoDone hadn’t been unveiled yet, and Leo wanted to give it some more oomph and branding before letting the public know about it. I showed him some samples of my work, Leo gave me the thumbs-up and minutes later I was working on his new header and logo.

Being a fairly simple and Zen fellow himself, Leo’s request was for something simple and not too over the top. As a matter of fact, at the time he wasn’t even sure he wanted an iconic logo or just some slick text.

Text style exploration

In true David Airey style (and a big thanks to David for putting so much effort and education into his posts), I’m going to walk you through the process of designing the logo and header for Leo.

I started with the fonts, just to give Leo some things to check out while I worked on the logo. I figured a blog about writing would utilize one of the following font styles:

1. Hand-writing
2. Typewriter-ish (but not too typewriter-ish, like the courier of Copyblogger)

These are some of the fonts I played with for the hand-written style:

And here are some I found for the more “type-ish” style:

Such hand-writing and type-style fonts are a little too busy visually, and doing all of “WritetoDone” in such a font would be pretty goofy.

Sidenote: One rule I like to follow in design is that too much eye-candy or too much “busy-ness” gives the eye nothing to focus on. It’s like a guitar player who always plays a million notes a second. After a while it just becomes a monotonous stream with no dynamics. Similarly with graphic design, things just become a mess when there’s too much going on.

A better route, or at least the one I like to take, is to be subtle and minimal for most of the design. Then you break out of the box in one spot with some color or crazy font. That spot then becomes visually interesting and gives the piece a certain dynamic, but the design as a whole still remains lightweight and easy to digest.

I’m all about such subtlety, and luckily so is Leo, so we wanted just a splash of these specialized fonts in the logo. The rest could be in a more commonplace font. Gill Sans is a very stable and sturdy font, so I went with that. In bold, which is even more sturdy. Plus I love Gill Sans. If Gill Sans was a woman, she would certainly be my wife.

One of the great things about the title “WritetoDone,” and any other time you get to work with little auxiliary words like “to” and “the,” is that you can use them for the dynamics we’ve been talking about. In this case, the dynamic spiciness came from a font called James Fajardo.

Here are some samples of how the combo of Gill Sans Bold and James Fajardo looked:

Leo and I both liked the subtle use of color and out of the ordinary font, so that was it for the title exploration.

Logo exploration

Again, this being a writing blog, I produced logos with the following subject matter:

1. Sheets of paper
2. A feather writing quill
3. A book/notebook

Each logo sample appears next to fonts, which helps the client visualize them in context instead of just floating alone in space. I always try to send as much context as possible. Actually, though you don’t see them here, I was sending Leo these logo samples placed atop screenshots of his site.

At this point, we were still exploring font styles, so here are the logos I produced alongside some font choices:

Sheets of paper logos

I really liked that top one but it was a little amorphous and nondescript. (I don’t know what those words mean but it makes my parents proud when I say stuff like that.)

Feather Quill logos

I am still completely and totally in love with the top and bottom samples above. Especially the orange paper with the feather. I’m determined to use it somewhere so…keep your eyes open and maybe it’ll show up on the web someday.

Book/notebook logos

Leo liked the final, more photo-realistic notebook on the bottom.

Final Logo and Header

The combo of the Gill Sans Bold/James Fajardo fonts, and the notebook/pen icon worked pretty well.

Except for one thing. Having all the text and the icon in one horizontal line stretched it out too much, pushing it into the tagline (which isn’t shown here, but can be seen on the site). We stacked the words to give it some punch and break it apart from the tagline. It worked perfectly and what you see below is the final version of the WritetoDone header (minus the tagline, which was a slam dunk as we just font-matched the Gill Sans Bold).

To see the full logo/header in place, and to read Leo’s brilliant work, head over to WritetoDone and check it out.

I’d also like to give a public thanks to Stephen Smith of HDBizBlog for getting Leo and I in touch with each other.

He earned a 10% commission for his referral, which I should mention is standard policy here at Charfish Design. Anyone, and I mean any man, woman, child or amoeba who refers work my way earns 10% of the final project cost. It’s free money for you, so send your friends and family here and let me know.

On the other hand, if you’ve got no friends or family and would just like to keep coming back here to read posts, be sure to Subscribe Now!

First, it’s unfortunate but I lost all of my napkin sketches for this, which I love show for process. Needless to say, most of the early versions were a “W” and a “G” in various layouts. I’m sure you could imagine some. Put a W next to a G. Put a W on top of a G. Put a W sort of behind a G. Now play with colors.

It was no good.

The main problem with these W/G configurations was that they deemphasized the “THE Write Guy” part of the site. The client wanted the branding to lead away from “how-to write” and more towards him as the writer.

Because I love type fonts and typography in general, I decided to keep the W but then have an actual guy standing there, instead of some stupid insipid G. The letter G sucks anyway. Everyone knows that.

We didn’t want to go the route of actually having his own body be part of the logo, so I started looking through stock photos. Right away I found a guy leaning and knew he’d be perfect to lean up against the W. He’s cool, calm, collected and standing at a jaunty pose. And when I made a silhouette out of the photo he became mysterious as well. I added the reflection and shadow and ten minutes later it was finished.

The client loved the idea and it turned out to be, at this point, my favorite logo I’ve ever done. Here it is…

With a name like Ignite Living I figured right off the bat that the design would be split in two parts. One would be more of a graphical logo utilizing fire in some way, and the other would be “Ignite Living” written in full. Most of the design time was spent trying to find a font that would look good in both situations. I finally settled on Baskerville Semibold.

The first version came out like this:

For some reason I hated it. I could see it had potential but it wasn’t sitting right with me. For the life of me I couldn’t figure out what was wrong.

Then I remembered something Collis said in his tutorial about the redesign of FreelanceSwitch. In that tutorial he talks a bit about the depth that even really subtle gradients can give you. In looking at the preliminary version of the logo you can see there are no gradients.

That’s the problem. It looks flat and amateurish to me. I took Collis’ advice and gave gradients to the white text as well as the background. They’re subtle for sure, but look at the difference in the final version of the logo. I also added a vertical line, just for some visual interest and to separate the two logo bits. Here’s how it came out.

Much better! The gradients made all the difference in the world and I ended up loving the logo just because of those changes.

What do you think?

And besides it was a perfectly mild mid-afternoon when my email inbox said “PING!” I opened the message, read it and dollar signs appeared in both of my eyes. Someone, we’ll call him “Jake”, wanted a new logo and I was just the man for it.

And thus begun one of my toughest and most time-consuming cases ever. The job was simple: design a logo for this gentleman’s SEO company. That’s about all I knew when I accepted the project and by the end, I didn’t know much more than that.

Aloofness is a hard client to please

I gave the gent the ordinary rundown on how I work, then did my preliminary interview. It didn’t go well, what with him seeming secretive and uncaring throughout. It was awkward from the outset. I wasn’t feeling any love and the hairs on my neck were standing on end. But the dollar signs were still in my eyes flashing, and I can be a slave.

The interview was nearing an end. One last question and we’d call it a night afternoon. The last question is the doozy that I throw at all my clients now. But this particular time, I should have trusted my instincts and let it go. Instead, the last question went down like this:

Me: “What’s the purpose of the logo?”

Him: “What do you mean?”

Me: “I mean, what’s the purpose of it?”

Him: “Purpose?”

Me: “Yes. You need a logo for a reason. What reason?”

Him: “Well, everyone has a logo.”

Me: “True, and they should. But I’m trying to find out what purpose you have for your logo? Is it to make the company look interesting, or the product itself? Is it supposed to just be interesting as a graphic element, or should it have deep meaning for the company? That’s what I’m driving at. What do you want the logo to do?”

Him: “Well…I have an SEO company…”

Me: “…yes?”

Him: “It should have a logo.”

Me: “Right…And?”

Him: “Uh…and I want it to look cool.”

Me: *sigh* “Fair enough. I specialize in cool.”

I took the project against my better judgement. It was a slam-dunk. At least that’s what I told myself. A couple hours, a couple hundred bucks. Fair deal.

But the couple hours turned into a couple days turned into a week. The lack of clarity and care from the interview continued and I learned that Aloofness is a hard client to please.

By week’s end I’d had enough, and thought maybe I’d take up smoking after all. But, luckily the client liked the latest rendition of the logo. Frankly I was pretty keen on it too. With not a little nostalgia, I turned it over to Jake who said “thanks.” He didn’t even bother to capitalize.

It was time for the money to change hands, so I sent Jake a PayPal invoice. He paid me promptly and quite handsomely.

That’d be a nice silver lining, wouldn’t it? Too bad it’s a complete lie. Jake didn’t pay. No money, and no Jake. He disappeared and I never heard another word.

I did learn a valuable lesson. Two actually.

1. Trust your instincts
2. Get some connections inside the Mafia

Finis