Best Practices for ImageryCredits: Nick Babich

Best practices for imagery.

2017

Cop

y by

Joe

Tam

unot

onye

As the saying goes, a picture is worth a thousand words. It takes users just a few seconds to evaluate a new site or app, a good designer knows this and try to convey complex stories and ideas visually. This makes images a critical component for connecting with users and converting them into dedicated users.

However, creating or selecting visual content for your app or site isn’t an easy task. Following best practices can help you successfully incorporate imagery into your design.

1. Use Imagery That is Context-Relevant

If the images you’re using are not clearly tied to your value proposition, or to the central theme of your page, then they won’t help your users. At best, they’ll be pointless distractions,at worst, they’ll give the wrong impression or even shockyour users.

Images without clear relevance, like the image you see on this booking site, are a waste of space.

Tip: Use predictive visuals that have a strong relationship with brand goals.

When the point of focus is obscured, the iconic quality of the image is lost. Avoid making the user hunt for the meaning in the image and ensure that a clear concept is conveyed to the user in a memorable way.

Try to use a limited number of striking visuals in your design, so that you really capture your user’s attention.

Apple’s homepage features a huge image of the latest product. This page works because the image shows the newest products in details and provides useful information for users.

Tip: Try to minimize distraction and focus on meaningful elements in your images. Educate yourself on the use of negative space to increase visual strength in your image.

2. Have a Clear Point of Focus

3. Show Real People

Human images are a very effective way to get your users engaged. When we see faces of other people it makes us feel like we are actually connecting with them, and not just the use of a product.

However, many sites often use purely-decorative stock photographs that rarely add value to a design and more often harm users’ experience. Such photos become a visual noise: users usually overlook them and might even get bored by them.

Up (a): A purely-decorative stock photo is vacuous and soulless.

Down (b): A custom photo represents a real customer service team.

When using photography, ensure that the photo is truly telling your story and reinforcing your message.

A very simple rule of thumb is to use high quality photographs of real people, who match your app’s or site’s character.

a

b

4. Avoid Poor Quality Images

With high-resolution devices quickly becoming the standard, users expect to see HD visuals. Today it’s better to not show anything than to show something pixelated, over-compressed, or of a low resolution.

Up (a): Degraded imagery.

Down (b): Correct resolution. Credits: Material Design

Tip: Make sure your images are appropriately sized for displays across platforms by testing appropriate resolution sizes for specific ratios and devices.

a

b

Thinking about images in terms of their usability may seem a bit odd, but I believe that these examples show just how relevant and important it is. Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product.

Take the time to make sure that every part of your visual communication on your site or in your app is reinforcing your message.

Thank you!

Conclusion

Designed by:Joe Tamunotonye