How to use photography in web design

Default avatar.
August 20, 2013
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.

clouds_over_cuba

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.

blacknegative

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.

defringe

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.

Read Next

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…