How to use photography in web design

The power of a good visual isn’t just a scientifically well-documented phenomenon; it’s the whole reason our industry exists. Indeed, our existence as a species is largely defined by our sense of sight. What we see, and how we interpret the things that we see, is a major factor in determining our actions and thus, the course of our lives.

You can hear, read, and think about anything at all, any concept, any object, or any person; but you’ll have a harder time understanding it until you’ve seen it.

Have you ever met someone who has never seen snow for themselves? Maybe you are one of those people. The few I’ve met simply can’t comprehend what it is. Oh, they know it’s moisture in the air that got nice and cold, but they don’t get it. I’ve met a few who told me about their first encounters with snow; and I witnessed the sheer wonder, the amazement on their faces at this white stuff that just fell out of the sky. I’ve heard of one or two people in far off countries who had snow described to them, and didn’t believe it. They thought these foreigners were just making it up.

Visual media, such as photography and video, are the closest that we can come to experiencing life elsewhere without going there ourselves. When you add a photo to a website, you’re not just adding pretty pixels. You’re offering your users a miniature experience to go along with whatever you’re selling.

Need I emphasize just how important it is that you pick the right experience?

Photography as design

When I design a content-driven website that needs imagery, I turn to photography over illustration every time. Now, this is mostly because I can’t draw more than a stick figure to save my life —if you’re an illustrator, or have one on your team, then more power to you! I’m jealous.

The right photo can take a good design, and make it great. The right photo can be the solution to the itching in the back of your brain that says, Something’s just missing. But it absolutely has to be the right photo.

Contrast

Because usability comes first, make sure that the photo you integrate into your design has the right kind of contrast. Chances are, you’ll be putting things like text on top of it, and there is nothing more irritating than text you can barely read. I’m looking at you, thin-white-fonts-on-light-backgrounds.

To find the right kind of contrast, start with the obvious: if the photo is light, use dark text or elements, and vice versa. If you want to use light text with a light background, put something dark in between the text and the photo. A subtle drop shadow is usually acceptable.

Quality

Let’s say that you’re making a website for a small restaurant. What kind of photos do you want in the design? Do want a photo taken by somebody who stood across the busy street, and snapped photos with a point-and-shoot camera in their shaky hands? Do you like answering rhetorical questions?

If your client hasn’t had photos of their business and/or products taken by a professional, try to convince them to get that done. Failing that, tell them all about how awesome minimalist design is. Not having photos as a part of your design is better than trying to work with bad photos.

Relevance

A picture might be worth a thousand words, but some words are more relevant than others. This should go without saying, but you need to use photos that have something to do with whatever you’re selling. In the case of the aforementioned restaurant, you’ll want to use photos of the actual business, or their actual food. With this kind of business, stock photos will not do you any good.

When you’re selling something a little bit less tangible, like insurance for example, you can get away with using photos that are more symbolically linked to the product or service in question. Make sure, though, that the symbolism is strong, and easily recognized by your website’s users. Symbols vary from country to country, and culture to culture.

Big images sell

This seems almost a little obvious if you think about it. Bigger images will have a bigger visual impact. I mean, why not?

Well, the lovely people at Econsultancy decided that just thinking about it wasn’t enough. They needed data. They published their findings in three case studies, which you can read here.

Photography as content

Photos aren’t just great for completing a design, of course, they also make great content, especially when they are paired with non-visual content such as text or audio. This can serve one of several purposes:

Drawing attention

An eye-catching image can be used to represent an article or page, drawing the user’s attention to the content in question. When confronted with large blocks of text, especially online, the human brain tends to start skimming over it, instead of reading it in detail.

Photos can break up the visual monotony, and help users to identify an article, link, story, or what-have-you that they might be interested in. If you remember anything from this article, remember this: imagery makes people stop and pay attention.

Context

Photos can provide the user with visual context for a text-heavy page, article, or audio file. Visual context may consist of things like a picture of the author, a picture of a place mentioned in the text, and so on.

Be careful when choosing a photo to provide context. The photo you choose will likely set the reader’s entire mood, so make sure that the mood of the photo fits the mood of the article.

Other considerations

Permission

If a photo’s not yours, or doesn’t belong to the client, then make sure that you have permission to use it. Get that permission in writing if you can, and always, always credit (and link back to) the photographer unless they have specified otherwise.

It doesn’t take that much work to plan ahead, and ask for their permission in advance. Still, there are ways to avoid that. This brings us to stock photo sites.

Stock Photos: free or paid?

The advantage of stock photo sites is that you never have to wonder where you stand when it comes to permission. Better still, there are a bunch of sites where you can get great stock for free. But, you may also want to look into paying for your stock photos, especially when you’re picking photos to be used as part of a site’s design.

Free Stock Photos – Advantages:

• Free. Seriously, it’s hard to beat that.
• There’s a large selection of good ones out there.

Free Stock Photos – Disadvantages:

• There are also a lot of bad ones. You may have to sort through a lot of trash to get the photos you need.
• You may never find what you need. Sometimes you need something very specific that isn’t there.
• Permissions vary. Some photos will require an attribution link, which may be less than ideal in a design.

Despite the disadvantages, free stock photos are often the way to go. I’ve found the best ones at stock.xchng, StockVault, and with some considerable searching, DeviantArt. (Happy hunting!)

Paid Stock Photos – Advantages:

• If you buy a photo, then you have all the permission you need, usually.
• More varied, more (and sometimes weirdly) specific photos.

Paid Stock Photos – Disadvantages:

• Well… the money. I mean, stock photos are getting pretty cheap these days, but that just makes them like songs on iTunes. When they only cost a dollar, it’s so easy to just buy “one more”.

There are myriad paid stock sites, so it really depends on which one has the photo you want. You could always start with some of the more popular sites: Shutterstock, iStockphoto and Dreamstime.

Photos of people

Lastly, we must consider photos of people. Never, ever use stock photos of people in your design (at least, not if they look like stock photos). They may as well be mannequins for all the feelings of authenticity that they invoke.

Use photos of real people, the people behind a product or service. Show them at work, preferably. If the products being sold are meant to to be worn, pictures of models wearing said items are also acceptable.

But photos of random people blinding the user with their unnaturally white teeth are pointless unless you’re advertising a dentist. Even then, you could probably be more original.

In conclusion

Be careful when choosing the photos you use in your design and content. Make sure to budget in enough time to find the right photos, because the process can take a while. Don’t settle for anything less than a great photo.

What tips would you add for using photos in design? Do you use stock photos or take your own? Let us know in the comments.

Featured image/thumbnail, photography image via Shutterstock.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.