Journal
Drawing a Good Logo
1 February 2006 › 47 comments
I just finished reading Lea’s great three part series on the Art of Self Branding (1, 2, 3). I thought I would share a bit about how my own thought process works. Specifically, I will talk about the influences and factors that went into branding the Godbit Project. At first, I wasn’t sure how well recieved the Godbit website would be, wondering if it would be percieved as just another cheezy Christian endeavor. However, since it seems to be getting a lot of attention from various design galleries, I figured I’d talk a more about it.
Initial Attempt
I must admit, that when I started planning for this site, I had two words in the back of my head, “Christian Stylegala.” I had initially toyed with the idea of having a logo done in a script font, not unlike that of Stylegala or the now defunct Screenspire. I even considered juxtaposing one shape, to create a lowercase g and b. You can see the result of that failed attempt below.
While this design is visually appealing, after asking around (without saying what it was for), I found that it conjured up two things in people’s minds. The first was of yin yang, a symbol for the balance of complimentary opposites in Eastern cultures. Secondarily, people associated this inversion of similar text with the numbers 96 and 69. I decided this was not going to work. I also had a gut feeling that curisve was not the best choice for a site about coding. So, I started visiting other design sites, and began thinking about it purposfully.
Branding Influences
It’s been said that art does not exist in a vacuum, and we are all influenced by what we have seen. Nowhere is this more true than on the web. So, before I talk about the actual process of designing Godbit, I need to give due credit for where I drew my branding inspiration. When I first started out, I knew I wanted this site to appeal to geeks, a demographic in which I include myself.
If you’re from my generation (or older), you’ll no doubt remember computers such as the Apple II. Cutting edge for their time, these dream machines had only a two-color monitor. Well, it was really more like one color: green, with the rest of the screen black. It was this type retro look I was considering, because I wanted the site to be about getting back to basics, past the snazzy designs and back to the foundations of good machine language: code.
This is also a reoccuring theme in the Matrix, which also drew its inspiration from the old console input of light text on black background. To the younger crowd, I knew the color scheme of Godbit would remind them more of this movie. I really liked the underlying theme of those films: Fighting the status quo. That is something that I also wanted to represent with Godbit, to raise the bar of coding standards beyond where the Church is at today. “We wrestle not against flesh and blood,” but against apathy, bureaucracy and mediocrity.
Paying Homage
—› Jonathan Snook
In my opinion, one of the better web coders out there is Jonathan Snook, and I have always been fond of the way he uses dark grey and neon green on his blog. He is a wizard of CSS, JavaScript, PHP and probably a myriad of other languages. I figured, if my design was reminiscent of his, then all the better.
—› Design by Fire
Another thing I wanted to take into account was an article written awhile back on Design by Fire, entitled Rebranding the W3C. While it was just a simple example exercise, I knew I wanted to revisit some of the concepts covered there. The reason for this was twofold. First, the author Andrei Herasimchuk is a great designer, so when he talks about branding, I listen. Second, it is the very standards of the W3C that Godbit is trying to promote for the church. In his design, he emphasizes the < > bracket symbols. I wanted to revisit this.
—› Pixelgrazer
Lastly, I love the logo for the design group Pixelgrazer. At first glance, it might not appear like much, but I assure you that it is genius. While I haven’t dialoged with them specifically about it, I will give my best guess as to the design process that went on behind the scenes. I think they wanted to represent the word pixel as simply as possible, in a pixel font, no doubt.
From there, they needed to add in the second word in their combo, grazer. Drawn with as few pixels as possible, that gives you a lowercase p and g, with a 3×5 pixel shape to work with for each letter. What I think happened next is that they overlapped the two letters (accidentally?), and thought: ahah! This resulted in a blocky, pixel-esque logo that also hints at an exclamation point.
Deity + Data
To recap, I now knew I wanted to have a site that was primarily dark, with lighter font, preferrably with green for accentuation. I knew I wanted to highlight a “bit” of data, the best visual representation of which is a single pixel. I also knew that I wanted to emphasize the importance of standards, and revisit the concept of using code. So, I thought, what if I put a dot to represent a bit, inside brackets? That of course looks like this: <•>. I shelved that idea for a bit while I re-thought the actual lettering.
I really liked the Pixelgrazer approach, but knew that God’s name deserves to be capitalized, so a straight overlap was ruled out because a capitalized pixel-font G has greater dimensions than a lowercase b. I decided to just draw the letters as small as possible, and then it hit me. By turning the G -45 degrees to the left, and leaning the b 45 degrees to the right, I had a perfect overlap. Plus, it also cut out a perfect square to represent a bit of data! Not only that, but it retained the diamond shape formed by two code brackets.
Besides being a really nice site I think Godbit has the most awesome logo I’ve seen in a long time. The idea is just brilliant!
• Marco van Hylckama Vlieg – (source)
Well, I hope you found this article informative. If anything, it should help you realize that usually nothing works out on the first try. So, if you’re getting discouraged on a project, seek some objective outside input, take a break to clear your mind, and then come back to it later with a fresh perspective. Michael Jordan said it best: “To learn to succeed, you must first learn to fail.”
Discussion + Dissension
Comments closed after 2 weeks.
#1 Thame
I think you read my mind and write articles accordingly. This is going to be insanely useful on a few upcoming projects. Thanks
#2 Jonathan Snook
I’m flattered to have been the least bit influential in the design. I agree, the Godbit logo is fantastic. I love it. :)
#3 Matthew Pennell
Excellent work, Nathan – really clever logo, and good insight into the design process.
#4 Jonathan
I always enjoy reading about the thought process behind branding efforts and where designers get their inspirations from. Much like when I first read about the now-famous FedEx logo process.
#5 Jeremy Pinnix
Hello Nathan, thanks for the kind words. You are right on the mark as far as our goals… Some additional benefits have to do with the scaling of the logo, and the fact that due to it being pixel-perfect we don’t have to worry about anti-aliasing.
jeremy
#6 Hugh Griffith
Pulling a yin/yang or 69 out of those two letters is really reaching dude. Those “people” need to lighten up haha.
And your GB logo is pretty pimp, for a programmer!
#7 Yannick
Really interesting seeing the process you went through with the logo. I remember the first I saw it, I couldn’t help but think “That looks so cool!”.
#8 en3r0
Good resource, thanks!
___________
-en3r0
http://virtenu.com
#9 Nathan Smith
Thame: I noticed that you were the first one to Digg this article. Thanks for that, by the way. I didn’t file it under “tutorial” because it doesn’t really offer how-to steps, but I’m glad that you found it helpful all the same.
Snook: Well, you did say something to the effect of “Hey, those are my colors!” when you saw the mockup, so I thought it only fitting that credit you.
Matthew: Thanks! Being called “insightful” by someone of your stature and talent is very humbling. By the way, I love your CSS reboot / redesign.
Jonathan: I love reading about the logo process too, learning from the greats that did the cool old school logos like AT&T and FedEx. One of my favorite new corporate logos is Clearwire. I love the simplicity, and missing “wire.”
Jeremy: You bet man! I love your logo, and how it fits comfortably into 16×16 for a favicon.ico too. It sure helps to not have to worry about resizing. That’s why for Godbit’s favicon, I turned the whole thing sideways so it’s squared up.
Hugh: Well, one of the first things I thought after I tried that initial script font was “96” then I was like dang, people are going to transpose that and think “69.” Sure enough, after having a few people critique it over IM, it had to go.
Yannick: I’m glad you like it. I would hope so, since you’re one of the Godbit “staff,” so to speak. En3r0 – You’re welcome, thanks for the Digg comment.
#10 Simon
What pixel font did you use? By the way! Great post
#11 Nathan Smith
Simon: Actually, I didn’t use a real pixel font. At its base size, the logo is only 5×5 pixels, so I just drew it by hand. If you want a good font, try Silkscreen.
#12 tom
Kudos. Very nice indeed.
#13 Zoop
Of course, at that angle, the first thing I think of is Enron.
#14 Jesse J. Anderson
Nathan – looks like you’ve been dugg again, good luck with all the soon-to-come negative feedback heheh =)
http://digg.com/design/Drawing_a_Good_Logo
#15 jeolmeun
I thought the dot inside was the bit at first, but I see the b now. Also, some would say “God” is a title like the Hebrew “Elohim” or “El”. http://eliyah.com/names.html
#16 Flexchamp
hmmm … That logo reminds me of a german soccer club – HSV:
http://www.hsv.de/
The logo looks nearly the same.
#17 Nathan Smith
Flexchamp: You’re right. Someone else on Digg pointed out that it looks a lot like the logo from the band Engine Down, neither of which I was aware of when designing mine. I think it’s just a case of random coincidence based on the simplicity of the shapes involved, not unlike the new Quark logo.
#18 Khaled
Hmm and here I thought that you had devine inspiration when sorting that logo out :) har har. No but seriously I absolutely loved reading that, one of my favourite posts on this site, and you’ve got a lot of handy ones on here buddy. Very cool stuff, and I like how you show inspiration with class. If only more people could learn from that simple lesson, rather than take the easy way out and steal…
#19 Marco
That’s not ‘nearly the same’ as the HSV logo Flexchamp. The HSV logo is just two squares. This is a G with an embedded B. the little square that’s left out in the GB logo makes a HUUUUGE difference.
b.t.w. Nathan thanks for quoting me. I still think this logo totally rocks!
#20 Thame
Nathan, I’m sorry if you didn’t intend for it to get dugg, but it was a fantastic article and obviously, others enjoyed it as well. Seriously, don’t read the comments on digg.
#21 Nathan Smith
Thame: I don’t mind that it made it to the front page of Digg, so much as all the uninformed comments people make. I just don’t have much respect for their average user anymore, so I’ve removed the 1-click Digg link from this site, and have only Delicious and Newsvine. I appreciate your feedback bro.
#22 Keven
Funny, how your process turned out almost an exact replica of the Cyber Athlete Professional League’s logo…
www.thecpl.com
You might want to include in your development of drawing a good logo, it helps to perform a trademark search at the USPTO.
#23 Nathan Smith
Keven: Thanks, I’ll include that if I ever write another logo related article. I hadn’t previously heard of the Cyberathlete Professional League. By the way, they spell it as all one word: Cyberathlete. If anyone else is curious, he is referring to the United States Patent and Trademark Office: www.uspto.gov.
#24 Dee
I stumbled on your site through del.icio.us looking for Christian blogs and while I am not a coder I am going to be taking on our church website and have really enjoyed reading your article and links to others on webdesign. I hope I’ll be able to put some of what I have learned here to good use. My family and I were members of the Methodist church for about ten years and have recently been attending Calvary Chapel. We wanted more bible and less committee and so much of what we have begun to see as problematic with some of the mainstream churches had made us feel like maybe there was something wrong with us. It is my fervant prayer that churches will stop trying to market God and start teaching the gospel. It seems like we have gotten so busy trying to bring people in to the church that we have forgotten why we are bringing them in.
#25 Nathan Smith
Dee: That’s my concern too, that churches lose focus of what is really important. Have a look in my blog archives under Christianity, and I think you will find that we share many of the same frustrations with the Church today.
#26 P.J. Onori
I genuinely intend no offense to the author, but I tend to cringe at articles such as “How to Make a Good Logo”. Identity design is not a technique that can be reproduced by following a step-by-step process.
While this article’s content is less about that non-existant technique and more about the process undertook, I might suggest that it would be wiser to leave it to the audience to decide whether it’s “good” or not. I have no doubt that the author had the best of intentions, but I just think it comes off really poorly.
#27 John Bokma
If you don’t like the traffic you get from digg.com, why not just return a forbidden? Redirecting to the front page of digg.com is quite lame, and confuses many people.
#28 Andy
Awesome writeup about this, Nathan. Way to go. I enjoyed reading about your process.
#29 Matt Heerema
Good stuff, man. Great article about the thought and intentionality that should go into branding.
#30 Nathan Smith
P.J. – I appreciate your point. Bear in mind that we launched Godbit last fall, and it’s only been after this site has been featured in several design galleries (1, 2, 3, 4) and praised by people like Marco that I even started considering it a “good” logo. I wouldn’t have posted this article in November ‘05.
John: I thought of just having a forbidden page, but I think that would just make the spammer type visitors all the more persistent to leave negative feedback. With an infinite loop, their short attention spans filter them out.
Andy + Matt: Thanks. It’s refreshing to hear some positive feedback today.
#31 John Bokma
Nathan: spammer type of visitor? You lost me. Your page made it to the Digg front page, and hence a lot of traffic is driven to your page. It has nothing to do with spam, just that your article got a lot of attention.
If you mistake this for referer spam, first have a peek at what digg.com is: it’s a technology news site. You made it to the front page, and get loads of visitors interested in what you write. How can that be spam?
If you’re afraid of comment spam, moderate (I do the same). Comment spam has nothing to do with digg btw. Bots are used for that.
HTH,
John
PS: I do like your logo tip, but I think that the title is misleading. You can’t create a recipe for logo design :-)
#32 Nathan Smith
John: I didn’t mean that Digg is a referrer spammer. I know what it is. What I’m saying is that I don’t really care for the type of visitors that site brings in. My intention wasn’t to create a “recipie for success,” just to show a thought process that could lead to inspiration, which I realize is entirely subjective.
#33 John Bokma
Nathan: I came via that site (digg.com), and I did like your inspiration (even bookmarked it).
It’s a bit odd to have a public website and use a referer to decide if a visitor is worthy or not. Moreover, it’s very odd to bother digg.com with it by creating a redirect back (I mean, redirect the visitors to my site :-) ).
#34 John Bokma
Uhm, am I crazy or did you really post it yourself on digg.com?
“I noticed that you were the first one to Digg this article. Thanks for that, by the way. I didn’t file it under “tutorial” because it doesn’t really offer how-to steps, but I’m glad that you found it helpful all the same”
Now I am really lost.
#35 Nathan Smith
No John, I did not post it myself on Digg. I meant, when I blogged it, I didn’t want Technorati to file it as a “tutorial” because it does not offer a step by step, reproducible guide. Instead, I posted it under the blog category of “personal.” I was thanking Thame for Digg’ing it at all, since it was more personal in nature and was never meant to be taken as a how-to guide.
#36 Ivan Minic
Nathan, very nicely put ;)
#37 Sean McManus
Found you via digg. Great logo, and interesting to read about inspiration. It’s like one of those pictures of people you can see in two ways – I missed the ‘b’ at first.
#38 Steve
Nice logo. I came across Son Spring when searching for other web designers’ sites. I admire your site design and your portfolio looks very nice. Amazing work.
#39 Nathan Smith
Ivan, Sean + Steve: Thanks guys, I appreciate some positive feedback after the recent flaming over at Digg. I especially appreciate the compliments about my portfolio. Hopefully I’ll get around to adding my more recent work soon.
#40 Samalah
I really enjoyed your hints and inspirations for the Godbit logo, It was really helpful to me as I thought about the logo for an upcoming site of mine. Thanks for sharing!
#41 Daniel Schutzsmith
Great article! It sounds like your education as a designer has paid off – you can see through your writings that you have gained a valuable ability to find the meaning behind designs. I must say that seems to be a rare ability these days with so many designers saturating the marketplace.
Keepo up the great work!
#42 Nathan Smith
Daniel: Actually, I don’t have any formal education in design, that is unless you count grade school. Then again, neither do a lot of designers which I really respect, such as Dan Cederholm. It wasn’t until after college that I figured out I wanted to be a designer. It was always just a life-long hobby.
#43 Daniel Schutzsmith
Even better! You are in the same boat as I. I graduated college with a Bachelor of Arts in Public Relations – absolutely nothing to do with design. Somehow, I have managed to force myself to learn everything I can about graphic design on my own.
I too have never been much of a believer in the educational credentials that one carries. Only if the work of that individual is paramount, does it make those credentials relevant. In the long run, I think a formal education is great but a self education, from what I have experienced, seems to generate more passionate and motivated individuals.
#44 Nathan Smith
I wouldn’t necessarily say that a self-education makes one more passionate. What I will say is that as long as you are passionate about what you do, and learn the necessary skills to do that well, then it doesn’t so much matter who taught you. Example: A 1970’s computer degree isn’t worth much today. I think that in any field, we need to be constant learners, especially in web.
#45 Raja Sandhu
Nathan, interesting read. As a logo designer, I find it most gratifying to see negative space used well as a design element. I like the duality of it, a paradox almost…
#46 Nathan Smith
Raja: Thanks, I’m glad you found it helpful. I used to make a lot of video game levels, in which the concept of negative space played a big part. By the way, you’ve got quite a nice selection of logo work yourself. Good work!
#47 Doug
Hey, liked the article, after reading it, I noticed that the Game Cube also seems to follow a similar technique, making a ‘G’, ‘c’, and even a cube… just thought that was interesting, peace!