Posts Tagged ‘logos’

Web Site Design Tip: Highlight Logos With A White Background

October 5th, 2010

If you have an area of your web site that will be used to post things like logos, it’s usually best to make the background of that area white.

This is a common web design issue: you want to highlight your partners, sponsors, clients, etc. by placing their logo on your web site. Placing logos instantly gives merit to your own business because they act as an endorsement for you.

Getting the logo files

Generally how this works is you ask the partnering group for their logo, and they often send a jpeg file which will have a white background around it. The logo will appear to be sitting in a white box. There are ways to avoid that box: a gif or png file with the right settings should have a transparent background. But the truth is that many times we can only use what is provided.

Web site design with a logo in a white box

An old web design before we had the background area white. The white box around the HFP logo makes the web design look poorly planned and clunky.

This old screen shot is from a web site that has since been redesign (you can read about the process in this post). When we did the initial design we did create an area in the right sidebar for logos, and it had a white background. But, then the client realized that they may want to feature some partnerships within the main content area, and that area had a green background. The result was that non-rectangular shaped logos appeared with a white box around them.

Design for the challenge

Therefore, knowing you may get jpeg files with white boxes around them, use that as a parameter for the web site design. A professional web site designer should be able to create within the bounds of this requirement.

Web site design with logos

Knowing there may be logos placed in both the right sidebar and in the main content area, the background of both areas is set to white.

The design effect of a logo that is sitting in a white box on top of a colored background is very clunky. As professional designer I know of ways to remedy this: I can convert the background to transparent, or I can even recreate the jpeg with the right background color using PhotoShop.

Share

Your Logo Tells Customers What to Expect: Restaurant Case Study

June 3rd, 2010

Your logo is your first impression. It’s a quick snapshot of your business’ personality. With just minimal use of color, typography and shape it can sum up how professional you appear, whether you are quirky or friendly or stuffy, it can make you appear old fashioned or cutting edge.

The idea that your logo can be so powerful, can sometimes feel very abstract, but I recently had the opportunity to see a rebranding that very clearly demonstrated this effect.

In the quaint, seaside town of Rockport, Massachusetts is a small restaurant called Brackett’s Ocean View Restaurant. Let me tell you straight out that while my last name is Brackett, and my mother and my uncle both live in Rockport, I am not directly associated with this restaurant. I don’t know the owners and was not involved with the logo and signage I’m about to describe. But, because of the fact that there is a restaurant in the small town where my Mom lives with our same last name, I do pay attention to it.

They have been in business for 20 years, and recently have decided to “redo” their restaurant. The word around town is that they’ve changed the menu, changed some decor and have a new logo. So I had to check it out.

The old look

The restaurant’s large, exterior sign had already been replaced when I went by, but the small sign on the door held a remnant of the what their old logo looked like.

Brackett's Ocean View Restaurant, old logo

The old signage, which shows what the old logo was like.

By looking at this sign, you can see:

  • The sign is made by chiseling the words into wood. This suggests homemade, and old school.
  • The typography is not particularly well thought out or unique. This suggests a reliance on the standard, and nothing too high end.
  • The color scheme is fairly bland and predictable.

Therefore, we can guess that the restaurant, it’s cuisine and atmosphere will be:

  • Home cooked meals
  • Standard, but not high-end food
  • Somewhat predictable, and maybe even bland food and surroundings

That in fact, was exactly what was offered. It was a very predictable, seaside restaurant serving the basics like baked haddock and iceberg lettuce salads. The atmosphere (with the exception of the view) was homey but not particularly well-thought out or enticing. The sign perfectly summed up what one could expect from the restaurant.

A new look

Now, they have a new logo and sign:

Brackett's Ocean View Restaurant, new logo

The new logo for the restaurant

This new logo suggests a much different dining experience:

  • This clean, modern typographic approach suggests a new look and a more modern take on food and probably the decor.
  • The bright and somewhat unusual color palette also lets me think there will something fresh in the new menu. The choices may be more unique, and less expected.
  • Overall, it has a much more professionally designed feel which suggests this restaurant will have a professional chef, not just someone cooking home-cooked specialties.

I have yet to be in the updated restaurant, as it had not opened for the season when I went by. But the new sign with the new logo were already in place. It was such a bold and clear way to shout to the community that something new was going on with this restaurant.

What is your logo saying about your business?

Your logo is making a lot of statements about your business, product or service right this minute. Without even mentioning it, we can see how a logo can suggest the type of food you serve, how well-trained your staff will be and what type of experience a diner can expect. A poorly designed logo may be saying that you are unprofessional, cheap, or inexperienced; there may be mixed messages and most of them do not reflect well on you. A well-designed logo can position you exactly where you want to be: well-established, innovative, local, friendly, precise, traditional, hand-crafted, etc. A professional designer can help you project your strengths and personality into a visual object.

Want to see some examples of logo that Visible Logic has designed? Please check out the logo section of our portfolio.

Share

Get the Right Logo Files from Your Graphic Designer

May 6th, 2010

If you hire a graphic designer to design your logo, make sure that you get the correct files once the logo is finalized.

Vector vs. Pixel Based Graphics

Generally, designers will work in Illustrator to design your logo. Adobe Illustrator is a vector based program, rather than a pixel-based program like Photoshop. Vector-based images can be resized both larger and smaller without diminishing the quality. On the other hand, pixel based images do not resize well. As you can see in the example below, the vector-based Illustrator file (top) is created with just a few points and a mathematical formula determines the curves and lines in between. The pixel or bitmap based Photoshop file (bottom) looks digitized and has blurry edges when resized from a low resolution file.

