Designers are increasingly adding great photography for branding and storytelling, and when done well it sends a powerful message. Most of the internet can be broken down into text and images, and yet in the design industry we haven’t spoken much about the difference between good and bad photographic curation and placement. This is part one of a two-part series on how to use imagery well in your design work. You can read part 2 on How to Use Photography in UI here.
Let’s begin with an example.
Take two competing brands: VRBO and Airbnb. Both allow people to book vacation rentals from homeowners. Let’s say you ask your friends to send you some dream vacation spots, and you are sent links to two rental listings:
Airbnb listing in Berlin
A VRBO listing in Hawaii
Each of these pages is there to tell you a story about what this rental is like and metadata about how to rent it. These stories are told entirely in UI, text, and photos, and as you can see they are quite different. In this article, we’re going to look at how photography is selected and curated to form a brand. In part two we’re going to discuss the presentation of photos in designs.
In the two listings shown above, one could argue that the Airbnb one is much stronger, design-wise. It includes a large, beautiful photo that gives a great sense of the space. The VRBO listing’s photo is crammed next to a bunch of other UI, and shows a cluttered space with little room for people. It feels flat, whereas in the AirBnb listing there’s a sense that you could step through the screen and right into that room.
But before getting into the details of UI design, let’s zoom out.
Think about our Airbnb and VRBO example above. For each company try to imagine the most “typical” photo you can that represents a listing on that service. Are they different? If so, you’re reacting to the brands, and they have been crafted differently. Which resonates more with you? And what factors have helped build that image in your head?
A brand is the personality of your company or product, created by the touchpoints between it and the world. Nearly all brands have a visual element defined by some balance of illustration, print materials, and real-world imagery, but some do it much better than others.
Here’s a litmus test you can try: choose a product or company, and think of a photographic scene that represents its brand. The more clearly that brand has established its photographic identity, the easier (and more specific) that photo will be.
Let’s start with less-developed brands in terms of photography. Take Dropbox. What is a typical photo that represents their brand?
Dropbox’s photo-centric service, Carousel
It’s hard to think of more than a vague “photo of friends doing stuff.” Dropbox’s brand is built around colorful, sketch-like illustrations, and thus they do not have a developed photographic brand.
Technical products like Dropbox (or Twitter, Mint) often use illustration and colors heavily in their brands and steer clear of photos. These companies depend largely on icons, UI, and colors to establish their visual identity, with only the occasional supporting imagery.
Let’s try some more developed brands:
National Geographic: vast, stunning imagery of nature and wildlife; vibrant, contrasty, epic
National Geographic is known worldwide as one of the oldest and most prestigious companies in terms of photography. Many nature photographers aspire to shoot for the magazine, which includes landscape and wildlife photography from some of the most stunning locations on the planet. If you see an epic, vibrant, and wild nature shot in any context, it’s easy to think “This looks like a NatGeo photo!”
Nike: cinematic, larger than life, speed and strength, grit
Lifestyle and information products often lean more on photography and video. They work extremely hard to develop an aesthetic that includes real world imagery. Take a fashion brand or media organization and picture a typical photo for them; something should spring to mind much more quickly. These companies have incorporated photography deeply into their brand, and it shows.
Everlane: minimal, understated, bright and desaturated, hip, calm, unassumingly refined
Photographically strong brands have some great advantages. They are dynamic, because new photos are fairly easy to get, and can send a huge variety of messages. They are emotional, because photos can impact us immediately with real world stories and feelings. And when done right they are timeless, reflecting human truths that don’t change with the season.
Airbnb: warm, open, people in beautiful spaces
So how do we create a great photographic brand for our own products?
Grab photos from all over the place that look the way you picture your own photography working. Grab things from (inspiring) competitors, from magazines or lifestyle brands, other products, stock photo sites, wherever. Go with your gut, but also show stakeholders and users your moodboard to see whether it resonates with them.
Moodboard made for Priime’s collaboration with Kelly Victoria
Be aggressive in curation. Only keep photos that truly stand out and harmonize with each other, and eliminate the rest. Many good photographers post a small, small percentage of the photos they take, with 99% ending up on the cutting room floor. Do the same for your moodboard.
Once you start getting a feeling for what kinds of photos are working, look for patterns and collect them into a style guide. Having a playbook for the kinds of brand imagery you want will help you and your team stay focused and consistent. Write guidelines including consideration for these major points:
- What kinds of content should be in the photos? Products? Lifestyle? Nature? Portraits?
- What kind of story should your imagery tell?
- What mood does it convey to the viewer? How should they feel after looking at it?
- How will the photos be edited? Why?
Minimal and desaturated imagery gives a tasteful, calm feeling. Vibrant and contrasty imagery gives an cinematic, epic feeling. Black and white can be artistic, raw, or elegant. Use harmonious color palettes, just like in UI design.
- What are key do’s and don’t’s for your brand?
Using obvious stock imagery, for example, is almost always a mistake. What kinds of people are in your portraits? From what angles are your product photos taken? Is there a color that you want to emphasize or avoid?
When you choose an image, be critical. Ask yourself, “does this photo make me feel something when I look at it? Is there a story here that draws me in?” Select photography that’s more than just filler and reach for something that, when placed in your design, brings it to a new level.
Here are two options for a Los Angeles summertime cocktail event flyer hosted by Priime. They are a good example of the difference between adequate photo selection and great photo selection. The cocktail on the left is a decently done photo, with harmonious colors and a tasty garnish. It’s a passable flyer. However, it doesn’t tell much of a story other than “here’s a fancy drink.”
The pineapple photo, on the other hand, is fascinating. It tells a tale of summertime, of a pool, of getting creative with fruity drinks. The tan arms and coral nail polish speak of a human presence with health and vibrance. It makes you want to know what’s going on outside the frame, what the rest of this pool party looks like. It creates a rich scene that connects well with the feeling of summertime in Southern California.
Evaluate each photo in the same way you would a design, making sure that it is strong in important visual principles:
Lighting: is it too dark or too bright? Are the important parts of the photo well-exposed, or do their details get lost in pure whites or blacks?
Contrast: is there an appropriate amount of contrast? (The definition of “appropriate” depends on the look you’re going for)
Colors: are the colors appealing and harmonious? Do they fit with other content on the screen such as UI and other photos, or do they clash?
Composition: Does it have a strong, compelling composition? Is there a good fore, mid, and background that creates a sense of depth, or does it feel flat?
Distractions: Is it free from clutter, or are there distracting elements that seem off when you look closely at them? Do clothes have stains, are there cars driving through the scene, or someone sneezing in the background? (In UI design, this is comparable to having things mis-aligned by a few pixels, annoying to everyone but hard to pinpoint until you develop the eye for it).
Left: unedited. Right: edited, with distractions removed and perspective fixed. Photos: Loren Baxter
Authenticity: Does it feel real, or forced? Posed shots can be authentic, but they have to capture something true and interesting about the subject.
Photo: Loren Baxter
There are a few ways to source great photography, but those are beyond the scope of this article. I recommend Stocksy, a curated stock photography site, which has a lot of high quality material.
Brands are created via many interactions over time. Once you have your styleguide, regularly tell the stories associated with your company or product, and use imagery that fits with that guide. Over time you’ll get better and better, and your brand will begin to crystallize in the minds of your audience. Ultimately, when done well, someone can look at one of your images without any caption or context, and say “oh that looks like a [your brand] photo.”
Everlane’s Instagram feed, using consistent colors and developing stories over time
Photography at its deepest is a medium for storytelling. We are attuned to visual imagery, processing it quickly and deeply. It is a powerful tool to work with, and can either help or harm our designs depending on how it is used. Images take up a huge amount of space; make sure to use that space well by telling great stories.
A great photograph is one that fully expresses what one feels, in the deepest sense, about what is being photographed.Ansel Adams
Check out Part 2 of this series to learn more about how to use photography in UI. Also keep an eye out for the recap of our panel on the use of photography in design across industries with speakers from Instagram, Airbnb, Priime, Flipboard, and Storehouse.