Logo Design 101

Logo design is an essential skill for any web designer to know, whether you sell designs professionally or just maintain your own website. It’s a great branding tool, and a great way for visitors to remember your website, or your client’s website.

I always seem to find two flaws relating to logos when web designers are just starting out. The first (and the worst) is when an aspiring professional designer does not understand the importance of a logo. Any client is going to want a logo implemented into their design, and it’s important to understand a logo’s great impact nonetheless. The second is when a new web designer tries to make a logo, but it’s not really a logo. It’s a banner, a header, or just an image.

Let’s define a bit better what a logo is, by defining the elements of a good logo.

2 Features of Effective Logo Design

1) Simplicity

A viewer is not going to stop and analyze a logo for deeper meaning, or artistic structure. They’re going to see it, and hopefully, with proper design, remember it.

Notice how the logos above are just text, an icon, or even just a letter. The WWF logo is the most complex of the four, but the use of black and white tone it down to make it simplistic.

We’ll go over how either text or image logo design can get to complex later in this post.

2) Contrast

As you can see, the McDonald’s logo uses colors opposite of the color wheel, or complimentary colors. These colors look good together, but also contrast for visual interest.

The WWF logo doesn’t have much color contrast, but really has a lot of black and white contrast. What makes the viewer notice this design? The white in the bear blends into the white background, so our minds subconsciously look at it longer to figure it out.

Any bold color contrasts with white, and Coca-Cola used this rule. A viewers eyes will immediately be drawn to the red, and then the simplistic typography gets the message across.

The Nike logo is contrasting with the light grey and dark checkmark. The contrast draws our eyes, and because it is just one, very simple image, we remember it easily.

Typography design– here’s a good use for it

Logos should always be simple, memorable, and most importantly legible. What a better way to get the message across than in plain text? Read up on typography posts to learn about designing typography appropriately.

A very common trick among logo designers is using a word or phrase, and tweaking it visually. Notice how the examples below have a tilted letter, extended lines, or added another type of accent. Most often times logos have variations in thickness or color as well.

Typography is a great way to keep a logo simple, while still appealing. Here are some tutorials and design processes on how to make typography-based logos.

Images in logo design

While it is the most common opinion that typography logos are best, there are many famous and effective logo designs that are images, or even text with an image. The same rules still apply, though, to image logo design: simplicity and contrast.

The above are good examples of logo design containing images. Notice the very simple, even abstract shapes. By making the logos abstract, it creates an image that is specific to the company, even if the shape is derived from a real-life object, like an apple, or a Panda.

Examples of bad image logo designs would be not enough contrast, too complex, or shapes that have no focus or direction. Notice now all the logos above show off smooth curves or simple shapes like circles and lines.

The image should also be relevant, even if only abstractly. For example, an apple does not well represent computers, but it high-tech sleek texture does.The concept is the same for the AT&T logo.

The WWF logo is self-explanatory, but the Pepsi logo seems more abstract. It does however have the texture of a pop can almost, with refreshing water droplets attached. The red, white, and blue also represent the colors of the American flag, which can trigger our memory as ‘classic’.

Testing a Logo

It is important to remember that logo design is for the client. Even if you’re making a logo for yourself this time around, you’re going to want to manipulate it in the future, as would a client. For different purposes, you or a client may want to re-size the logo, put it in greyscale, or manipulate it in other ways.

Let’s talk about resizing first. The basic test most designers use is to take the original logo image, and reduce it’s size by 1/4. After this, is text still legible? The image still well seen?

nonreducable

As you can see, I’ve reduce the logo above by 1/4. The company may want to do this to put it’s logo on letterheads, or other types of media. As you can see, the main text goes fuzzy, and you can’t even read the bottom text. This is an example of bad logo design because it is not reducible.

Next: the greyscale test. This is a great way to tell if you have good contrast in your logo design. In a graphics program, set it to greyscale. Do the colors blend together much? Does it make it illegible? Is there an area sticking out now, that should not be the main focus?

I looked for awhile to find a good example of really bad contrast in a logo design, and did find a few. However, I found this composition to be much more useful. It was created by the blogger at GoMediazine, so I take no credit for this image.

The image is pretty self-explanatory, and you can see how good and bad contrast can affect the greyscale version of a logo, and even the regular version in this specific logo.

Conclusion

As you can see, logo design is simple, but can still take a lot of work. For the use a logo gets though, the work is always well worth it. Remember these basic rules of logo design: Simplicity, contrast, manipulatable.

Have your try at a logo design if you’ve never done it before. I’d be glad to see them here!

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

9 Comments

  1. Kaylee

    February 8th, 2009 at 06:26 pm

    I love the Nike logo, and their brand in general. I also think the WWF logo looks great.

    Ever since a friend pointed out the arrow in the white space between the E and x in FedEx, I’ve become attached to their logo! Have you ever noticed the arrow?

  2. clairessa

    February 8th, 2009 at 11:30 pm

    oh wow. that gray scale test is a brilliant idea. i love your posts. thanks for sharing. :D

  3. Kayla

    February 9th, 2009 at 12:00 pm

    @Kaylee

    I haven’t ever noticed the arrow in their logo either! That’s a great addition to the design.

  4. Sara

    February 12th, 2009 at 04:44 pm

    I haven’t made any logos yet but these are some good tips. I always favor the design logos like the apple. I’m a visual person.

  5. Jijy

    February 13th, 2009 at 07:30 am

    Awesome article! I did a presentation on Design on Branding and Logos a few weeks ago, and covered around 45% of what you just said here LOL. I didn’t mention about resizing or greyscaling a logo.
    Ahh, I love web 2.0 icons. I think they look totally cool, like the Apple logo.
    Simplicity is the way to go with logos :)

  6. Marcio

    September 30th, 2009 at 12:48 pm

    Great article. In your example, you use a logo from a brazilian store, Oruam. I like to see my country in foreign articles. We have great designers here. By the way, the store have been named with the name of their owner, Mauro backward