Advertisement
Inspiration

Logos for Print Versus Online – Identify Your Audience and Design Accordingly

by

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.

This Post is Day 5 of our Graphic Design Session. Creative Sessions

Skype

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

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

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.


Resources

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

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

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

Fawnt has some trendy and unique fonts that are free to download. Check out the font called Diavlo, it's pretty cool.

Kuler

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.

David Airey

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.

This Post is Day 5 of our Graphic Design Session. Creative Sessions
Related Posts
  • Web Design
    Complete Websites
    Design a Travel Startup Landing Page Using PhotoshopLanding thumb
    In this tutorial I’ll walk you through a process of creating a simple and clean travel startup landing page design. I'll be using Photoshop CS6 to design a professional and lightweight layout combining beautiful imagery and some stylish fonts.Read More…
  • Code
    Articles
    Strategies For Choosing the Right Premium WordPress Theme for Your Next ProjectPremiumwp
    You have your credit card in hand, and you are ready to buy a beautiful, premium WordPress theme for your next website or blog. But where should you begin? Perhaps a search through Google? Maybe a famous WordPress theme site? Perhaps ThemeForest.net? In this post, I aim to arm you with a few tips that will guide you when choosing a premium theme not only purchase a beautiful theme, but one that will meet your needs.Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Code
    Creative Coding
    Making Use of the Genericons Font in Your WebsiteGenericons 400
    I believe that icon fonts are one of the greatest ideas ever born in the golden age of web design. Some great guys at Automattic probably feel the same way, since they decided to come up with a nice icon font named Genericons. In this article, we're going to learn how awesome icon fonts are and how to make use of the Genericons font.Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Design & Illustration
    Web Roundups
    Back to School Special: 30 Easy Adobe Illustrator TutorialsBoardpreview400
    Summer is coming to an end and it is almost time to go back to school again. With this in mind, let us get to basics and share with you a selection of great beginner tutorials and articles which explain tools, panels and other tricks Adobe Illustrator has to offer!Read More…