Monthly Archives: September 2014

Designing a Versatile Logo

Good logo design has always been hard. The number one characteristic of successful logos – ones that stand the test of time – is simplicity. The best example is GE’s logo, which was created in the 1890s and revamped somewhat in 2004:

It’s only gotten harder with the advent of digital media and mobile device screens of all resolutions. On the other hand, tools have gotten better and for those who aren’t artistically-inclined more resources, such as typefaces and icons, are readily available.

Recently, I decided to create a web and app-based service called NoteVote. Basically, if you hate sitting through long meetings, this will be a tool you’ll like. While it may seem odd, one thing I do whenever coining a new name is to test how it will lend itself to branding. Someone else might jump straight into coding but at heart I’m a UI/UX guy.
The first things that came to mind were to include elements such as a note icon and a thumbs up icon, as well as both a logotype (a logo including text) and a stand-alone logo (suitable for app icons, favicons or uses where space is constrained). I also looked through my typefaces and chose to use Banda (the regular weight is free), which is a friendly, clean and well-spaced design (the kind you’d invite your mother to see).  My first iteration was this:
I sent this around to a few friends – people with varied backgrounds (sculptor, web/app developer, English/writing professor, grass-fed beef rancher and one of my favorite people, Chrysti the Wordsmith – to see what they thought.

The artist was the first to get back to me and his comment was, “I wish there was an alternative yay or nay for the thumb; Facebook has made us all sick of looking at that icon, but I see why you like it—its a clean logo.” So…a few more iterations:


There are things I like about these. Yet, aside from the over-used check mark, what they lacked was the humanistic element. Other logos I’ve designed that have worked well have at least suggested that, e.g:
So it was back to the thumbs up. “Talk to the hand!” 🙂 And from there, tweaking various aspects of the design. One thing I wanted to be sure of is that the line weight of the artwork was exactly the same as the fontweight. In Illustrator, this is as easy as converting a character to outlines, selecting a leg, and copy/pasting it, then looking at the reported width:
I also wanted the note icon to look square – like a Post-It. (Never mind that bending the corner is usually associated more with a sheet icon. Sometimes rules are meant to be bent). I started with a square, created the bent corner, then made three significant alterations.
  1. Both logotype and standalone variations
  2. Joining the hand and note icons
  3. Removing the upper left-hand corner

Variations are necessary because, as mentioned, a logo needs to be able to accommodate a variety of branding uses. Joining elements marries the design elements into a cohesive whole. This serves to unite the cognitive concepts expressed in the logo as well as differentiate it from similar designs. Removing the corner was done to counterbalance the break above the n in the logotype variation and to suggest both speed and the notion that once the note-taking part is done it takes a backseat to voting on the best ideas.

Surprisingly, the second proved the most challenging. I had something in mind similar to approaches like this (although I dug this up just now, well after the fact):


My first attempts were like this:

And that would be fine. I found, however, after printing it out and looking at it on my phone that it didn’t feel quite right. So I did this and digitized the inner curve:
That’s some high-tech shinola, there, resulting in:
Other considerations are noted here:
Going with a single color and ensuring that the artwork is using it properly – i.e. no masks, mixed RGB/CMYK or other colors – means it is effortless to change it to accommodate light or dark backgrounds and to avoid color clashes. The SVG version is tiny and can be used just like this in a web page, meaning it will never be jaggy, regardless of page sizing or screen resolution. Who wants to create endless raster variations?
<img alt=”logosrc=”images/site/notevote_logo_blue.svgid=”headerLogo” />
I hope this helps you with design considerations. Feel free to direct questions my way via  or which is also where you can sign up for the NoteVote beta.