Website Photography: 10 tips for winning visually with website design

Having a visually appealing website is more important than ever. The images on your website could make or break your business.

I am a professional photographer (which in the world of photography makes no claims as to the work, but merely references the fact that it pays the bills). I am also a designer and developer. Admittedly I am not often found coding these days. I have built many WordPress sites for local and international companies in the past. I have poured through hundreds of split tests and pages of conversion analytics over the years and here are my tips based on my experience with customer websites.

Tip 1: Use a hero image

Forget about image sliders at the top of pages. They are distracting and not very user-friendly. Pick one image and stick it at the top of the page as your hero image. Part of being a photographer is sifting through images and picking the best one. We do it for publications and even deciding which wedding photo should be used for a canvas. Don’t have multiple call to actions and multiple images in a slider. One is enough. Trust me.

Tip 2: Make images pop

Sometimes you want images to pop. Use vivid images at full width to get this effect. Hero images are a great example. For this effect you want the image to stand out and tell a story.

Tip 3: Integrate images with your design

Sometimes you want images to look and feel like an integral part of your website. Look at your overall design. Think about how to incorporate the image so that it feels like it belongs. These will be supporting images and should not be distracting from the other content.

Tip 4: Use black or white backgrounds

The easiest way to make an image part of your website is to use black and white backgrounds. Taking photos in such a way that the background is completely black or white and then using the same colour background on your site works well. This integrates the image with your site. The image will appear seamless and have no border. The image will appear larger as it flows in to the rest of the site.

Tip 5: Transparency

I prefer using the above technique of taking photos with a completely white or black background and using them on sites with the same colour background. The images will appear as if they have a transparent background. In this way you can use a JPG (with better compression for photos). This also works well for e-commerce website product thumbnails. My rule is to use JPG for photos and transparent PNG for logos and illustrations with solid colours.

Tip 6: Create depth

Photos as well as screens are by their very nature 2D objects. Creating depth on a website can have a pleasing effect. Use images with shadows or reflections to get this effect. I prefer not to add these (that just looks fake), but rather capture reflections and shadows in camera.

Tip 7: Think about direction

Think about which direction an image should face. Having a person in the image look towards the right or left makes a difference. It works well for conversion if you use images with a person looking or pointing towards your call to action or other important information on the page. Also, if there is implied movement (someone walking for example), the image should be oriented in order for them not to be “walking off the screen”. Create balance by thinking about gazing direction and direction of movement.

Tip 8: Use complimentary colours

Don’t just stick any pretty picture on your site. Think about the overall site look and feel. Take some time to think about the colour palette of your website and logo. Using photos with complimentary colours can do wonders for a website.

Tip 9: Less is more

I know you paid a photographer and you have a whole lot of beautiful images, but please don’t overdo it. If you want your images to make an impact try to use less images. Magazine covers don’t have multiple images on them. They just pick the best one. Use this philosophy for your site and you will see the difference. Less is more.

Tip 10: Shoot for the website

Whether you take your own photos or work with a professional photographer, please take some time and plan the website with images. Make sure you know how the photos will be used. What are the colours you want to use? What will the background colour be? What look and feel are you going for? What emotion? What mood do you want to create? Which direction should the subject be facing? All these questions should be answered before embarking on your shoot.

Follow the above tips and let me know what your results are.

*If you’re worried that you don’t have the time or the know-how to shoot your own photos for your website, GoDaddy has you covered with an easy alternative. With the GoDaddy Website Builder, you can choose from a selection of great-looking stock imagery that will finish your site off with a slick and professional look.

Image by: Business photo created by dashu83 - www.freepik.com