Web Site Design Tip: Highlight Logos With A White Background

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.

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.

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.