How to Build a Web Design Around a Logo

If you have ever designed a website for a company or organization with a pre-established logo, you’ve probably found yourself between a crossroad. The customer will come to you because he needs to revitalize or strengthen his company’s image, and purchasing a website is one of the most cost-effective ways to do so.

The problem starts when you are given the logo to work with. There are various types of logo designs: some are mono-colored, others are multi-colored; some are based on text, some are based on a symbol and finally some are a combination of both.

In some cases, having a pre-established logo can be a God-sent gift because it can save you from the trouble of deciding things such as: what kind of font family to use, or what kind of colors should you use.

But as we all know, things usually don’t always work out so well, and sometimes what the customer wants from the site design can be contradictory to what the logo looks like. Sometimes you might come across a customer that wants a modern looking website while sticking to their “old”, 1970’s looking logo.

A good example of a contradictory design, in terms of logo/design comparison, is the New York Times website, which despite having a logo with a distinct “color”, which is black, doesn’t correspond to the colors used in the website, where black is only used to distinguish some small categories.

nwtimes.jpg

I’m not saying that their current design would look better if they were to use style, or colors, of the logo in the rest of the website design, but the contrast between tradition and technology is evident, and for this particular website, having their traditional logo might have been the proper approach to take.

When it comes to using text as a site’s identification, you probably won’t have too many problems trying to create a design that fits it, or the other way around, as text is easier to manipulate and integrate in a design than a logo.

When it comes to using a logo as the foundation, or crucial part of a design, things might seem a bit more complicated in the first approach, but there are several “nays” one might presume which aren’t necessarily true.

“the logo’s color has to be the prominent color of the design”

Wrong. Unless the customer specifically wants this from you, you are not obligated to use color of the logo as main color of the website. A great example of such a case is Bartelme Design’s website. What he did in it was to use a color with good contrast but with the same “strength” as his green logo.

bartelme.jpg

If you are working with a mono-colored logo, you pretty much have the freedom to do “whatever you (or your customer) wants” without many risks. A good example of what kind things you can achieve with different backgrounds and the same logo are the “big” sports brands websites like Nike and Adidas.

When all else fails, or when you can’t quite integrate the logo with the design that your customer loves so much, you may also try suggesting to redesign or revamp their logo to better suit the new website.

Although that might not be an option for most customers, because it involves a bit of investment afterwards in other things that use the logo, it wouldn’t be the first time a web designer created a logo for a company. Just make sure you satisfy the customer with the design first.

13 thoughts on “How to Build a Web Design Around a Logo

  1. Mike H.

    Or you could just instantly PWN the viewer like pizzahut.com does…haha (view it in fullscreen lmao)

  2. Scottsdale Web Design

    The NYT logo does look a little odd on their site, but it is very familiar to so many people that to not used it would have been a big mistake. I think taking a bit of a hit in design style for user recognition is often a good choice.

  3. Kidblogger :: Carl Ocab

    I agree, the logo doesn’t or in fact shouldn’t blend in to the whole site design to make people notice it and stand out.

    And personally, I hate the NYT website. Things go everywhere. I’m more with CNN’s new template.

  4. Pingback: Apologies and Thanks << Vandelay Website Design

  5. Pingback: Rankings Rising: November Wrap-up — eXtra For Every Publisher

  6. Pingback: 105+ Logo Design Tuts And Resources

  7. Canspaza - Things to do Scottsdale

    One thing I noticed about the NYtimes website is that in addition to the classic logo they designed the site to be accessible to as many people as possible. They left out Reds and Greens as that would effect color blind people. They made it possible so that it can be read in Text browsers like Lynx and they made it accessible to people who are blind.

    Even, though it takes a hit for design making a site accessible for as many people as possible is one of the main things web designers don’t take into account when creating sites.

  8. Pingback: Best of the Logos | Tips and Inspiration for creating killing logos » Blog Archive » Huge Logo Inspirational Resources

  9. Pingback: 105+ Logo Design Tuts And Resources | Web Design Tuts

Leave a Reply

Your email address will not be published. Required fields are marked *