Qualities of a full-page website background image

Question

We are trying to create a web page with a full-size background. The following pages are our inspiration:

• http://www.august.com.au/
• http://www.levehytter.no/
• http://danielfiller.com/

We have created a page with some striking images of our own, but they always seem flat, lifeless and don't give the copy any chance to stand-out.

There seems to be some common qualities of the images that work that we can't put our fingers on.

What are the qualities of images, or techniques used on those images, that would allow them to be used more effectively as a full-screen web page background?

Answer 1

In order to address your own situation the first question might be what you hope to achieve with the landing page. Is it to showcase and highlight the aesthetic qualities of a product, is it to give a insight into the quality of one's work, perhaps to simply catch the viewer's attention long enough to engage them? A purpose allows you to develop a clear function of the image which is essential to how it's displayed, what post-production techniques you use to show emphasis, and a world of other options.

It's a little difficult to address your particular situation without seeing an image, but speaking more generally, I think there are a variety of characteristics which combine with striking images to make successful landing pages.

Visual Chunking

Visual chunking is a way of separating distinct contrasting areas of content and allows a viewer to more easily grasp the narrative you are trying to present on a landing page. All three examples you presented do it to a degree while it could maybe be argued the August website doesn't completely do it. I would argue, however, that because of this the August landing page might be the weakest composition of the the three examples. This technique, in combination with strong contrasting images combines the emotional content associated with the photograph with a quick understanding of what it is you, your website, your company, etc, is trying to represent.

Focal Points

The images are edited in a fashion that directs the user's eye with a specific intent by using an immediately drawing focal point. This is almost always done in over the top way because timing on landing pages is more critical. There are recent studies that show over half of initial viewers will bounce from your web page within 8 seconds if they can't infer professionalism or there isn't clarity in the experience. This necessitates that you use focal points to lead the eye in a clear, controlled way.

These two images show stark uses of contrasting areas between highlight and shadows. Your eye first gazes to the striking part of the image and then immediately to the text.

Directional Cues

Surprise surprise. The same images that have glaring focal points also have suggested paths for your eyes to follow. In the first case, the roof uses a diagonal to create a path to the text and the second uses a very subtle rainbow for you to follow to the heading. Again, this is used because time is a priority on landing pages and if you can control the path the viewer follows you can more efficiently shape the experience.

Overall I would say it isn't the image alone that creates an effective landing page, but your ability to position other content in satisfying your intent of the landing page. What are you trying to say and how can the image be used to effectively communicate it?

Answer 2

One thing that those three images have is depth: the sky between the mountains, distance to the ski lodge, and using the depth of field in the last one.

Something I'm working on at the moment also has a sense of depth, which seems to work quite well. I'll either use a pale panel on the left for the text or carry on with white. But because the image already has a sense of depth, the text will always appear right at the front. You can see that the text in this reduction appears to stand on a plate of glass in front of the car.

In the full-size version, the main car image is slightly blurry because the image is resized. That effectively puts it out of focus, which also enhances the sense of depth. As the text is beautifully sharp compared to everything else, it is brought to the front.

This image was originally created around 2002 by MG Rover as a publicity shot for their TF model.