When designing a website, sometimes content isn't immediately available to work with. In this instance, two things are needed: placeholder copy and placeholder photos.
Placeholder copy is typically fairly straightforward, but choosing placeholder photos can sometimes be a challenge. The goal is to try to find images that are relevant to the brand, but also find images that are professional looking, beautiful photos that really set the mood and tone for where you want your design to go. As a designer who places a lot of priority on visuals, this is very important when considering the final product.
Photos shouldn't be something that are just an afterthought and a later addition, but rather a supporting element to the design. A challenge here is that once you hand your new site off after development is complete, it’s time for the content manager to add their true content and photos to the website. The goal of writing this is to try to help content managers and clients put on the lens of the designer when choosing the right photos for their newly designed website.
First and foremost, if you are given the option of having a default photo/pattern to use when an appropriate photo is not available, use it. Don’t try to force a photo that might not work, whether it be because of low quality or incorrect cropping. There are times when a design is handed off with tricky cropping for a photo, so if you can’t find something that has the right fit, revert to the default option, if provided. You want to make sure you have a quality photo with an appropriate crop when selecting the right image.
Image A
Image B
Image C
Above, you will see an example showing a less than ideal photo (Image A), which we would advise against, an appropriate photo (Image B), and a solution for a replacement default image/pattern (Image C), if you feel that you don't have a quality photo to use for a specific instance.
Image A is less than ideal for a couple of reasons: It was taken with low light, and the cropping for this photo would be difficult without cutting off heads or covering faces with text.
Image B is much more appropriate because the focus is less on faces, making the cropping much easier to decide. It’s also a more professional-looking, well-lit, high-resolution photo.
A few things to consider when looking for the right photo:
- Don’t block faces or important areas of a photo
- Be mindful of framing; don’t crop too close or too far from your subject matter
- Consider scalability/responsiveness of the photo and how it will react on a mobile device
- Never adjust the natural ratio of the photo (don’t squish it or stretch it out)
- Consider the quality of the photo and the area you are uploading to (don't settle for a lower resolution photo if the image area is large, and may cause the image to be pixelated)
- Factor in the legibility of text if being overlaid on top of the photo
Another thing to consider is the quality of a photo. You want to avoid using photos that look like they were taken on a phone, photos with poor lighting and grainy appearance, or photos with very low resolution. This can sometimes be difficult because it might mean investing in professional photography, which comes at a cost. But in the end, and seeing the importance of the total package, you have to remember that you invested time and resources into the final product, and adding in quality photos is the final step to rolling out a great new website.