Imagery is a powerful tool to help establish a product’s visual identity and enhance the user experience by improving interface and information scanning.
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.
Illustrations help to represent an abstract concept, explain a point, or strengthen the product’s identity.
When selecting images, consider your target audience and only use imagery that is compatible with the product’s visual identity.
DO: Use images that ensure consistency across the user experience.
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.
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.
DO: Establish a clear focal point when cropping an image if being used with text and use the correct aspect ratio for each component.
DO: Select images that are able to adapt across the different aspect ratios on responsive applications.
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.
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.
DO: Test images for the appropriate resolution on different ratios and displays.
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.
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.
DON’T: Use long copy text over images.