Visual Imagery

This section details the many visual imagery elements that make up our system. They each serve a specific purpose, depending on the communication goal.

Group 6084

Photography

When to use: Best for contextualizing the value of Dropbox products through real-world examples, including customer stories and real-life scenarios. We rely on photography within See and Buy applications only, and never use these storytelling devices within the product itself.

See

A mix of customer photography and customer files.


Buy Image

A mix of customer photography and customer files.

Includes more long-form content, often enabling a greater number of photos per subject. 

Use Image

Photography is not used in the product.

In the product, we use illustrations or iconography.

A mix of customer photography and customer files. Includes more long-form content, often enabling a greater number of photos per subject. Photography is not used in the product. In the product, we use illustrations or iconography.


Illustration

When to use: Best for explaining abstract, complex, or dry concepts through simple, often charming scenes and metaphors. It can be used for product or service descriptions and onboarding flows. It can also soften the blow of error messages. 

Visual Assets Illustration See

Almost exclusively hero illustrations.

Visual Assets Illustration Buy

Mostly hero illustrations; occasionally spot illustrations.

Foundation VisualImagery Use Illustration

Mostly spot illustrations; occasionally hero illustrations in an onboarding scenario.



Product visuals

When to use: Best for describing specific product functionality and how to interact with our products.  We are able to tell richer customer-focused stories by using customer content to demonstrate product capabilities.

Link to request

Visual Assets Product Visual See

Abstract UI or Concept UI in campaigns where there is heavy emphasis in product benefits.

Don’t use Literal UI.

Visual Assets Product Visual Buy

Abstract UI and Concept UI through the entire web funnel.

Don’t use Literal UI.

Visual Assets Product Visual Use

Abstract UI on onboarding to educate about simple features. Note that Abstract UI doesn't precisely depict product interactions. 

Literal UI may be used for in-depth educational resources such as product demos, tutorials, and help-center resources.


Iconography

When to use: Best for clearly explaining the benefit or utility of a specific product or feature. Iconography comes in a range of sizes, specifically designed for different use cases across the Dropbox brand and product ecosystem.  UI icons communicate essential elements within Dropbox interfaces. Pictogram & spot icons clearly explain the benefit and utility of specific products/features.

Link to request

Visual Assets Iconography See

Hero icons + UI icons and pictograms

Hero icons are used when a product or a product functionality is the focus of the whole communication.

UI icons and pictograms are used to link a customer story to a product feature, articulating more clearly the benefit of our service. 

Visual Assets Iconography Buy

Hero icons + UI icons and pictograms

Hero icons are used when a product or a product functionality is the focus of the whole communication.

UI icons and pictograms are used to link a customer story to a product feature, articulating more clearly the benefit of our service.

Visual Assets Iconography Use

UI icons, pictogram & spot

Because the product is focused on getting things done for the user—not on selling or explaining functionality—hero icons have no role here. Product uses the more task-oriented versions of iconography.


See

Photography

Photography helps us bring the Dropbox brand to life through customer stories. This section explains how and when we use it.

Visual Assets Illustration See

Illustration

Illustration is an integral part of the Dropbox design ecosystem. This section explains its role and how it should be applied.

Visual Assets Iconography See

Iconography

Our design ecosystem includes a range of iconography. This section details the purpose of each type and how they should be applied.

Visual Assets Product Visual See

Product Visuals

This section explains the three types of product visuals that are part of our system, including how and where we use them.