Using Stock Photos in Web Design

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">How to use stock photos in web design</p></div></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Stock imagery has somewhat of a stigma: over the years, we’ve all seen far too many bank websites with heads and hands in offices, as well as all smiles dentist clinics. You want your website to be unique and original, and, perhaps surprisingly, stock photos can get you there with just a few tricks. Let’s see how.</p></div></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">In this article, we’ll demonstrate exactly how we approach stock photos by showcasing some of the projects that we worked on.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">2017, Jonathan Barnbrook, <a href="https://www.behance.net/gallery/110424749/Deutsch-Online-Brand-Identity" class="underline">Deutsch Online</a> is the largest online German learning school in Eastern Europe, for which we’ve created an energetic identity that immerses you into cool Berlin streets, all done liberally using stock photos for collages</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Why use stock photos</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Why even use photos at all? We might be reiterating the obvious, but visual content is far more engaging than text alone. According to <a href="https://www.nngroup.com/articles/photos-as-web-content/" class="underline">this research </a> by Nielsen Norman Group, users spend far more time looking at pictures than reading. But, we’re quoting here, "In contrast, users ignore stock photos of generic people."</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Yet a professional photoshoot is expensive, time-consuming, and limits your brand’s flexibility: if you can’t afford the resources for another one, you’ll have to use the same few photos in all your materials. Which would look even cheaper than just something from stock. Meanwhile, stock imagery doesn’t end at vague people in indiscriminate places.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://stock.adobe.com/" class="underline">Adobe Stock</a></p></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">A stock photo used well doesn’t look like a stock photo. There’s plenty to choose from, and the right stock photos can take the visual identity of the project to new heights.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">For <a href="https://www.behance.net/gallery/111122399/Simla-Brand-Identity" class="underline">Simla</a> we used positive photos to highlight the striking and exciting visual identity</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">How to pick the right photos</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">You don’t want a stock photo to be too specific: the more particular and stylized it is, the less designer has to work with. Yet, it can’t be too impersonal either, as we don’t want it to look like a stock photo. The rest depends on the project: people and what are they wearing and what are they doing, subject matter, the right color schemes. There’s no guideline for every possible project, so let’s take a look at some examples.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://www.behance.net/gallery/118582465/CMA-Brand-Identity-Web" class="underline">CMA</a> is a global provider of complex financial solutions. Financial products that need to be serious to this day wanton drop photos of people in suits. We use stock photos of architecture to give the world-spanning feel to the website</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Customizing</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">But they’ll require some tweaking. To fit a brand, a designer can take a stock photo and add unique elements, recontextualizing it entirely. Or at least color correct it, so it better fits the visual identity.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">In our project for <a href="https://www.behance.net/gallery/107997033/TL-Dental-Website" class="underline">TL Dental</a>, the usual dentistry stock photos are mixed with those that are serene and tranquil. And the unavoidable smiling dentists are color corrected to fit the warmth of the design</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Where to get stock photos</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">There are plenty of places where you could get stock photos. We prefer to use <a href="https://www.pexels.com/" class="underline">Pexels</a>, <a href="https://unsplash.com/" class="underline">Unsplash</a>, <a href="https://www.shutterstock.com/" class="underline">Shutterstock</a> and <a href="https://www.istockphoto.com/" class="underline">iStock</a>.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">In this article, we’ve focused on the photos as they’re the most versatile and customizable, but there’s more to stock imagery: there are also videos and illustrations. These are always more particular, and are harder to fit into an existing visual identity. But there are always corner cases.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style"><a href="https://www.behance.net/gallery/114983081/ESCAPENOW-Website" class="underline">Escapenow</a> provides an escape from the busy cities: we clash stock footage for the contrast and to easily showcase the concept. In video editing, using clashing footage to create a new meaning is known as The Kuleshov Effect.</p></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Outro</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">After we finish a project, we provide extensive guidelines on what photos are appropriate to the brand identity. You can then support it indefinitely, all without setting up a costly photoshoot.</p></div></div></div

<div class="mt-16 mb-104"><p class="text-gr">An excerpt from our brandbook for <a href="https://www.behance.net/gallery/126080091/Bravecash-Branding-Web" class="underline">Bravecash</a> next to its dynamic website.</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">A good stock photo doesn’t look like a stock photo. Using the right approach, it can immensely benefit the visual identity, all with the style remaining unique.</p></div></div></div