Imagery

Imagery is a powerful tool to help establish a product’s visual identity and enhance the user experience by improving interface and information scanning.

Accessibility Intro

Images should be used to engage users and strengthen the product’s business value. Whether you use photos, illustrations or both, they should share a common purpose and style.

This foundational guidance outlines the latest research and recommendations from the Goldman Sachs Design System. Future guidance may change to support new research, methods and/or code.

Photos help to illustrate specific ideas, showcase a product, or establish empathy and connect with users.

Accessibility Intro

Illustrations help to represent an abstract concept, explain a point, or strengthen the product’s identity.

Accessibility Intro

Imagery in a product can be used in various components. Most commonly, images are displayed in: Hero, Card, Person, or Avatar.

Accessibility Intro

When selecting images, consider your target audience and only use imagery that is compatible with the product’s visual identity.

Accessibility Intro

DO: Use images that ensure consistency across the user experience.

accessibility-color-do

DO: Use imagery that corresponds with the messaging. A bold exclamation or stop symbol tells the user to pause and pay attention to this destructive message.

accessibility-color-don't

DON’T: Use imagery that conflicts with the corresponding messaging. Here the thumbs up gives a positive visual indication, while the messaging is alerting the user to a permanent destructive action.

Cropping an image helps to better frame and convey a concept.

accessibility-contrast-scale

DO: Establish a clear focal point when cropping an image if being used with text and use the correct aspect ratio for each component.

accessibility-contrast-scale-2

DO: Select images that are able to adapt across the different aspect ratios on responsive applications.

accessibility-contrast-scale-2

DON’T: Use images that lose their meaning or context when cropped at diffrent ascpect ratios. For optimal user experience, test how images crop for the breakpoints in your application.

accessibility-contrast-scale-2

DON’T: Crop elements that can obscure the meaning of the image.

Images should be size at the lowest file size possible without compromising quality, but allowing for a faster upload.

Accessible text

DO: Test images for the appropriate resolution on different ratios and displays.

Accessible text

DON’T: Use low-quality images that could become pixelated.

When placing text over images, the text contrast ratio should be enough to meet accessibility standards.

Not Accessible text

DO: Use a sublte layer tint over images to meet the AA standards.

Not Accessible text

DON’T: Use text over images that are too complex and do not have an overlay or scrim layer to add contrast between the text and image.

accessibility-contrast-scale-2

DON’T: Use long copy text over images.