Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
As the effectiveness and streamlined approach of an online presence continues to become the primary means of business communication, a businesses brand relies heavily on how a logo interfaces with its website.
We'll explore a variety of issues related to working with and integrating logos, including effective and ineffective combinations and how logos presented online differ from their printed counterparts. In addition, we'll discuss what makes a logo successful from a usability and technical standpoint.
Skype is an online service where users can talk online, instant message and do video calls for free (or a small fee in some cases). Skype's main focus is connecting friends and family online. When visitors interact with their brand it's all online. Having said that, their logo is mostly viewed with a 3D or beveled effect, while the flat blue color is reserved for other applications that may not allow for subtle color changes. These instances occur generally when it comes to printed pieces like fax sheets, embroidered clothing, etched surfaces and vinyl lettering.
It's fair to say that the primary look Skype wants their visitors to observe is the beveled version of the logo. This version has a softer and more approachable appeal that works in more situations than not, from a usability standpoint, given their business model.
Digg is an online platform where users can vote or digg interesting stories.
Digg has a range of styles and icons that denote its brand. Unlike Skype who's primary logo is fairly consistent wherever it occurs, Digg's implementation is unique and varied. The homepage of Digg uses a reversed (white) logo.
Digg has expanded the visuals that visitors associate with them by using other icons and not their logo, to identify themselves. When someone wants to "Digg" an article, story, photo, or other, they don't see a picture of the Digg logo, rather, they see a number that denotes how many diggs that particular entry has, while the word "digg" is written small and underneath the number (see 1).
With a site that is as popular as Digg, it's hard to control the use of its visual assets. People alter company logos on a regular basis, which generally dilutes the effectiveness of a strong brand. It's common to see custom icons and art that may or may not look professional that represent a company we recognize. Digg is rare in the fact that they welcome visitors to alter some of the visual assets that represent them. The digg shovel icon (see 2) is one of these examples. Digg openly allows modification of this icon to suit a website's need as indicated here.
The full color Digg logo (see 3) is used in a different capacity, not necessarily less frequently but not as the primary identifier it prefers it's visitors to see, judging by the lack of use on one of the most prominent places one would see it, the website or underneath the Digg buttons.
Firefox is a popular web browser. In fact, most of your are probably reading this article with it!
Firefox is another great example of a product that may have occasional printed documents (perhaps on the corporate level) while their primary function is completely online. When a person wants to use Firefox they click on a full color and gorgeous Firefox icon. Once inside the application you don't see the Firefox logo anymore.
With this in mind, lets switch to how the logos use translates to advertising. The Firefox logo in its entirety (see 1) is comprised of the icon and the text. In instances where the icon itself is not used they simply write the word "Firefox" (see 2.) Versions 3 and 4 are simply reversed to work where the background is too similar or creates an unpleasant combination with the orange text. You'll never see an official version of the word "Firefox" written in another color.
One Here One There
One Here One There (OHOT) is a non-profit that fosters growth in sub-Saharan Africa through education. The OHOT brand gains support and awareness more equally (compared to the examples above) both online and in print. Since this is the case, the OHOT logo needed to remain largely consistent throughout the campaign. The OHOT logo below uses only two colors, green and gray. As OHOT is a non-profit organization it makes use of limited colors in their logo which in turn will save them money on printed pieces.
The OHOT website uses the logo in an unaltered form on a pale yellow background. Again, as the use of the logo equally spans print and online applications OHOT's logo remains constant.
Below is a printed ad that incorporates a reversed version of the logo. Not much has changed.
This bench advertisement treats the logo in a similar, though creative manner.
OHOT logo and campaign designed by and courtesy of Ad 2 Tampa Bay.
Less Effective Use of a Logo Online
As a major source of information, a website is a cornerstone of a successful brand image. It's critical that your logo work well no matter if it's simple, 3D, ornate, extravagant, etc.
Take for example the famous MGM logo shown below. This logo has been around for many years and is in and of itself a nice looking logo. On the other hand, the implementation into the website is less than ideal. Observe how the drop shadow is too heavy and impedes the legibility of the logo. It would have been much more effective to eliminate the drop shadow and experiment with changing the background color, at least directly behind the logo.
It's important that your online presence portrays the image you intend to convey. In MGM's case, the website is a major source of information, but more people see the logo on the big screen rather than at their website.
The most important concept to absorb is that a logo should work well no matter the circumstance. If you keep this concept in the back of your mind as you craft the logo, the end result will be one that works for years to come in both digital and printed form.
Below are a few resources that I've found helpful when it comes to getting inspiration or executing any of the steps that creating a logo entails.
Identityworks has a variety of information on branding, logos, logo re-designs and more. Follow the link to see how companies use guidelines to keep their brand looking visually consistent.
Veer is a stock photography site that has a large selection of high-quality fonts to peruse and purchase when you're looking for that perfect font for your logo. Even better is that you can typeset your own letters to see what they look like in a particular font.
One of the biggest advantages of purchasing a font is that it limits the number of people who are using the same font in their logo. If you're looking for something that's a little more exclusive, then this is the way to go.
Fawnt has some trendy and unique fonts that are free to download. Check out the font called Diavlo, it's pretty cool.
Kuler is Adobe's online tool for picking color combinations. Users can create their own combination using a variety of sliders and options. You can download color palettes that other users have made directly into your Adobe Application.
TIP: In Illustrator CS3 go to Window > Adobe Labs > Kuler to open the palette that interfaces with the website.
Check out Davidairey.com to add a little humor to your day, check out the article below. There are also loads of great logo design articles and resources on the site.