Adobe Creative Cloud

August 10, 2016 /UX/UI Design /

Don’t Be Cliche! 10 Ways to Use Stock Photography in Web Design in 2016

Bear with me as I say this … but certain types of stock images have grown to be so cliche right now that using them actually brings you – and your site – more harm than not using images at all.

Here’s what I mean:

First off, stock images are great, as it is. I mean, the idea itself is great! When I was starting out in web design – very amateurish – around 2005, stock images were all the rage!

This was an opportunity for every web designer to have the perfect picture included in their design, and without having to take that picture on their own.

But then, an interesting and maybe inevitable shift started taking place. The web began to get noticeably saturated with images of, for example: “people shaking hands and smiling,” or “people sitting in a meeting, happy about everything,” or “that pretty girl with a headset on, pretending to work in a call center,” and on and on and on.

And all was fine until, eventually, people – web visitors – started to notice those trends, causing those cliche-type images to lose their power significantly. I would even risk saying that there’s something like “stock image blindness” right now – mimicking our good ol’ friend “banner blindness.”

So how to get over issues like that? What types of stock images can you still use, and how to do it in a way that makes your web designs better off, instead of making things worse?

Those are all the questions we’re going to answer today. Here’s our guide on how to use stock photography in web design in a non-cliche way:

1. If you’re not quite sure if an image is cliche or not, it probably is

The main reason why we use pictures in the first place is because they help us achieve goals that we have set for the design, and thus make the whole experience better for the visitor overall. Hence, every picture that makes the visitor feel uncomfortable in any way can, and will, defeat those goals very quickly.

A badly used cliche image will make your audience realize, “hey, this isn’t your photo!” which will then immediately take them out of the whole experience, and question the site’s authenticity. In essence, you can kiss your goals goodbye.

For that reason, the best way to start evaluating the photo that you’re considering for your design, is to put yourself in the visitor’s shoes. In other words, ask yourself this: “Would this image get me unwanted attention as something that simply doesn’t fit?”

If the answer isn’t a resounding “hell no!” then it’s a “yes.”

Lose that image. Look for another one.

2. Use stock images for backgrounds

We’ve talked a lot about background images over at the Dreamweaver blog. I encourage you to check it out to get the complete how-to.

Long story short, stock images do a flawless job when it comes to backgrounds. That’s because:

  • stock images, especially if you go here, are of high visual quality, which means they’re easy on the eye,
  • they’re also high-resolution, which means that they fit any screen and device,
  • you can find stock images of any type and style, so you can always get something that fits your brand.

And most importantly, with a subscription account, you can test tens of images before landing on the one that fits your design perfectly.

3. Use stock images for hero sections

Hero images are another topic we talked about previously, so please check this out for the full how-to.

Similarly to background images, hero images are one more piece of website real estate where stock images can really shine.

The key here, however, is to laser-focus on the goal of the hero section and the emotion it’s meant to convey, or the action it’s meant to promote. This will require some trial and error, and potentially going through tens of images, but it’s very much doable with a good stock library (ekhm!).

Here’s an example by TaskRabbit:

taskrabbit

Please notice how the site connects its main message of “getting tasks done” with hero images that simply present people performing related activities.

By the way, abstract images are sometimes really good at this particular task too. Check out these geometric collages by Carolina Niño.

4. Use stock images for emotional impact

There are very few tools in a web designer’s toolbox that can invoke certain emotions or help you put the audience in the right mood.

Copy and words? Sure, those work well, but you need a really talented copywriter to make it work. And sometimes the quality of the copy is out of your control entirely.

What you can do, though, is pick the right images and the right color schemes that will make a certain emotion possible.

First off, Adobe Stock allows you to use very different keywords in the main search field, which means that you can utilize names of emotions or any other term that can best describe the effect you want to achieve.

Also, the main advantage of using images for emotional impact is that people won’t question whether the image is your own original creation or comes from a library.

5. Don’t experiment with inauthentic representation

Okay, this might sound confusing, but what I actually mean is using stock images for representing either the products or the people that are part of the company behind the website.

For example, there’s nothing worse than an obviously stock image presenting a team of random people on your website’s “team” page. Or that popular picture of an attractive girl wearing a headset pretending to be on the site’s support team. People can really see through those, and won’t be impressed.

The same goes for any inauthentic product images that “kind of” look like the thing that the website has on offer, but not quite.

Those simply won’t work, and will get the visitor out of the whole experience of consuming the site’s content. They will immediately start wondering if the picture’s fake, and what follows, if the whole site’s message is fake as a consequence.

In general, you’re always better off just taking all product pictures yourself. Here are 8 tips to help you do so.

6. Use stock icons or flat/material design graphics

Icons and vector graphics are one of the strongest types of stock imagery. Whereas with standard pictures you can potentially end up with something cliche, icons are meant to be cliche by nature.

Actually, I would even say that icons only make sense if they’re cliche enough. Otherwise, people won’t associate the icon’s meaning right away with its visual presence. Like this gears icon, for example:

gears

It can only mean a few things … most likely representing “settings.”

So use various kinds of stock icons for buttons, menu items, and other small elements of the website’s UI. Or, another possible use, social media icons. For instance, with a good icons library, you can include some custom “Like” buttons on the website. Example:

like

Next, we have flat design or material design graphics. Let me just give you an example – if you need hip and minimal graphics of coffee-related utensils and accessories, you can find those easily, instead of having to spend time creating them yourself.

coffee

Of course, you can find similar illustrations around myriads of other topics, not just coffee.

7. Use stock images for pictures of actual places

Depending on the kind of website you’re working on, you might need pictures of actual places, cities, or tourist attractions around the world.

You probably won’t be surprised, but stock images are really good at giving you the best of such images. And even for places that aren’t Paris-popular. For example, here are some for Malaga – a rather small city in the south of Spain:

malaga

In most cases, if you’re working on a website that mentions or focuses around a certain geographical location (like a hotel website maybe), then stock photos are the only way of getting quality pictures of the region without having to go there and take them yourself.

8. Use stock images to spice up site content

Site content, like blog posts or static pages, can sometimes really benefit from additional images, either to break the content down visually, or illustrate certain points. Also, images can be used to serve as “featured images” that can be included when sharing content on social media.

Again, the effectiveness of such images is only high if they’re congruent with the message of the page and don’t look out of place. Here’s an example by Bogdan Dreava:

camerastock

An image like that can go alongside any content related to the topic of photography or photography equipment. The image is neither overly shouty, nor overly stock-like. Essentially, this is the kind of image you should use with site content.

9. Use stock images for education websites and content

Stock photos of high visual quality are often perfect for educational purposes – whenever a certain “something” needs to be visualized.

For example, staying with the topic of photography itself, if you’re creating a website for a photography course, then you can easily use a stock picture of a photo camera to describe some individual elements of the camera’s construction.

camerastock2

The same can be done with many other items and topics that people educate themselves on.

10. Use stock images if you need them to fit a specific color scheme

When you’re working on a website, finding photos that fit one very specific color scheme can be hard, especially if you don’t want to distort the presentation with photo filters.

Those requirements might be dictated by the corporate identity of the company that hired you to create the design, or by the current design style itself (and the look and feel you’re aiming for).

Now, it just so happens that this is one of the flagship features of Adobe Stock’s on-site search engine (my favorite feature, to be honest). Just type your keyword in the field, and then select the core color, like so:

colors

As a result, you will get exactly the types of images you need, and they will fit the color scheme perfectly.

Okay, that’s it for our quick guide on how to use stock photography in web design in a non-cliche way. If you have any questions, feel free to share them in the comments below.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD