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.
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.
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.
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.
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.
Educate users
When giving instructions to users, step-by-step imagery allows users to move through a sequence of steps at their own pace.
When users interact with an app for the first time, imagery helps them identify what content is for.
Allow users to compare similar items
Photography with a common style can help users quickly browse and make a decision.
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.
Provide context
Imagery can help users understand the intent and context of associated text.
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.
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.
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.
Display thumbnails at multiple scales to express varied levels of visual importance.
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 be placed inside multiple components, shaped in any form.
Diagrams
Diagrams can display numeric values.
Icons
Icons can help users understand content.
