How to Use Photography in UI

This is part 2 of a two-part series on how to use imagery well in your design work – you can check out part one here. And join us for our event ‘Photography + Product Design’ in collaboration with Storehouse. Request an invite here by Monday Sept 14!

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.

When adding photos to your designs, there are many subtle things to consider.

Visual Hierarchy

Photos are a special element in the visual hierarchy of a design. A compelling photo, placed well, draws a lot of attention and can tell a strong visual story. Take Airbnb: Their homepage places photos and videos high in the hierarchy, filling the page and giving an aspirational feel of the joys of travel.

In contrast, Airbnb’s search results page includes photos as listing results in a grid. They are still important, but much less so, living comfortably alongside other pieces of UI and content.

It’s tempting to cram photos into an existing design or to layer lots of content over them. A common modern treatment for a photo + title combination is to layer the title in white on top of the photo, often with a translucent black shim to ensure the text has contrast. This works well in heros and advertisements, but be aware that it strongly prioritizes the text over the photo, making the photo a background.

Giving a photo full foreground placement by increasing its size, whitespace, and removing overlay clutter allows it to tell its own story. Imagine wearing new sunglasses without removing the UV sticker from the lens – the sticker obstructs your view, distracts you from what’s going on in front of you. To truly give a photo full impact, consider placing explanatory content in its own area beneath.

Ways to move a photo up the visual hierarchy

• Make it bigger
• Give it surrounding whitespace
• Don’t overlay content on it
• Use a photo with strong focus and singular composition
• Remove or soften other elements on the screen

Ways to move a photo down the visual hierarchy

• Make it smaller
• Use it as a background behind other content, often done with a blur, transparent black overlay, or transparent colored overlay.
• Use a photo without a bold subject. Rather, use a scene with patterns or open space on top of which your foreground content can live.

In particular, every photo visible on the screen competes for attention. Instagram has done a great job dealing with this. When scrolling through the Instagram feed, you can often only see one photo and the avatar of its author. Comments don’t get avatar photos. This leads to a peaceful experience where the photo is given lots of weight.

VSCO takes this even further by removing comments, likes, and most UI altogether, leaving a pure photographic feed that lets each image speak for itself. Of course, neither Instagram nor VSCO is more “right” in their choice; it depends on business goals and other things.

User Generated versus Curated

When you maintain control over what images will appear in your design, you have more room to take risks and be creative. You can, for example, place white text over a certain part of the image and then select images that are dark in that region.

With user generated content, you have to be more conservative. You never know how bright or dark a photo will be, what colors or vibrance it will contain, or how busy it will be. Usually, user-uploaded photos will not be as beautiful as the nicely curated photography used in mockups of the design. Account for this by removing as many potentially-conflicting elements on the page as possible.

To continue the discussion around using imagery in design, request an invite to our Photography + Product Design event by Sept 14.