Imagery

Imagery communicates and differentiates a product through visuals.


Principles

Imagery can both enhance the user experience and express a brand’s visual language. Images help tell a story, clarify complex messages that are difficult to express with words, and to show users how to perform an action.

Informative

Imagery assists with comprehension and helps convey a clear message.

Delightful

Imagery portrays context in a way that adds user delight.

Intentional

Imagery should be used intentionally in order to create a clear story.


Usage

Images should be selected for their ability to express your message and reflect your product’s style. Whether you use user-generated photography, professional photography, or different styles of illustration, they should all lend a look and feel that reflects your product. Images should be related to one another by sharing a common function, style, and intention.

Use multiple mediums

Both illustration and photography can live within the same product.

Both illustration and photography can live within the same product.

Illustration helps describe abstract concepts.
Photographs better represent specific concepts.

Have a focal point

Have an iconic focal point in your imagery, as it impacts how it should be cropped for different sizes. A focal point can be anything...

Have an iconic focal point in your imagery, as it impacts how it should be cropped for different sizes. A focal point can be anything embodied in anything from a single entity to an overall composition. Clearly convey concepts in a memorable way.

DoEstablish a clear focal point when cropping an image.
Don'tDon’t crop an image in a way that doesn’t show a clear focal point.

Size appropriately

To best display images of different sizes and types, appropriately size images for different displays and platforms. Resolution is the most important factor in how...

To best display images of different sizes and types, appropriately size images for different displays and platforms. Resolution is the most important factor in how quickly imagery will load. To preserve network bandwidth, keep resolution low where possible.

Test appropriate resolution sizes for specific ratios and devices, ensuring that assets don’t appear pixelated.

DoExport images at the lowest file size possible without compromising quality.
Don'tAvoid using small file sizes that may result in pixelation of the image.

Be accessible

To ensure accessibility, imagery should include alternative text (or a caption) to be read by screen readers for users with visual impairments. Without alternative text,...

Alternative text

To ensure accessibility, imagery should include alternative text (or a caption) to be read by screen readers for users with visual impairments. Without alternative text, screen reader users just hear the word "image,” without any visual details.

Don'tThis image doesn’t have a caption or alt text. Screen readers will just read out “image” with no explanation of what the image is about.

Ways to use imagery

Create an immersive story and a sense of context in your app by using visuals. When giving instructions to users, step-by-step imagery allows users to...

Create an immersive story and a sense of context in your app by using visuals.

Scaled down to 62.5%

Educate users

When giving instructions to users, step-by-step imagery allows users to move through a sequence of steps at their own pace.

This cooking app shows the how-to’s of cooking through step by step photographs.

When users interact with an app for the first time, imagery helps them identify what content is for.

Imagery helps users choose categories, or topics of interest, to better personalize the content they experience in the app.

Allow users to compare similar items

Photography with a common style can help users quickly browse and make a decision.

When used across an app, still life photography expresses a unified style, letting users compare products easily.

Delight

Imagery can be used to delight users when they reach a confusing or frustrating point in the user experience journey, such as an error screen.

This app uses illustration to help users get started using the app.

Provide context

Imagery can help users understand the intent and context of associated text.

This app uses imagery to communicate the context of an article. Scaled down to 62.5%.

Hero images

Usage

Hero images help draw attention, provide context about content, or reinforce a brand.

Hero images help draw attention, provide context about content, or reinforce a brand.


Placement

Hero images are anchored in the most prominent position, such as the top of the screen.

Hero images are anchored in the most prominent position, such as the top of the screen.

DoUse a single hero image to introduce text content.
DoDisplay hero images in a carousel.

Thumbnails

Usage

Thumbnails are small images that represent information in tight spaces. They typically act as tap targets that lead to primary content, appearing within components like...

Thumbnails are small images that represent information in tight spaces. They typically act as tap targets that lead to primary content, appearing within components like cards or lists.

Thumbnails are used to:

  • Allude to more information
  • Provide a peek at content on other screens
  • Assist in navigation

Thumbnails can be cropped in different shapes.

These circular thumbnails represent categories in an app.

Placement

Elements like text or actions may be placed above a thumbnail in components like cards. A row of thumbnails inside a list item Display thumbnails...

Elements like text or actions may be placed above a thumbnail in components like cards.

A row of thumbnails inside a list item.

Display thumbnails at multiple scales to express varied levels of visual importance.

Multiple thumbnails with different proportions in a card.

Informational imagery

Usage

Informational imagery assists users in understanding content, without being the focal point in a UI. It can take the form of icons, diagrams, and avatars...

Informational imagery assists users in understanding content, without being the focal point in a UI. It can take the form of icons, diagrams, and avatars that represent entities or content, either literally or conceptually. They occupy minimal space.

Avatars

Avatars should focus on a subject, using a simple background. They can represent a user or a brand (with a logo or branded graphic).

Avatars can represent users.
Avatars can represent brands.

Avatars can be placed inside multiple components, shaped in any form.

An avatar in a square shape.

Diagrams

Diagrams can display numeric values.

Pie charts illustrate the relationship between a single numeric value and a total numeric value.

Icons

Icons can help users understand content.

The green check circle icon lets users know that the action has been completed successfully.

Up next