Best Practices To Adopt for Using Photos on Your Website

A well-placed photo can tell a story in one fell swoop, much more effectively than words. Many designers underestimate the value of photos in web design.

We spent hours looking for really good photos. The problem is that you need to know what you are looking for.

Why is this important? Photography can create the mood of a design. When it comes to web and mobile digital products, photography is one of the most powerful tools for establishing how a brand expresses itself.

Here are some tips to keep in mind when using photography in UI design:

Stick with high-quality photos

Bad photos will ruin a design, even if everything else looks great. If your design requires photography and you are not a talented photographer, you have two options: hire a professional photographer or use high-quality photographs.

There are tons of great resources out there where you can buy quality photos. There are even sites that offer beautiful photos for free such as:

• UNSPLASH
• Bonus Designs
• PEXELS

 

Use less common stock images

While stock photography is a great option for high-quality photos, you must choose your photos carefully.

How many web screens have you seen showing the same happy, smiling faces? Are they competent-looking business people in crisp suits? Try to avoid clichés and generic photographs when you can. This will help your designs feel more authentic and human.

 

Make sure any text has consistent contrast

Have you ever tried to put a headline on a big hero image and it was hard to read? That’s because the problem is the image. Photos can be very dynamic, with a lot of really light areas and a lot of really dark areas.

If you must use a certain photo, you can solve the contrast problem with one of these techniques:

• Add an overlay
• Lower image contrast
• Color the image.
• Add a drop shadow to your text

 

Only use relevant images

Not all images improve the experience. Some of them just take up space or, in the worst case, confuse the user.

Users react to images faster than text, so make sure your content matches the supporting images. You should select images that have a strong relationship with your product goals and make sure they are relevant to the context.

 

 

Use high-resolution photos

Low-resolution images can have a significant impact on your users. Sometimes this can be a result of not optimizing your images correctly or choosing small images and then enlarging them.

In any case, make sure your photos are not blurry or pixelated. When downloading a photo you should remember that the High Contrast Images are better.

 

Repeated visual motifs

Good design has unity: it comes together as an entity, with each element supporting the others structurally and viscerally. That is a difficult goal to achieve. But I promise your design will look much better if you try to make your photography look similar.

 

Less is more

You’ve probably heard this phrase before, right? Sometimes the best decision you can make is to focus on your product so that you can easily grab the user’s attention.