Taking the Photography in Your Web Design to the Next Level
Everyone knows that the internet is a visual medium, but not everyone knows how to get the most out of their images. Used well, the photography in your website design can evoke a strong response in your viewers, whether it be of comfort, recognition, pleasure, or even “Wow!” It’s these emotional responses that will keep your viewers’ attention and drive conversions. Used poorly, however, even the best design won’t stop the viewers from having a lackluster or even negative response. So how can you get the most out of your images? It all starts with the design.
Many designers think of the images on their site primarily as support for the text. To get the most out of your photos, though, you’ll have to turn this idea on its head and consider the photos as your main vehicle for getting your message across. And if you think about it, this makes sense. Not only do photos elicit more emotion than text, they’re also the closest we can come to experiencing life somewhere else (short of going there ourselves). That means that a well-crafted site has the power to take your viewers on a journey, and the longer they stay on this journey, the more likely you’ll be able to reach them with your message.
With that being said, here are a few design options that use photography as the main means of capturing the viewer’s interest.
Using the Flat Lay Style
Flat lay photography, first popularized on Instagram and Pinterest, takes a bird’s-eye view to your subject matter. Basically, you lay out the various elements of the scene and then photograph them from above. You can use it to showcase everything from the ingredients to a recipe, shades of lipstick you sell, or just about anything else, as long as the content within the photo clearly relates to your site’s overall message.
In the example below, G-uld, a Danish company that dyes their own yarn and designs clothing with it, lays out on their homepage some of the elements they use in the course of their work. But they don’t stop there—the crosses you see are actually interactive points that the viewer can click on and use to explore their site further.
This next example comes from Langly’s Camera Bag, which is completely designed around images. The flat lay image below is both interesting and unique, particularly because the items are lying on a deck and the person’s foot is included in it. It’s a fairly easy photo to take, and the placement of the items (both on the deck and in the overall photo) lend to a sleek, clear presentation. And of course, if you’re shopping for a camera bag, you may very well be interested in what it holds and what other photographers would put inside it.
Flat lay photos aren’t difficult to make. You just need to have enough imagination to know what elements to include, how the color scheme will interact with the other elements of your site and have an idea of how you’re going to use it—as a stand-alone or as a background like the one above. Gear-wise all you need is a camera, some lighting, and a program for editing your photos.
Standing Out with Hero Images
“Hero” images are photos that take up the majority of the screen and are paired with large, bold headlines. With the right photo, they’ll immediately grab the viewer’s attention and bring them straight into the experience of your site. Haikure’s landing page is a perfect example of using the image and headline to drive the user’s experience. The image provides the “attitude” and the focus of the viewer travels between the clothes the models are wearing (what the site is selling), the models’ eyes and expression, and the headline. The navigation bar is set far enough away to not distract from the impact of the image.
Another example comes from the Langly website. Here, the hero photo immediately captivates the viewer, especially their target audience—photographers looking for the right bag to take on trips. The image itself provides a sense of adventure, autonomy, and purpose. It also fits perfectly in with the message Langly wants to get across.
This next landing page from the Alberta Cooperative Grocery is a little different, as the image is more being used to focus the viewer on the text rather than standing on its own. While the photo looks a little amateurish, the design itself works well, drawing the viewers immediately to the motto “good. local. food.” The navigation bar is nicely visible and doesn’t take away from the impact of the photo or the main text. It’s a good example of how you can use a stock photo in a landing page design.
Lastly, you can use Hero photos to focus exclusively on your product, like Helm . Their photo serves as both the background and main content. The title, unlike the other images, is virtually non-existent, and the navigation bar even smaller. The focus is entirely on the boots. You’ll need a high-quality shot to pull this off—one specifically tailored to your site.
Grid It Out
Grids are a mainstay of today’s web design world and for good reason. They allow us to present content in a clean, organized way, creating an economy of both style and workflow. With a grid format, updating your site is easy. Once you have the layout in place, it’s a piece of cake to change the content of any particular cell. In fact, with a good layout design and a great photo selection, you can completely change the look of your site without a substantial redesign—you simply have to reimagine how the new elements will work together.
There are a variety of ways you can set up a grid. They don’t even need to look overly linear. Take this one from Jane and Johnson Design—they mix up a variety of differently-sized cells, coloring, and negative space.
This page from Bellroy , however, makes the most of an orderly progression across the bottom half of the page. Both examples look like they’ve had a lot of thought put into them, but the effect of each is very different.
You can also choose to make the grid just part of your page. In the example below, Grovemade uses just two large horizontal cells, surrounding them with plenty of negative space and relatively small, yet nice-looking font. The result is both elegant and refined.
This page from Indigo, on the other hand, uses vertical cells and a large font, suggesting boldness and action. It’s a very feel different feel from the Grovemade site, yet uses a similar grid system.
Grid designs are notoriously easy to use once you have them set up. They’re also easy to find for free as a WordPress theme. This makes them especially useful for beginners, though even the most experienced designers will incorporate a grid somewhere on their site. Just be careful that you leave enough negative space around the cells for the viewers to be able to integrate what they’re seeing. Too much of a good thing is well, too much of a good thing.
Keep It Authentic
Many of us have heard the old marketing adage that “smiling happy people” always make the sale—even if they’re just random people who have nothing to do with your brand. That’s still true to a degree, yet in these days of input overwhelm, it’s becoming less and less effective—especially if you’re using stock photos. Stock photos have been so overused, viewers tend to see them as inauthentic. And inauthentic isn’t flying so well these days. As a result, you’ll get a lot more bang for your buck if you use photos of real people, ideally working on the job. (Of course, if you’re selling clothing, you can still use photos of models wearing your products.)
In the image below, developer Devon Stank uses a background of himself actively at work, both on his home page and his About page. The result smacks entirely of authenticity and realism—we feel like we get a glimpse into who he really is.
HeavenSake uses the “at work” photo a bit differently, pairing it with an elegant photo of their sake bottles. The black and white style of the photos doesn’t detract from the main photo—that of the bottle, but still gives the viewer a glimpse of “behind the scenes” (something that’s likely to be of interest to a sake lover).
The Case for Black and White
It’s easy to assume that bold, colorful images are more compelling, but with so many eye-popping images out there, sometimes you can get a lot more mileage out of being understated. A prime example of this is Platinum Seed’s home page, where they use a very understated black-and-white image as their background. The lack of contrast in their image brings the focus straight to their text, which is in high contrast against the background.
HeavenSake also favors a minimalist design, bringing the focus straight to their product. The overall effect is one of airiness and elegance.
You can really get a lot of mileage out of the minimalist, understated look. It can give a distinctive, high-end feel to your site and really steer the focus to what’s essential.
The Case for Vibrant Colors
If you’re not into the toned-down minimalist look, you can always jaunt on over to the other side of the spectrum and use vibrant colors to drive the emotion of your site. Depending on how you use them, vibrant colors can literally pulse with energy. They grab attention and stir up the emotions. Take this home page from Karmic Cold Pressed Juice—the colors stand out bright and cheery from the background, and while a “gut-cleanse” may not be particularly exciting, the colors imply it could be at least pleasurable.
On a completely different track, Skylum’s website uses saturated color in its background image to create a very different feeling—one of awe and mystery. The implication is that great things can be done here, that potential lies just beyond the horizon. (They are a photo editing software maker, after all.) Though quite saturated, the background doesn’t conflict with the minimalist messaging of the text—the contrast between the lightness of the text and darkness of the background takes care of any clarity issues.
Mixd’s home page is a bit different. They incorporate the incoming trend of using a monotone for the background. Simply put, a monotone is a single color, sometimes used with a mixture of shades and tints. They provide a solid, non-distracting background for the foreground content and, when paired with a good font, provide excellent readability. They also tend to stick in strongly in the viewer’s mind. Here, the pencil combines with the text and background to make a singular impression.
Other Creative Ideas
As mentioned before, photos are at their best when they evoke an emotion. Here are a couple more examples of images that do just that. This one by Ecoki creates a mood, not just from its background image (which may well be a stock photo), but from its foreground as well. The cup of tea, the phone, and the text combine together to give a sense of relaxation, comfort, and maybe even a hint of adventure. Overall, the effect is quite pleasing and memorable.
This last example is from the French site, Flambette, which sells scented candles, soaps, and sprays. While their “Just Breathe” text is a little hard to read, the overall ambiance of the photo against the lightly textured background is one of relaxation and peace—almost as if you were sitting in a bath with bath salts. The image itself wasn’t difficult to create (again, you just need a camera, decent lighting, and an editing program), yet the effect is masterful.
Overall, upping your image game isn’t that difficult. You just need to think of the images more as content than mere addendums to your text. Add a bit of creativity and a flair for mood, and you’ll be bringing out the feelings in no time.