Transient

A very powerful way of making impressions and showing a story in a design is with photography. However, handling the power of photography is a great responsibility, because just as it was able to make content exciting, it can also destroy it.

BENEFITS OF PHOTOGRAPHY

It is hard to make a website exciting if the content is not visually appealing.

A quick way of adding some substance is to use an image for the background of the website. The benefit is that you now have texture that makes it livelier than a solid color. From a distance this can look great. However, there are some things that should be avoided to keep it from ruining the usability of your website.

EXAMPLE OF BAD BACKGROUND DESIGN

I blame the collapse of MySpace on background customization. Users customized their profile backgrounds in the worst ways. They’d repeat overbearing photos across the website and place their text over top of it, rendering the website’s content illegible.

The lesson here: background images are intriguing and can add style to a website, but be careful that they don’t take away from everything else. 

BACKGROUND IMAGES AND USABILITY

Sometimes a website becomes unusable to everyone except for the person who created it.

Because they work on the website so much, it can be hard for the creator to see past what could be wrong with it.  A website might be hard to navigate for instance, but because the creator knows where to find everything, they can therefore navigate the website easily.

If you think you could be one of these people, step back from the website for a while. Come back with refreshed eyes to what your users could dominantly be seeing. Better yet, have someone else look at and use your website and ask them for feedback. 

Since we are on the topic of usability I’d like to add this side note: I know that drop shadows can now be placed under your text to make it look bevelled or engraved, but this distorts the physical appearance of the text and makes it harder to read. Even though it looks nice stylistically, the brain needs to translate new information. It doesn’t need to be that way. Just imagine how difficult it is to read a novel engraved in stone. We are centuries away from needing to do that again.

BACKGROUND LOAD TIMES

Visitors can begin to dislike the background image when it starts to cut into their browsing time. The slowest websites are the ones with many images. A big bandwidth snatcher will be the background image on your website and they will blame it for making them wait. This can make visitors reluctant to explore more pages if your website is using new images for each page.

SOLUTIONS TO BIG NOISY BACKGROUNDS & LOAD TIMES

Tile-able background patterns don’t take much bandwidth because they are smaller, but if they’re too distracting or too colourful it could still cause a problem. 

Text should be on solid background colour because even the most subtle background textures can be annoying if you can see them through the content you’re reading. Reading over noisy particle backgrounds or the subtle changes in color of each individual pixel of a raster image is more work for the user. 

Finally, have a clear separation between background and foreground. There needs to be depth between what is in front and behind. All the attention should be in the foreground, so leave the back to do what it needs to do, “support the foreground and not compete with it.”

CONCLUSION

Images are interesting, but no one visits a website to look at the background image. Ask yourself if it’s supporting the usability of the website. Is its contribution more important than the convenience without it? Understandably photographers and illustrators use background imagery to convey their talent, but there are others ways that don’t affect the performance of the website.

Here are a few links to some good examples of cool websites with backgrounds that effect the content in some form or another: