Let me start by saying that I don’t have a formal design background. I have a couple of degrees from an engineering university and I think I can generally recognize good design.
My sister, Jacqui, does have a formal design background and recently graduated from Parsons The New School for Design (with Top Honors!). I attended her graduation ceremony in May and she now has a job on Madison Avenue in NYC. My grandfather worked on Madison Avenue for many years as a graphic artist as well. I, however, have never worked on Madison Avenue or earned a design degree. I’m hoping I have the art gene.
That should be enough of a disclaimer. The bottom line? I’ve got this website, and it needed a logo… Who you gonna call?
OK, so I didn’t call the Ghostbusters, that’s absurd. What I did do was think about some aspects of software engineering that I love. And then I called my sister and a few other capable, trained, and experienced design friends for help critiquing my own designs.
A critical part of being a great software engineer, or a great engineer in any discipline, is attention to detail. Following the spirit of software craftsmanship, I was in search of a professional design which expressed my attention to detail and passion for quality. After considering many details surrounding the writing of software (significant whitespace syntax, the Model M keyboard, recursive acronyms, etc.) I settled on perhaps an even more minute detail: font porn.
I’ve been happily developing using Consolas or Inconsolata and nothing else for many years now. In fact, installing either font is one of the first things I do on a new machine that I will be doing any amount of coding on. Monospaced font porn, along with the numeronym which served as the basis of my thinking while naming my site, would prove to be my design inspirations.
If you’ve read this far and haven’t determined it for yourself yet- yes, I am a genuine nerd. OK, let’s design a logo!
First things first. I needed some tools. From some recent experience designing a couple of iPhone apps, I knew that I wanted to work with vector art so my design could be scaled to fit any size requirements I may have in the future. A colleague of mine had been talking up Inkscape so I decide to give it a shot. I ended up really digging it after spending around an hour or so familiarizing myself with its UI and pen tool.
Next, I wanted to decide on a color scheme so I could experiment with color while assembling my ideas. A little poking around on the web turned up Color Scheme Designer which I found to be both fun and intuitive. I settled on an analogous green scheme, mostly because two of my bicycles are shades of green.
Colors picked out, I was ready to launch Inkscape and iterate on some ideas.
My first concept centered around explaining my site name explicitly. I liked the concept, but its realization was not something that I was happy with. Certainly a design that was so much more wide than tall wouldn’t work well in many situations. Thinking of iPhone app icons, favicons, and other little badges that now litter the web from Digg, Twitter, etc., I set off in pursuit of a more square layout.
The second idea, where I introduced the brackets, was driven by a desire to express the numeronym idea in a more compact manner. It succeeded in doing so but would not scale down well at all. Liking this new concept a bit, I decided to produce some more iterations in Inkscape.
v0
In v0, I took a very symmetric and mathematical approach and made the K and the E exactly the same width. Visually, that ended up looking a bit strange, so I slowly progressed toward column 3 where both characters became more slender, although they were both still the same width, exactly.
Rows b & c were never really candidates, in my opinion, but I extrapolated the design in row a just to make sure something cool didn’t pop out at me while I was refining that concept. If I had a larger format, I really liked row b. But on a web site with smaller, low resolution graphics, it just wasn’t promising.
After getting some feedback from folks with real design chops, I picked v0a1 and v0a2 to move forward with.
v1
The v1 sheet started to look very refined and I was happy with where my earlier direction had taken me. Using Consolas, a numeronym, and a couple of common programming syntax characters {} [] led me to v1b2. I felt like this particular version was visually well-balanced and clean.
v2 - final
Tweaking the spacing and alignment while working with Inkscape’s pen tool at a very high zoom level produced v2, in which I also played around with some simple color options. Once I was happy with the balance of positive and negative space in the black and white version, I decided on v2a1 as my final revision.
The end result is that I now have a distinctive logo that I’m very pleased with. It expresses my attention to detail and passion for technology in a stylishly cryptic manner. With any luck, it is also the result of my pursuit of good design.