How to Use the Power of Photography in Your Website Design

By Nicholas Longtin | February 2021

"Leveraging Photography in Website Design" - graphic of woman holding camera up to her eye on a purple background

With website platforms like WordPress making it easier than ever to build great websites the web is becoming saturated with fairly good websites that look and function well. While some of this standardization is great for users, and organizations can now afford much better websites, it is making it harder to standout and cut through the noise.

One way to make your website really stand apart is great photography, and carefully planning how photos work with your design and other content is critical to unleashing the full potential of photography in your website design.

Creating An Integrated Approach

When we talk about leveraging photography in website design, the approach is much more thought out than simply adding photos throughout your content, putting a large photo at the top of every page, or using sliders full of eye catching images. While those approaches can bring more interest to your website design, I would like to explore a more integrated approach that uses photography as deign elements in your website.

Mood Boards and Style Tiles

One great tool to help plan your approach to using photography in website design is a "mood board" or what is sometimes called "style tiles". This is a collection of colors, shapes, images, typography, and other design elements that will appear together on a webpage.

Before actually building page mockups or creating pages in your CMS, use mood boards and style tiles to dial in the combination of photography and other elements. Using this important planning step well usually results in better design and a more succinct integration of photography.

Example Photo and Mood Boards

Example mood boards.

Purpouse SHOT photography

Another great way to seamlessly integrate photography into your website design is to create photography specifically created to work with certain design elements. Many times using photos in header areas, sidebars, or other non-content areas, will require very different aspect ratios which are difficult to achieve by cropping existing photos.

A solution to the aspect ratio issue is to create photography with this specific aspect ratio in mind. By developing a collection of photos in your desired aspect ratio you can more purposely bring photos into the website design without worrying about the image being cropped badly and no longer creating the desired effect.

Be A Strategic Editor

Picking the right photos to use with your website design is critical. While the actual content a photo used for design purposes may not seem very important compared to the content of photos that are standalone content, being very strategic about which photos you chose can really pay off.

For instance, if you are picking photos to be used in a background that will have text over it, choosing a very busy photo will make the text much harder to read. A photo that contains a single focal point and large areas of out of focus content will work better with text overlaid. 

Also, pay close attention to the implied lines of your photos. Photos naturally draw your eye in specific directions. If your donation button or other call to action is to the right of a photo, having a photo that draws your eyes to the left could be a big problem. Always attempt to bring focus to your webpage's calls to action and leverage photography to help.

photo-eyes-example

The subjects in this photo look directly at the main CTAs.

Things To Look For In Photography

Hopefully you are creating original imagery and not relying only on stock photography. Either way, here are some things to look for in photos that will help them be good candidates for enhancing your website design:

A Good Photo Should

  • Identify with your audience: choose photos your indented audience will identify with, not necessarily photos you identify with
  • Have a strong focal point: if everything in the photo is equally important than nothing is important, always have a strong focal point in your photos
  • Be high resolution: starting with a lower resolution photo means you will be limited with cropping and aspect ratio choice, always opt for the highest resolution file available
  • Be well exposed: photos with poor exposure that are too dark or much too light are harder to integrate into other design elements

Other Things to Consider

While everything we have discussed has the potential to greatly enhance your website design, there are some pitfalls and things to watch out for. A beautifully designed photo rich website can also provide a great user experience if you keep the following items in mind.

Accessibility

Using photography in your website design can hurt accessibility if you don't properly implement photos. All imagery on your site should have ALT tags and good descriptions of the photo content. Also, when using photos as a background be mindful of minimum contrast requirements. Even if the photo you currently use has a good amount of contrast with the text don't forget to recheck contrast when photos change.

Website Speed

Adding more photography to your website may also negatively impact site speed. It's very important for many reasons to have a fast website so be sure to use the right file format for images and optimize them as best you can to maintain a reasonable site speed.

Maintenance

Another potential headache is keeping photos updated as your website ages. You may find several years from now your photography shows staff that have moved on, services you no longer offer, or other outdated content. This can be especially cumbersome if photos are used in backgrounds, headers, or other areas with special design elements and your designer doesn't have a template to start from and must recreate the style.

One way to mitigate this issues is to make sure designers you work with create and keep good Photoshop templates where photo content can be easily swapped with new images.

Looking For More Inspiration?

We have a lot more great content on website design and marketing. Check out our free on-demand webinar on Website Redesigns for Nonprofits, or our blog article on 5 Reasons You May Want to Redesign Your Website.

Topics: Design and Technology

contact-us-today