Constructing the Perfect Logo

Logos are the keys to success – the starting point for branding of any kind. But how can you put one together that stands out, and creates an original remember-able icon for your site? Today, we’re breaking down some of the best rated logos on Colin and David’s Logopond, and focusing on what makes them great. We’ll also take a look at more larger, well known logos, and see what has made them work.

What is a logo?

First, what exactly is a logo? Let’s take a look at an official definition from dictionary.com:

lo·go (n) – A name, symbol, or trademark designed for easy and definite recognition, especially one borne on a single printing plate or piece of type.

Ah I see, so a logo is something (can be anything) used to represent someone or something. Pretty obvious huh? We seen logos all around us, store after store, billboard after billboard, and even person after person. We all have our own branding, that distinguishes us from anyone else.

When creating logos on the web, you’re looking for that same effect. You want to stand out, and have something that makes it easier for everyone to remember “oh yeah, that’s this site”. Let’s get into how we do that.

Get Your Ideas on Paper

The best place to start logo designs, particular if there going to include some kind of symbol, is with a piece of paper and a pencil. Here, you can let your ideas flow, and sketch up anything that comes to mind. Even if you yourself don’t plan on designing it, sketches can really help logo designers by giving them definitive directions to head off in.

Let’s use our logo’s example. While a horrible one because of how simple and basic it is, I did put a lot of thought into it when we first began constructing Devlounge in late 2005.

Logo Sketches (Very Rough & Quick)

We wanted something simple, especially because, at the time, the logo was the least of our concerns. For the most part, we had thought the logo would be text and text only, until we put together the simple box with a letter in it. It worked for us, so we have left it as it for now, but we do want to start fresh soon. You can see some of the rough (very rough) sketches above.

Details Matter

Even some of the smallest details matter when creating logos. It’s not always the big things that can leave effect, but minuet details.

Let’s first look at our logo again. In the image below, you’ll see a comparison of our current logo, and a quickly mocked up version which added just a few small details: A light to dark red gradient, reflection, and 1 pixel border around the “D”. Looks a lot better, doesn’t it?

DL Logo Comp

Many times, logos also have hidden details you may not see right away. In text, they can be cutout shapes or images, which adds a symbol but doesn’t make it all too obvious. There there are symbols would actually represent something else. Take a look at the Wecreatethings synergy logo below. I looked at this so many times, and all I ever saw was what figure 1 below shows – a cool looking symbol representing synergy.

Wecreatethings Logo