Visible Logic logo as vector based file

The vector version (Illustrator eps files) of the Visible Logic logo.

Visible Logic logo resized from a pixel-based program.

Visible Logic logo resized from a pixel-based program such as Photoshop.

Your final logo artwork will probably be an Illustrator eps (Encapsulated Post Script) file. Now it’s likely that you do not have Illustrator, so you will not be able to open the file. But that’s OK. You only need to be able to place the finished eps file within documents or provide it to vendors for such things as business card printing, signage, etc.

File type: eps

An Illustrator eps file is the gold standard for your logo files. In fact, if your logo designer says they are working in Photoshop, you are probably not going to get files that will be universally useful for you, your printers, your other vendors, etc. And it will in fact cause problems for you in the future, if not immediately. Whenever you have a reason to pass along your logo to a professional, give them the eps version, unless another format is specifically requested.

The benefit of an eps file is that it can be sized up or down without restriction and without deteriorating the image quality. It also has a transparent background so that the logo can be placed in any situation without a problem. A jpeg, on the other hand, will always have a white box as the background of the logo. Professionals such as graphic designers, web designers, printers and sign makers can convert the eps file to whatever size and format they need.

The problem is often that you may not be able to place an eps file in documents such as Word or Powerpoint files. Whenever you are working on something that requires your logo, always try to use the eps file first. If the software does not let you place or import an eps, then you will be forced to use an alternative format.

File type: Jpeg

Jpegs are the most common image types that many of us are familiar with. They can be easily placed within Word and other software programs. There are two common problems with jpegs files: they do not resize well, and they have a background fill (such as white). Therefore jpeg images need to created with their end use in mind.

Here are some examples. If you are creating a jpeg for a large, printed poster, then the file should have a resolution of 300 dpi, it should be set up four-color (CMYK rather than RGB), and should be at a large enough size that it does not need to be resized very much upon placement in the layout program. On the other hand a web graphic should be saved at 72 dpi, and in rgb format. The size should be close or exactly what it will be on the web page. If you are placing your logo on a black background, for example, you’ll need to create a jpeg with a black background.

As you can see, it’s easy to end up with a large library of these images because you need one for every specific usage. And, you may not have the tools to make all these variations. You’ll need to start with the eps file to create the jpegs in these various formats, and your designer may need to be the one to do that for you.

File type: gif or png

Gifs and png files are an alternative to jpeg, but allow for a transparent background. However, they have essentially the same limitations because they are also pixel based. You will again need to create the file with the correct size and resolution for the end usage.

Developing a library of files

Whenever we design a logo for a client, we provide a large library of final electronic files. The key files are the Illustrator eps files, and we usually provide them in Pantone (PMS) color, four color, grayscale, black, and white versions. That handful of eps files are the most critical.

Then, we build a whole library of jpeg and gif files. We create a wide range of files in different sizes and resolutions to span most of our clients needs. As you can imagine, this is a large library of files. It is not uncommon for us to provide up to 100 different variations for them.

What kind of files did your logo designer provide you? Were they sufficient?

Share

Your Logo: Be There and Be Square

January 14th, 2010

With avatars and favicons, your logo is being pushed into a box. For whatever reason, the standard for these items seems to be a square shape.

A favicon is the little icon that sits just to the left of the URL address in your web browser. On this page it’s the Visible Logic monogram inside a green square. Favicons (short for “favorites icon” because it appears with your bookmarks or favorites) is always created as a 16 pixel x 16 pixel graphic. Very small, very little data, and definitely square.

An avatar is the graphic that represents you (or your company or brand) in places such as blog comments, forums, etc. You could even consider your Facebook profile photo an avatar. Notice, again, how they are all square. There is variation in size, based on the requirements of each web site, but I’ve yet to see a default avatar that is anything but square.

There was a time when graphic designers felt there was almost a sacred space around a logo. Identity standards were created and distributed. These manuals were filled with rules regarding how much white space should surround a logo, and harsh warnings about never cropping or otherwise altering a logo.

There are still many valid reasons for protecting your identity and keeping it consistent. But you also need to realize that you’ll need a square version of your logo. And it should reproduce well at small sizes.

Visible Logic’s example

Visible Logic monogram logoI feel rather lucky with my logo. It was designed before favicons or avatars were widespread. But my thought process was always that I wanted to have logic in my design. So the monogram is the same height and width.

I haven’t always used my monogram within a box, but it’s a version I’ve used more and more lately because it has a bolder presence, and quite frankly because it does translate well into all these formats. Because it works in those formats, I build consistency whether or not I’m in an environment that requires a square.

Don’t Limit yourself to Squares, but have a Square Version

I don’t think it makes sense to design every identity with a square template. If we all did that, there’d be a definite lack of diversity in corporate identity.

However, you should develop a version of your logo that is used whenever a square format is requested. This could be done by cropping the logo, or rearranging the parts. Ideally you should have one version that is used whenever you are faced with this challenge. The favicon has its own very special limitation because it’s square and extremely small, so readability becomes a factor. But for all other applications having a consistent square version will help maintain consistency in branding.

Once you have this version protect and distribute like the logo itself. Protect it from being changed by countless people, but distribute it so it’s used consistently.

Share

Representing the V’s is Visible Logic

August 11th, 2009

VisibleLogic-bwlogo

Visible Logic got a nice tip of the hat, as our VL monogram logo is featured under 100 Brands of Interest. The article originally posted by Swiss designer David Pache and has been reposted to a few different sites. Thanks for the love!

Share