Are detailed background images distracting or awesome?

Published on February 1st, 2012

Back in the early times of website design, when the idea of having images was still new, I remember using the technique of a dramatic image as the background. It drew people’s eye and helped differentiate the website. Eventually, designers decided it was a bit busy, and design turned more to using header photography with basic patterns and gradients as the background to subtly break up a large plain color field. It seems the dramatic background photo is back! I have been noticing many websites adding a splash of vivid color, or using a muted mysterious photo behind their text areas. It is more sophisticated than in the 1990s—with fake page curls, drop shadows, and elegant shapes, but is it really to a website’s advantage?

To help determine whether or not to consider using the revived photo technique consider these questions:

Is there an important or beautiful location associated with the website?
A real estate site selling a Victorian home, a Zen retreat centre, a restaurant on the river—those are the sorts of websites that can really benefit from the technique. If the location isn’t important to the business, or does not have a spectacular visual appeal—car repair shop, ice cream vender, locksmith—using the photo background could detract from the business by highlighting the lack of excitement about the location.

Is your product or service a strong visual?
In the website example above, the archaeologists realized that a dig site has potential for dramatic images. The locksmith with the tiny shop can instead feature beautiful wood table strewn with all sorts of keys, the ice cream vender could avoid showing the cart and instead feature mouth-watering pictures of ice cream that seem to almost melt off the page. Other products do not have the same grab visually. Think honestly about your product—it could be incredibly helpful and still not be a power-house in the photography department. There is nothing wrong with that, it just means using the photo-based website isn’t such a good idea. If the service offered is something like insurance, there probably aren’t many images you want to use. Burning houses and people dying will frighten people, not help the business. On the other hand, services like house painting have potential for some especially fun background images.

Sometimes images can be used in the background that are not directly associated, but can still be helpful and interesting visually. A company that makes robot parts for undersea submarines can use beautiful photographs of underwater scenes, for example, even if the product itself isn’t much to look at. Be careful about what to use, though, if it gets too far off people will be confused. A site selling gardening tools that keeps using photos of flowers can look like they are a seed company instead.

Not every website is a good choice for the revival of the strong background photo, but some are. Think about whether it could help on your site—even just on the homepage to give a visual punch when people first arrive.

A billboard is not a brochure, and a website is not a magazine ad

Published on January 4th, 2012

As I was driving around during December, I noticed a lot of banners hung by churches out on their front lawn or by their parking lot advertising their Christmas Eve service. The image above is a quick reproduction of one (with the church’s name changed) that floored me. Here you are driving along at a brisk pace—all I could read was “Christmas Eve Service” and then a quick look at the tagline. That’s great but it obscured the one thing people needed to know—what time it was! There is no point putting a large banner out and making the key information so small that the target audience (ie drivers) can’t read it. I made another mockup of how the billboard could have looked instead.

Notice the time is obvious, but you can also quickly read what it is also. I’ve seen even worse examples of signage that included entire paragraphs out by the road or highway on billboards. Unless you are in the middle of commute traffic and at a dead stop right in front of it, there is no way anyone in a car could read them. The above is an example of trying to apply the rules of one area of graphic design to another—it doesn’t work.

When thinking about website design, it is also easy to fall into a similar trap. Picking up a print brochure and simply retyping it online doth not a website make. It is not interactive, it tends to be in-your-face ad copy, and people do not have the patience to sit through a big wordy static website these days, especially using mobile devices. On the other hand, I’ve been to sites that took a highway billboard and put it up as their website—when trying to find key information it is either obscured or not on the site at all. Just today I was looking at a girls summer camp website trying to find their prices because I wanted to help with a scholarship grant. Did the website bother to list the prices? No they did not. Here are some quick things to think about when switching between different applications of graphic design. Which one is your current website leaning toward?

Billboards
Good – Easy to read uncluttered look
Bad – Often leaves off crucial information
Ugly – Seems too punch in the face in its advertising which is offputting

Direct Mail / Brochures
Good – Concise well crafted paragraphs of information and pictures
Bad – Can have overwhelming amounts of text that scare visitors
Ugly – Bland and static, discouraging customer engagement

Magazine Ad
Good – Compelling photography or illustration and strong headlines
Bad – No content there, visitors leave quickly when not finding anything
Ugly – Static look or it seems like everything is just a call to action with no meat to it

Email / Eblast
Good – Streamlined coding behind it, strong direct message
Bad – Usually they are either too lengthy or too short for website copy
Ugly – Few or no images due to email restrictions

I could go on, but you get the idea. What makes a fabulous billboard or a lovely print ad campaign does not necessarily translate instantly onto a website.

© Old Hat, New Look