Imagery

Imagery in Material Design helps communicate your product

Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product.

Bold, graphic, and intentional imagery helps to engage the user.

Whether the mood is subdued and muted or bright and colorful, the following principles and best practices can help you successfully incorporate imagery and bring your apps to life, no matter what the visual brand.

Principles

Relevant
Informative
Delightful

Integrating with UI

Use appropriate resolution
Use scrims to protect text

Use cases

Avatars and thumbnails
Hero images
Galleries

Principles

When using illustration and photography to enhance the user experience, choose images that express personal relevance, information, and delight.

Material Design imagery reflects user context and environment — Personal relevance
Imagery can reflect the context and the world the user inhabits.

Images enhance understanding with Material Design concepts — Information
Images can convey specific information that makes comprehension easy and immediate.

Material Design: Unique beauty enhances user delight — Delight
Portraying context with aesthetic beauty will make your product unique and add to user delight.

Appreciate context

Ensure images are dynamic and context-relevant. Use predictive visuals to substantially improve the user experience.

Dynamic images enhance user experience in Material Design — Use imagery that is context-relevant.

Be immersive

When necessary, it’s acceptable to obscure or allude to integrated heros and thumbnails through color and content overlays.

Material Design: Use overlays to enhance immersion — Background imagery can be obscured when engaging with foreground content.

Best practices

Use multiple mediums

Both illustration and photography can live within the same product. Photography automatically implies a degree of specificity and should be used to showcase specific entities and stories. Illustration is effective for representing concepts and metaphors where specific photography might be alienating.

Photographic representation for Material Design entities — Do.
For specific entities, look first to photographic representation.

Material Design illustration aids comprehension of content — Do.
When total specificity is not available or applicable, illustration conveys approximation of content to aid comprehension.

Stay away from stock

Use imagery to express a distinctive voice and exemplify creative excellence.

For specific entities or branded content, use specific imagery. For more abstract content, be interpretive. Photographic stock and clipart is neither specific nor interpretive.

Authentic images reflecting Material Design stories — Do.
Strive for images that represent genuine stories.

Authentic images in Material Design — Don’t.
Stock images can feel inauthentic.

Use specific imagery for Material Design elements — Do.
For specific representations, use specific imagery.

Avoid using generic stock photos in Material Design — Don’t.
Don't default to literal stock photography.

Have a point of focus

Have an iconic point of focus in your imagery. Focus ranges from a single entity to an overarching composition. Ensure that a clear concept is conveyed to the user in a memorable way.

Material Design: Use color for clear image focus — Do.
Use color and composition to give images a clear focus.

Material Design: Avoid user confusion with clear imagery — Don’t.
Avoid making the user hunt for the meaning in the image.

Powerful Material Design elements with minimal distractions — Do.
The most powerful iconic images consist of a few meaningful elements, with minimal distractions.

Material Design: Maintain focus for clarity and impact — Don’t.
When the point of focus is obscured, the iconic quality of the image is lost.

Material Design: Clear focus for instant understanding — Do.
A clear focus communicates the concept at a glance.

Meaningless image due to lack of focus in Material Design — Don’t.
A lack of focus makes the image meaningless.

Build narratives

Create an immersive story and a sense of context to humanize your app. Define the mood through visual storytelling. Is the mood aspirational? Somber? Celebratory?

Material Design: A story-telling image that informs — Do.
An image that tells a story is infinitely more interesting and informative.

Material Design: Images should tell a story and convey context — Don’t.
An image that lacks a story loses an opportunity to convey mood, brand, and context.

Do.

Properly contextualized concepts convey your message and brand more effectively.

Material Design: Entity representation lacks context — Don’t.
A representation of an entity that is dissociated from context is uninteresting.

UI integration

Resolution

Make sure your images are appropriately sized for displays and across platforms. Material design emphasizes large images. Ideally, the assets should not appear pixelated. Test appropriate resolution sizes for specific ratios and devices.

Appropriately sized imagery in Material Design — Do.
Appropriately sized imagery

Degraded imagery with Material Design elements — Don’t.
Degraded imagery

Introduce scale

Introduce alternative scales to create levels of visual importance.

Material Design thumbnails of varying sizes for hierarchy — Within a gallery context, introduce thumbnails of various sizes to convey content hierarchy.

Material Design: Support for multiple containers ecosystem — Encourage multiple containers living in the same ecosystem.

Text protection

To make typography legible on top of imagery, apply text protection in the form of scrims Scrims are lightweight, translucent material layers.

To avoid banding (the formation of distinct stripe shapes), the gradient should be long, 3x standard app bar height, with the centerpoint about 3/10 towards the darker side of the gradient. This gives the gradient a natural falloff and avoids a sharp edge.

The gradient’s opacity should be chosen based on its environment. Some imagery can use darker gradients, such as the image displayed here with a 60% gradient.

Gradients could be as low as 10-20% in some contexts.

60% black gradient in Material Design style — In this image, the gradient is 60% black.

Gradient applied to the image using Material Design — This is the gradient which has been applied to the image at the left.

Material Design: Dark scrims 20%-40%, light scrims 40%-60% — Do.
Dark scrims should ideally be between 20%-40% opacity depending on the content. Light scrims should ideally range from 40%-60% opacity depending on the content.

Material Design: Avoid obscuring imagery with scrims — Don’t.
Don't obscure imagery when you use a scrim.

Material Design: Target areas for text protection — Do.
For larger real estate, target specific areas for text protection instead of blanketing the entire image.

Material Design: Avoid over-scrimming large images — Don’t.
Don’t ‘over-scrim’ large images.

Color overlays in Material Design using the Palette API — Do.
Color overlays are different than text-protection scrims and can be used as a design element. When creating complementary color overlays, use the Palette API to define your color scheme based on content.

Do.

You can use your brand’s color palette decoratively to enhance imagery.

Avatars and thumbnails

Avatars and thumbnails represent entities or content, either literally through photography or conceptually through illustration. Generally, they are tap targets that lead to a primary view of the entity or content.

Avatars can be used to represent people. For personal avatars, offer personalization options. As users may choose not to personalize an avatar, provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand.

Thumbnails allude to more information – letting the user peek into content – and assist navigation. Thumbnails let you include imagery in tight spaces.

Material Design avatars add a personal touch with minimal space — Avatars make an app feel more personal – and occupy minimal space.

A brand avatar communicates information at a glance.

Hero images

Hero images are images that are usually anchored in a prominent position, above the fold, such as a banner at the top of the screen. They serve to draw in a user, provide context about the content, or reinforce the brand.

Extract prominent colors from an image

Material Design feature image for bold focus in layout — Feature
A feature image is a bold, primary point of focus within a heterogeneous layout.

Integrated hero image in Material Design for diverse content layout — Integrated hero image
Integrated hero images create a setting for heterogeneous pieces of content within a layout. They are not the primary points of focus.

Gallery

Gallery images are bold visual hero images within homogenous layouts in either a grid or as a single image.

Gallery image with Material Design style — Gallery image

Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product.

Principles

Integrating with UI

Use cases

Principles Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Appreciate context

Be immersive

Best practices Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Use multiple mediums

Stay away from stock

Have a point of focus

Build narratives

UI integration Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Resolution

Introduce scale

Text protection

Avatars and thumbnails

Hero images

Related

Gallery

Principles

Best practices

UI integration