But last night as I was half asleep and looking at it again, I noticed something. The logo was actually made up of text, a CC and DB, the initials of the two people behind WCT (Fig. 2). I thought it was ingenious, and I could not believe how long it took me to notice.

  1. By David B. posted on August 22, 2006 at 1:36 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hahaha, you got it! I was wondering if anyone would ‘get it’. hey i want to ask you something in private, can you email at the address provided?

  2. By BooTCaT posted on August 29, 2006 at 11:47 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Really , nice article , Though i have done some logos at my page , i think ur tips are sure to help .
    Nothing can beat the paper and pencil , when considering flexibility .

    Actually , we lost like a damn idiot , recently at a logo competition ( held at a college symposium ) .

    I think i should have read your article before .

    Ok this is my main question , TEXT LOGOS , dont do well , atleast in the beginning with NooBS , esp , when they contain only TEXT .

    What is the better way , i can catch their EYES DAMN .
    TIPS , TRICKS , 1 Minute Mind Catchers ???

  3. By Matt Davies posted on September 14, 2006 at 6:18 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Branding is all about persona. Sometimes brands don’t need to be “eye catching”. I always try to speak to clients about the requirements of their logo and over-all branding before I start. Some target audiences don’t want some huge weird swirls. Some love it. It all depends on who what and when.

  4. By lawton chiles posted on February 24, 2007 at 5:51 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    “It all depends on who what and when.”

    Matt, that is an excellent point. I just started designing logos, and with some creative freedom given, it is hard to know where to draw the line between what I like, vs what the target audience likes.

    Great point.

  5. By lawton chiles posted on February 24, 2007 at 5:56 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I just started doing this logo design in Illustrator but I don’t even know how to covert the text to outline and messs with the letters to get what I want. If you know f any good resources that explain this magical mystery, can you please share them with me?

    Thanks for this article and for your branding advice.

  6. By David Charney posted on March 1, 2007 at 7:19 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Yeah I agree. Start with a pencil and paper (or cocktail napkin). One think to keep in mind when developing a logo is its ability to adapt it for different uses without it damaging your brand. How does it look when faxed? How does it look on a bright background or a dark background? Can a vector version (if created in lets say Photoshop) be created for high resolution prints? How small can the logo get before it bursts into flames?

    I recommend asking yourself these questions after you start designing so you don’t hold yourself back. But good article. Thanks for the ideas!

  7. By Asgeir Hoem posted on April 27, 2007 at 5:29 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Interesting post!

    What it all boils down to, as far as I’ve experienced, is revision, revision and revision. One can spin forever around the simplest idea, and generate tens and hundreds of alternative solutions.

    Thanks for the ideas! I think you’d find some of my posts interesting.

  8. By Rob posted on May 21, 2007 at 5:30 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    That Elastic Digital logo is pretty cool, I have to agree. CloverStudio… okay. There are an awful lot of “Web 2.0” logos popping up that look quite a lot like that.

    And the E2 logo has a serious problem; the negative space “2” is clever, but the unfortunate result is to make Mr. “E” look like he just saw an especially sexy upper-case Y in parens passing by.

    Hey, maybe I have a dirty mind… am I the only one to notice that?

  9. By OliverDuncan posted on June 1, 2007 at 7:48 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I agree!!!
    I started in the biz doing tactile.
    Now designers don’t know what a matchprint is…
    I suck as an illustrator – but I need my pad and pen!.
    New designers: No matter how sick you are at photoshop – pick up afreaking pen!!!
    Colrado Springs Web Design

  10. By Edgar posted on October 4, 2007 at 10:59 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hey great tips, I’m actually thinking of implementing that part about “details matter.” I read somewhere else that simplicity is best when designing logos… after all that is Web 2.0 isn’t it?

  11. By Logo posted on October 5, 2007 at 5:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    It’s easy to generate a Web2.0 Logos. Take a Font and make a transparent gradient.

  12. By Adaptiv Media posted on February 2, 2008 at 4:58 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I think the idea of getting your designs on paper beforehand is critical. It’s much easier to throw all your inspiration down on paper and adjust things between your initial concepts to come up with some solid initial logo designs. If you’re trying to do this part of the process on a computer you may forget some of your ideas because it will take longer to render these ideas and that may be crucial.

  13. By web design posted on March 16, 2008 at 4:26 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Good article, the example with “Details Matter” is very good.

  14. By Victoria Blount posted on July 15, 2009 at 8:39 am
    Want an avatar? Get a gravatar! • You can link to this comment

    When designing a new logo, i like to do some research, but also get a pencil and paper ready. I really enjoy the process of conceptualizing new identities for a company.

  15. Trackback50个最好的Logo设计教程 | wordpress blog xqxp.comTopDig.net » 博客文章 » TOP50:50个最好的logo设计教程50 tutoriais Logo Design « Blog do kraudiopixey.de » Logodesign Inspirationslinks - …for web 2.0 and digital art in any wayTop 10 Logo Design Tutorials at Mixterr Studio BlogZoka :: Web tasarımı için 22 eğitici link :: August :: 2007Logo Design Tutorials - Paid Insider ForumTop 50 Logo Design Tutorials » .: towerlight2002(dot)org :.Professional Logo Design(How to reach to it through Tutorials ) | Skyje70 Excellent Logo Design Tutorials and Resources | The Muliati.Com goBlogDesignfeed.me » 70 Excellent Logo Design Tutorials and ResourcesLogo Design for Beginners | sethetter.comCreating your own Logos - Campbell Gunnphotoandpics.org » 90+ Logo Design Tutorials And Resources80+ Logo Designers Huge Essential Toolbox | tripwire magazineFreelancer Challenges - Logo Graphic Designers | GROWMAP.COM90+ Exceptionally useful Logo Tutorials, Tips and Resources | tripwire magazine70 Excellent Logo Design Tutorials and Resources | RAR Downloadseagrapho » 40 Fabulous 1 or 2 Color Logo Designs and Tutorials for Your Inspiration80 Logodesign-Tutorials, die Sie zum Spezialisten machen | print24 Blog