Design / Usability

Email this article Printer friendly page

How to Choose Effective Website Photos and Images. Part 2 Sandra Niehaus , Closed Loop Marketing - Dec 15, 2009

---

This article continues a series of guidelines to help you with website image selection. In Part 1, I covered some general principles to consider, including the image's mood, uniqueness, content quality, and contextual cropping. In this article I'll discuss ways to use images to support and reinforce a business brand.

Guideline #1: First, have a clear understanding of your brand

Before we look at how images can support your brand, let's back up one step and look at your brand itself. How clearly can you describe your brand? Do you know what qualities you wish it to convey? If you were to summarize your brand with only four descriptive words, what would they be? And, even more importantly, would your target audience agree with your assessment?

At a strategic level, image selection is simply an outgrowth of foundational marketing principles. Once you've solidified your brand's ‘personality', message, and unique value proposition, you'll be able to judge not only images but colors and copy as well against those standards and select what fits best.

As an example, let's take a look at two fictitious company brands and their targeted characteristics.

Company 1 -- "LotsaSocks.com"

Unique value proposition: Unique, fun socks from around the world at bargain prices.

Four descriptive words that summarize the brand:

• Plentiful
• Fun
• Multicultural
• Affordable

With this basic brand description in hand, image selection gets quite a bit easier, because now you have a filter to use. You can run through the descriptive words as a checklist, asking, "Does this image communicate fun? Plenty? Affordability? Multiculturalism?" In my mind, if the image should convey at least two of your brand's qualities, otherwise it doesn't belong on your site.

Possible images for this site:

Our second fictitious sock company has a very different set of desired brand characteristics:

Company 2 -- "SocksForRealMen.com"

Unique value proposition: The most durable, manly socks in the world for work, sports, and business.

Four descriptive words: Strong, Masculine, Non-Nonsense, Durable

Possible images for this site:

One way I recognize good prospective images is when they inspire me to think of taglines that are aligned with the brand intent. For example, when I saw the above image of the businessman reclining on the sofa with his shoes off, I thought, "Socks that can outlast your work week." The hiking photo made me think of "Your socks will make it -- will you?" And the photo of the socks and the daisy inspired "Relax -- our socks have got the fun covered." Of course, these are rough and unrefined ideas, but when this happens it's a signal I pay attention to. It tells me that the image has some depth, hints at a story, and communicates an on-brand message.

Guideline #2: Do the image colors support your brand?

Color -- or lack thereof -- can be one of the strongest branding elements on a website. Through associations with natural, cultural and artistic uses of color, we subconsciously relate different colors with a subtext of characteristics. Controlling the use of color in your website images, then, is one way to reinforce your brand.

If you've already developed a color palette for your brand, then you can use it to guide what colors to emphasize with your images.

These next two famous brand examples illustrate the power of focusing on a single color:

Larger image

Tiffany is well-known for its distinctive teal-blue branded color. On this page, notice how the color is brought in not only in the outer page background, the main text box, navigation and headlines, but in the photograph. Everything in the photograph is of a fairly neutral hue -- except for the Tiffany box the man is holding behind his back. That element pops out of the photo in a way it would not if the woman's dress were red, or the flowers were bright yellow. On Tiffany.com, the use of color is highly controlled, and is very effective at supporting the company brand.

Another company with a single strong focal color is Coca-Cola.

Larger image

 

On the Coke website, red rules, with subsidiary colors of black, silver and white. While Coke allows other colors in its images (note the green in the image above), the red clearly dominates.

Of course, before you select images based on your company color palette, you first want to be sure that your palette truly upholds your brand. Imagine for a moment if Tiffany and Coke swapped color palettes. Tiffany's gift boxes become bright red, and Coke's logo turns a beautiful teal blue. It seems wrong, doesn't it, even in your imagination? That's because the color subtext and connotations don't work as well with a very different brand.

Although a discussion of color theory is too much to cover in this article, you can learn the basics pretty quickly. (See Eiseman, Color - Messages and Meanings below.)

Two quick color cheats

Often it's difficult to find images that use your on-brand colors, especially when you're on a budget. So here are a couple of easy color cheats you or your designer can accomplish with simple image editing software -- cheats that can take a standard stock photo and make it your own.

First color cheat -- the "wash"

For this cheat, an uncomplicated image works best, one that has only a few elements. Let's start with this one, from our SocksForRealMen website:

Let's say the company color palette includes blue and gray, but no brown or orange. The first thing we want to do is get rid of all of the color, essentially turning the image black-and-white:

The exact method you use to do this will depend on what image software you have. In Photoshop, for example, one quick way you can make this change is by opening the image and selecting "Image > Mode > Grayscale."

Once you've removed the non-brand colors, you now want to add an overall "wash" of a branded color, thus:

In Photoshop, this can be done by adding a solid-color layer and setting its blending mode to "Overlay".

Technical how-to's aside, the point is that with this technique you can control the use of color and create images with a color treatment that supports your brand.

Second color cheat -- the "pop"

Remember the Tiffany image we looked at above, and how the box in the man's hand was the only element with a branded color in the photo? The "pop" technique is something like that. Assuming you have a strong enough color in your branded palette, you add that to a single element in an otherwise neutral image.

The trick for this technique is to start with an image that has one item in it that is clear and easy to see.

For example, let's start with this image:

In this photo, a good target for a color change is the umbrella. It has a recognizable shape and stands out clearly. Also, the rest of the image is relatively neutral, with no other strong colors.

Assuming red is a branded color for your site, we would simply select and replace the black umbrella color with red:

Now we have an image that reinforces the branded color palette, rather than a generic, unbranded image.

Resources

Since I rambled on a fair bit about color this time, I'll pass along a couple of my favorite practical color references.

Leatrice Eiseman, Color - Messages & Meanings: A PANTONE Color Resource (Hand Books Press, 2006, ISBN 0971401063). A book to help you understanding the meaning and effects of color. Leatrice Eiseman has several other helpful books on color.

Classic Color Schemes, Color Wheel Pro.  A brief introduction to basic color scheme types.

Adobe's Kuler. A great website to find and create color schemes, once you're comfortable with the psychology of colors.

Until next article, enjoy!

Part 1 | Part 2 | Part 3

As VP User Experience and Creative Director of Closed Loop Marketing, Sandra heads up the company's usability and conversion optimization projects. She is co-author of the book Web Design for ROI (New Riders Press), and regularly speaks on the topics of usability, design, and conversion at industry and business conferences. Sandra has contributed her expertise to projects for a wide range of companies, including Hewlett-Packard, Brocade, ReelzChannel, and Allstate.