Designing Purposeful Imagery

Photo of a mood board for Lara Lee Design.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Purposeful imagery strengthens a design by providing valuable visual information to viewers. Don’t put all your pictures in one basket, but instead mix up image formats to best showcase the design and your creative expertise.

As a habit, users naturally ignore decorative imagery. Instead, they scan ahead to the meaningful content. Headlines, skimmable copy, and informative imagery are what users what to see. (A 2017 study from Neilson Norman Group confirms this.

After all, a picture is worth a thousand words.

However informative images are purposeful ones.

Showcase the Best Qualities of the Design Medium

Image formats, by the nature of what they reveal, can answer user questions about the product being displayed.

For every image, ask: how does this showcase the medium?

For every image, ask: how does this showcase the medium?

It’s easy to distinguish print designs from web designs in real-life, but attempting to capture all the nuances of each as a website display is a good exercise in design thinking.

For example, consider how print pieces have tactical qualities like folding and finishing treatments. Then consider how digital pieces have no fixed sizes and instead stretch and scroll. Both kinds of media, print and digital, have interactive qualities that are important to highlight, but both require different display methods to communicate their interactivity to web users.

On one hand, consider real-life photography to highlight print finishes, like shiny spot glosses or metallic foils for print pieces. For instance, a static image exported from Adobe InDesign won’t communicate this tactical quality. Nonetheless this visual information helps web viewers understand what this luxurious tactical experience could be like if they were to hold the item.

On the other hand, consider animated mockups to mimic the limitless size website designs are for digital pieces. Conversely, a static screenshot fails to communicate the interactivity a user would encounter. As a result, this visual information provides value to viewers.

Diversify Image Formats

Assigning purposes to imagery strengthens web designs by illustrating various aspects and nuances of the designs to viewers. Diversifying the imagery across various image formats can share even more information. As a result, effective case studies rarely use only one image format type.

To clarify, here are some examples of how purposeful imagery can inform users:

Use Image Formats to Design Purposeful Imagery

Format Best Used for Illustrating...

Illustration

Visual design elements and construction

Static screenshot

Visual design elements and layout

Animated screenshot

Interactivity and paging/scrolling layouts

Mock-up

Where users encounter and interact with the design

Real-life photograph

How users interact with the design

Video

How users interact with the design

Use Relevant Subject Material

Besides the image format itself, purposeful imagery is also mindful of the subject material. Both print and digital pieces benefit from photography showing users interacting with the product. Models also reflect the design’s target audience. How they’re shown interacting with the product also instructs viewers how to do the same. For example, a model might thumb over a textured business card. Similarly, a model might use a hand gesture to open a new section on a mobile app or website. Both of these compositions are simple but easily understood.

Furthermore, purposeful imagery also reflects on your brand via aesthetic and demonstrations of expertise.

Using detailed and branded images can successfully capture the attention of 67% of viewers.

Hubspot

Capture Brand Aesthetic

Firstly, imagery captures aesthetic. (Read more about describing aesthetic.) Purposeful imagery gives viewers information to determine whether your aesthetic works for their business needs. Design certainly isn’t a one size fits all service. Therefore, it’s common for designers and customers to search for similar preferences in each other.

Illustrate Creative Expertise

Secondly, imagery demonstrates expertise. Some of the image formats require more advanced designer knowledge to create. For example, try Photoshopping a printed label onto a 3D form for a mock-up, or stitching together a montage in Premiere Pro for a video. Therefore, purposeful imagery informs viewers of your services and skill level and what they can expect when they hire you to complete their project.

Design with Purposeful Imagery in Mind

In conclusion, when planning your next web design, consider how to engage users with informative imagery. Firstly, add a mixture of illustrations, static screenshots, animations, mock-ups, photography, videos, and more to your layouts. Secondly, avoid using too much of one image format to ensure you’re sharing diverse visual information. In short, design with purposeful imagery in mind.