Imagery in Material Design

[[123978]]

In material design, images (whether paintings or photographs) should be composed rather than curated, look magical and not overly produced. The style is optimistic, joyful, and candid. The style emphasizes the materiality of a scene, texture, depth, unexpected use of color, and attention to context. These principles are all aimed at creating user interfaces that are purposeful, beautiful, and deep.

in principle

When using drawings and photography to enhance the user experience, choose images that convey personal connection, information, and joy.

Personal connection

Use evocative imagery to build an emotional connection between your users and your app.

information

Convey specific information. Create intelligent sensory experiences in a way that aids understanding.

Highlights

Use relevant imagery to delight users in an unexpected way, making them feel incredible.

Scene Appreciation

Add logic to ensure that the image is dynamic and shows the intelligence and relevance of the scene. Predictive visual effects can demonstrate a level of intelligence, which can greatly improve the user experience.

[[123969]]

Immersive

Be brave enough to use masking techniques, or the superposition of colors and content to form an impression of the main character in the picture, or to form a thumbnail.

[[123981]]

***practice

Use multiple media

Illustration and photography can be used in the same product. Photography automatically implies a certain degree of specificity and should be used to show specific objects and stories. Drawings can effectively express concepts and metaphors, which photography cannot.

For specific physical objects, the first thing to consider is using photography to represent them.

want

When the content you want to express is not a physical object (or cannot be summarized by a physical object), drawings can convey the information of your application and allow users to understand the content at a glance.

[[123971]]

want

If you’re using photography to communicate a concept, you need to create something thoughtful, even suggestive.

[[123982]]

don't want

Don’t limit yourself to stock photos.

Stay away from stock

Using images can express a unique voice and show unique creativity.

For specific entities or branded content, use concrete images. For more abstract content, make it explanatory. However, stock photography and clipart are neither concrete nor explanatory.

[[123983]]

want

[[123984]]

don't want

Focus

Your image should have an iconic focal point. It can be as small as a single object or as large as an entire layout. Make sure you convey a clear concept to the user in a memorable way.

[[123985]]

want

[[123972]]

don't want

[[123986]]

want

[[123987]]

don't want

[[123988]]

want

[[123989]]

don't want

Build narratives

Create an immersive story and context.

[[123973]]

want

[[123990]]

don't want

[[123991]]

want

[[123992]]

don't want

Don't overdo it

Keep the original integrity of the image. Don't overuse height filters or Gaussian blur, especially when trying to hide degradation.

[[123993]]

want

[[123974]]

don't want

[[123975]]

want

[[123976]]

don't want

UI Integration

Resolution

Make sure your images are sized to fit their borders and are cross-platform compatible. The structure emphasizes large images. Ideally, assets should not appear pixelated. Test the appropriate resolution size for specific ratios and devices.

want

Properly sized images

don't want

Degraded image

Introduce Scale

Utilize different sizes of images to create visual importance.

In the context of a brochure, introduce thumbnails of various sizes to communicate the hierarchy of content.

Using multiple containers in the same ecosystem is encouraged.

Text protection

Add protection scrims to make text on images clear and easy to read.

want

The ideal transparency of dark scrims should be between 20% and 40%, and the ideal transparency of light scrims should be between 40% and 60%, depending on the specific content.

don't want

Don't overuse text screens to obscure image content.

want

For larger landscape images, a text screen should be added to specific areas, not covering the entire image.

don't want

Don't overdo it with large images.

want

Color overlays are different from text-protection scrims and can be used as design elements. When creating complementary color overlays, sample from the content it is juxtaposed with so that you can produce a harmonious and consistent color palette that demonstrates good content awareness.

don't want

Avatars and thumbnails

Avatars and thumbnails represent entities or content and can be photographs or conceptual illustrations. Generally speaking, they are tap targets that give people a preliminary impression of things and content.

Avatars can be used to represent individuals. For personal avatars, provide the option to personalize them. Since users may not personalize their own avatars, it is a good idea to set the default effect to be pleasing. Avatars can also be used to represent brands when used with a specific logo.

Thumbnails hint at more information, give users a glimpse of content, and aid in navigation. Thumbnails allow you to fit images into a small space.

Avatars make the app more personal and take up less space.

A brand profile picture can convey a message in just one glance, and the same is true for a thumbnail.

Hero Images

A hero image is usually placed in a prominent location and slightly larger than normal, such as a banner at the top of the screen. A hero image can attract users, provide context for the content, or reinforce the brand.

Feature Image

The featured image is the main visual focal point with a striking style and a unique design layout.

Integrated hero image

Synthesized hero images usually contain mixed and unique parts in a style that do not form the primary visual focus.

Gallery

Gallery images are often styled in a striking way and often share a common layout, such as a grid or a single image.

Photo Grid

Gallery pictures

Original: Imagery Translation: lhyqy5 Proofreading: chenyusi