Illustration by Ainsley Wagoner
Imagery allows you to do more with less. They say a picture’s worth a thousand words, isn’t it? Now more than ever, imagery is what distinguishes a product from its competitors, strengthening brand recognition and user experience. The use of imagery and graphics is a powerful visual tool that precedes the digital age and there’s a reason it’s always been that way.
When designers know how to work with imagery, they are better able to manipulate the emotional reactions of an audience. Product designs can rise or fall on the quality of their user experience images—which is why it’s vital to get it right.
Rian Dutra
The role of imagery in design
First impressions are important, even in web design. According to research, we have as little as 50 milliseconds to make an impression that determines whether someone will continue on or leave. The look and feel of a website has everything to do with a product’s visual identity, but visual identity and user experience go hand in hand. Without one, the whole experience suffers.
That’s why it’s important to set the stage for imagery early in your design process. When wireframing, you can represent imagery with boxes and lines. This will set the stage for future graphics, while first giving focus on the usability of your experience. Eventually, you’ll want to test the effectiveness of the images used to make sure the meaning you intend translates to your user.
When deciding when and where to use imagery in your designs, ask yourself this:
Would imagery illustrate a point or enhance the story that you’re trying to tell?
Imagine that you’re designing a web blog for recipes with hard-to-explain techniques. Rather than writing a long block of text to explain a technique (which may be interpreted differently by your readers), you could incorporate a video or motion graphic that shows the technique in action. This is where visual cues in the form of imagery can be effective in creating clarity.
Types of Imagery
Imagery in UX primarily refers to the use of photos, illustrations, animations, and videos. Most commonly, imagery is used for:
- Hero banners
- Product Photos
- Thumbnails
- Avatars
- Icons
- Email marketing
Incorporating imagery into your work
It can be difficult to decide whether to incorporate a photo or illustration. Luckily, you can use both photos and illustrations successfully in your designs. Photos are most effective in showing something specific, whereas illustrations can represent something conceptual. But oftentimes, your choice may come down to budget and time.
When to use photos or videos
- To display a specific scenario. Photos are great to use when you have a vision in mind. You can commission a photographer to execute on that vision or use the robust search functionalities on stock photo websites to try to find the right one.
- To showcase a product. If your website or app design is focused on a specific product, you’ll definitely want to showcase an image of that product. You can use video or stop motion to showcase how the product is used or still images of multiple angles.
- For a wow factor. When used appropriately, an image can trigger a strong emotional response that users will remember.
Website image for sustainable shoes. Image credit AllBirds.When to use illustrations or animated illustrations
- To convey something abstract. When designing something futuristic, for example, the right photo might not exist. An illustration is more effective in conveying something abstract or conceptual, rather than reality.
- To add personality. With a vector illustration, you can play around with colors, size, and styles of an illustration to match your style and add some flare. Adding personality to your designs will strengthen a user’s relationship to your brand and make your product memorable.
Illustration for Headspace, a mindfulness and meditation app.- To visualize data. Humans respond faster to visual data than any other type of data. Data visualization conveyed through illustration is a great way to blend your visual identity with data that your users can digest.
- To guide a user or tell a story. Illustrated scenes and characters can be effective in bringing users on a journey that’s both engaging and informative. Whether used in onboarding, or adding meaning to an icon, illustrations can help guide a user through an experience.
Light and dark mode toggle animation. GIF credit Tiantian Xu.Best practices for designing with imagery
When deciding how to use imagery in your work, it’s important to consider things like context, quality, and accessibility. Here are a few more best practices to follow:
Consider your target audience
Finding imagery that’s both relevant and authentic comes down to who your target audience is. As UX designers, we know a lot about empathizing with our users. First, think about the context of the image: Who is your product for? Where will this photo be consumed? On what device? In what screen orientation? You want to make sure that the photo is relevant and evokes the right feeling. Just as you would test any element in your designs, you can test your imagery with your users to make sure you get it right.
Follow your brand guidelines
In almost everything we do, consistency leads to success. When deciding what imagery works best for your designs, refer to any brand guidelines that you have. If you haven’t defined any yet, find a style that reflects your audience and create simple guidelines that showcase the “Do’s” and “Don’ts.” When using stock imagery, you want to make sure that you’ll be able to source a similar style for future image use. This is where finding collections of images can ensure consistency. Don’t be afraid to reuse & recycle! As long as you have the proper rights, you can use illustrations for hero images, avatars, or icons and vice versa.
Vitamin Water Brand Book by Collins.Get the right rights
When using stock imagery or commissioning an artist, it’s very important to make sure you get the correct license for the image. Many stock imagery websites like Unsplash or Adobe stock have royalty-free licenses with attribution not required. To save yourself time in the future and perhaps some unintended consequences, keep track of where to get your images from and their respective licenses. And remember, you’ll pretty much never be able to resell those images, unless you own the copyright.
Make sure it’s accessible
Even with advanced accessibility tools like contrast-ratio and guidelines from the Web Accessibility Initiative, only a fraction of websites are accessible. This does a disservice to the visually impaired and is also a lost opportunity for search-engine optimization (SEO). When using imagery in your designs, you can add what’s called alternative text or “alt-text,” which are descriptions of imagery that can be read by screen readers. Work with your developers to add “alt-text” to your imagery when:
- The image is more than just decorative
- The image has no text or content surrounding the graphic
- The graphic has a function, such as an icon
More and more, SVG graphics are becoming the file format of choice, and for good reason. They decrease page load time and can scale infinitely without a loss of quality, allowing users to pinch and zoom to fit their needs.
Test your imagery on different screen sizes
Nowadays, quality images are an expectation, not a nice-to-have. When sourcing high resolution images, make sure you consider screen sizes, even if you’re designing primarily for desktop. Avoid scaling a photo greater than 100% and look for images with a focus point, so they can be cropped without losing context. A rule of thumb is that If it’s hard to interpret on a small screen, it’s probably not the best photo. As always, test your images in different screen sizes and aspect ratios.
Where to source imagery
If you have a vision in mind or are designing for a client with an available budget, the best method for sourcing imagery is often to commission an artist. If you’re on a tight budget or time constraint, luckily there are millions of images, videos, and illustrations available online for you to use. Filling your designs with stock photos can come off as cliche and not authentic so it’s important to use them with caution and always refer to your brand guidelines.
Photos & Videos
Vector illustrations
In Conclusion
Finding the right imagery to use can make or break your design. When used appropriately, imagery can drive traffic to a website, improve user experience, strengthen a brand’s identity, and build a loyal bond with users. But without careful consideration, it can send the wrong message and have long-lasting adverse effects. Like every element in your designs, it’s important to make conscious decisions about when and where to incorporate imagery, testing it’s effectiveness along the way. Never add imagery just because it’s pretty. Ask yourself questions like, “Will the story live on without it?” and “Does this reflect my brand or business authentically?” This will help you avoid visual overkill and instead, captivate your users in all the right ways.