Logo Design Process & Using Forrst for A/B Testing

Last week I began the design process of a new logo. This new logo is for a personal website that I am working on at the moment. In short, it has something to do with Beer. More to come.

Before I sat down I already had a style in mind that I wanted to shoot towards. So it wasn’t that hard to start the design process. When you are starting out it is a good idea to take a look at some quality logos to get inspired/motivated. Especially if you don’t have a direction.

A few great places to find logo inspiration are:

First Iteration:

The first iteration of the Beerded logo was extremely rough. I started out by creating the basic shape of the elements and finding a suitable font to use. I ended up using a font called “Muncie” from Lost Type. I love the look of this font and it has “packaging” written all over it.

First Iteration

 


Second Iteration:

In the second iteration I added a small oval shape underneath the lettering. I knew that I wanted to have a place to put the “established date” in the logo to mimic something that you’d see used on actual packaging.

Second Iteration

Second Iteration

 


Third Iteration:

In the third iteration I basically cleaned up some of the edges and tweaked the alignment of a few elements. I made sure that the accent lines on the top and bottom of the ribbon were flush to the outer edges and not peeking over.

Third Iteration

Third Iteration

 

Fourth Iteration:

In this version, I added the “EST. 2011” date and some wheat/barley leaves as accents to the date. I also added a slight line texture/pattern to the ribbon. The line pattern adds depth to the piece and keeps the ribbon from appearing flat. ¬†Next, I duplicated the word “Beerded” and offset it by 3 pixels to the right and 3 pixels down. The second “Beerded” shape was then placed behind the first “Beerded” and then it was made darker to give a slight drop shadow effect to the lettering.

Fourth Iteration

Fourth Iteration

 


Fifth Iteration:

The spacing between the bottom of the word “Beerded” and the bottom of the banner was awkward and not balanced very well. I was looking for a nice counter-balance to the spacing that was already established at the top of the banner. To accomplish the result I desired, I rounded the 3 middle letters “ERD” around the “EST 2011” oval to maintain equal spacing from the bottom of the word to the bottom of the banner.

Fifth Iteration

Fifth Iteration

 

Sixth Iteration:

To give a bit more detail to the glass itself I added a slight reflection in the form of a stripe. This pretty much finalized the beer aspect of the logo and I felt like the only thing lacking was a background. I added a monochromatic sunburst, oval and wheat/barley sprigs behind the beer.

At this point I wanted a little external feedback so I posted this version on the developer/designer community Forrst. The Forrst community is a very helpful bunch and I got a ton of helpful feedback almost immediately.

Some more useful comments were:

  • “It kind of reminds me of a coffee cup, overall though, it’s a nice logo.”
  • “A lighter beer would help a lot. It’s just that brown and white together the way you have it reminds me of a coffee cup.”

I then took this feedback along with other feedback from some friends and made another iteration.

Sixth Iteration

Sixth Iteration

 


Seventh Iteration:

At first, I hesitated on changing the color of the logo to represent a brighter color beer. The reason for my hesitation was that I personally enjoy darker beers over lighter ones. Visually, I found that the lighter/golden color worked better and comes across as “BEER” in a more universal manner than the dark color beer above.

Seventh Iteration

Seventh Iteration

 


Once again, I took to Forrst to gather some feedback in a sort of A/B testing. The response was drastically different. 4x’s the amount of people “liked” the lighter color logo over the darker one.

Dark color logo Forrst stats (as of June 29, 2011):

  • Likes: 16
  • Comments: 12
  • Views: 26

Light color logo Forrst stats (as of June 29, 2011):

  • Likes: 81
  • Comments: 16
  • Views: 35

If you aren’t on Forrst and you are a developer or designer you should be. If you want an invite just leave a comment below and I will randomly select 2 of you as I currently have 2 invites.

Leave a Comment