Visual Imagery

Product Visuals

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


The role of product visuals

Our products are the reason why customers choose us, so it’s essential to be deliberate about when and how they are shown in communication materials. Whether static or animated, Product Visuals are a crucial element for building a strong and consistent connective tissue across the full customer journey. Product visuals are best used to:

  • Describe specific product functionality or features

  • Show how Dropbox brings value to customers

  • Show how to interact with our products

Product Visuals are divided into three categories: Abstract UI, Concept UI, and Literal UI.

Abstract UI

Abstract UI is a simplified version of our product screens grounded in product realism and thoughtful subtraction for marketing and communication purposes. Through a careful process of focusing, subtracting, and storytelling, Abstract UI presents our products to prospective customers in an intelligible, relevant, and true-to-product way.

AbstractUI Intro Abstract1
AbstractUI Intro Abstract2

Stylistic principles: Abstract UI

1. Rooted in product realism

We want customers to get a good idea of what our products are like and what they can do. That’s why Abstract UI directly inherits from DIG, leveraging its components and tokens and ensuring that the visual design of a communication matches the product being described.

2. Clarity through focusing and subtracting

Our products are multifaceted and robust, so in order to present them intelligibly to prospective customers we must make them appear relevant at a glance. Abstract UI aims for clarity by focusing only on the essential components of a product and their value propositions.

AbstractUI Intro Abstract3

Clarity through simplifying and subtracting: While adhering to DIG 2.0, we subtly simplify real components to help clarify a product’s functionality and subtract what isn’t essential to a product’s look and feel or value proposition.

AbstractUI Intro Abstract4

Clarity through scaling: We increase the scale of certain elements for a better sense of simplicity and hierarchy. It also helps us depict our products at smaller sizes.

Content principles: Abstract UI

1. A new approach to storytelling

As part of the new brand strategy—making Dropbox more human—we infuse Abstract UI with real stories using customer files and customer photography. 

AbstractUI Intro Abstract5
AbstractUI Intro Abstract6

Because of the high quality and veracity we seek with storytelling, you won’t always have time or resources to create narrative Abstract UI. That’s why content may range on a spectrum from generic to narrative. 

Generic

Abstract UI Use

Type of files

System-file icons provide the loose context of a person or team using Dropbox.

How it’s created

Use the system-file icons provided in Figma and follow the copyediting recommendations in the application section below.

Narrative

AbstractUI Intro AbstractNarrative

Type of files

Customer files provide the specific context of a person or team using Dropbox.

How it’s created

Refer to the photography guidelines to gather believable, visually compelling customer files and customer photography. We’re currently developing a set of customer photography and files that will be available in the future.

Types of Abstract UI

Screen

AbstractUI Intro AbstractScreen

Description

A single product

Where it's used

In large containers where a good amount of detail can be extracted

Combo

AbstractUI Intro AbstractCombo

Description

A combination of several products and/or crops in a well-composed overlap

Where it's used

In large containers where a good amount of detail can be extracted

Crop

AbstractUI Intro AbstractCrop

Description

An isolated part of a product

Where it's used

In large and medium-sized containers


Rules: Abstract UI

1. Start with a parent screen

Every Dropbox product has its own parent screen, from which every composition begins. Using a comprehensive system of components, you can change all aspects of a parent screen directly in Figma to create the screen you need.

Not all possible screens will be found in the parent screens. Their purpose is to provide the essential parts of Dropbox and ensure consistency in scale and feel. To convey more-granular features of Dropbox, additional treatment may be required. Be sure to adhere to the guidelines below and maintain the scale that’s provided for the master screen.


2. Compose your screen

When creating Abstract UI, choose the relevant parent screen and follow these editing guidelines:

You may edit

Such as types of files, file naming, or icons within the components provided.

Content

Such as types of files, file naming, or icons within the components provided.

AbstractUI Intro GreyBars

Gray bars

The amount of gray bar vs.text, adhering to a maximum of 70% gray bar.

AbstractUI Intro VisibleHidden

Visible vs. hidden components

You may show or hide components such as files, avatars, icons, buttons, or hyperlinks.

AbstractUI Intro AvatarColors

Avatar colors

Within DIG color standards.

Text

Such as titles, file names, avatar initials, or hyperlinks.

  • Keep it short and sweet.

  • Use text to provide context.

  • You may use emoji for visual emphasis, but don’t overdo it.


Don't edit

Scale

The scale provided—for window size, text size, and component size and distribution—is crucial to maintaining consistency. Do not alter it.

UI background colors

Such as a sidebar or product background color.

Typography styles

Adhere to the styles provided for each component.


3. Adhere to the scale and components provided

We have worked hard to create a scale that not only works across all Dropbox products, but also uses DIG 2.0 components at actual size—for the first time creating a direct link to our products and enabling our Abstract UI to evolve with them. It is crucial that you adhere to the scale and components provided and not alter either when creating screens.

AbstractUI Intro AbstractDropbox desktop + mobile

Dropbox desktop and mobile combo

AbstractUI Intro AbstractWebPreview

Dropbox web image preview


4. Seek a good balance of text vs. gray bar

Gray bars are used to replace copy and reduce overall cognitive load. Having too many in a screen can make our products appear bland and unintelligible. To prevent this, at least 30% of the UI should be actual text, including the headline.

AbstractUI Intro AbstractTray

Good Balance

AbstractUI Intro AbstractGreyBars

Don't


5. Background color

Abstract UI can be placed on a core, base or accent color and should be used in accordance with our color guidelines.

6. Container margin

Apply a margin of no less than 15% of the shortest side of the container.


Concept UI

Concept UI enables the simplest expression of features or actions within Dropbox. While Abstract UI is a systematized library where we seek fidelity and consistency, Concept UI enables greater creative liberty to communicate product benefits.

AbstractUI Intro Concept10

Work together from anywhere.

AbstractUI Intro Concept05

Transform your folders

AbstractUI Intro Concept09

Permissions


Stylistic principles: Concept UI

The Abstract UI stylistic principles apply to Concept UI, with some key differences:

1. Rooted in product realism but departs to communicate more effectively

Concept UI also inherits DIG components such as files, folders, and avatars, but uses them in a way that communicates product benefits quickly. We depart from the product in thoughtful ways, explained in the See, Buy, and Use tabs.

2. Clarity through focusing and subtracting

For greater impact, Concept UI should be simple. Isolate only the key aspects of a feature or action and depict them in a way that’s easy to understand quickly.

  • Files and folders should be shown in their most archetypal form

  • Real imagery should be avoided

  • No storytelling or narrative is intended


Content principles: Concept UI

Similar to Abstract UI, Concept UI can also be used as a container for content but with a much more limited narrative due to its stylistic simplicity.

You may edit

Such as types of files, file naming, or icons within the components provided.

Content

Such as types of files, file naming, or icons within the components provided.

AbstractUI Intro GreyBars

Gray bars

The amount of gray bar vs.text, adhering to a maximum of 70% gray bar.

AbstractUI Intro VisibleHidden

Visible vs. hidden components

You may show or hide components such as files, avatars, icons, buttons, or hyperlinks.

Narrative

AbstractUI Intro ConceptUINarrative

Type of files

Specific file type, avatars and copy provide the specific use case of the content concept.

How it’s created

Use the system-file icons and generic Concept UI provided in Figma as a base to layer the simple narrative on top.


Rules: Concept UI

1. Stick to a simple idea

Concept UI can appear with text, and should be supportive and simple. Ask yourself: Which elements can convey this feature or action? Then combine them for thoughtful simplicity.

AbstractUI Intro Concept09
AbstractUI Intro ConceptUIGeneric

2. Edit, or (occasionally) create, components to get an idea across

Existing components and visual assets may be subtly edited to expand their capability to communicate.  A new component can be created if it helps drastically simplify an actual feature or action and it adheres to the visual language of Concept UI. Any new component should have the capability of being repurposed, so think systematically. If there’s an existing component that is suitable, use it instead.

AbstractUI Intro Concept01

Example: In the illustration above, the plus symbol appears as an avatar, conveying the idea of “more people.”

AbstractUI_Intro_Concept04

Example: In the illustration above, the lock appears as a sync icon, conveying the idea of “secure file.”

AbstractUI_Intro_Concept09.jpg

Example: Although the menu below does not appear in our products as such, it drastically simplifies the depiction of file permissions.

mdnBWXfE

Example: Use blue stroke to pull focus and signify an action

3. Compose

Components should float towards the center of the composition. Components may be overlaid if doing so helps indicate they’re related. Buttons have a lot of visual weight. Try to get an idea across without using a button, but add one if it’s essential for conveying an action.

AbstractUI_Intro_Concept08.jpg
AbstractUI_Intro_ConceptUIWatermark.jpg
AbstractUI Intro ConceptUIFileShare

4. Sometimes, only a unique visual will do

There will be cases when a unique visual is the most effective way to communicate an idea simply and directly. We consider these one-offs. They should be created only when existing components are not applicable. All Concept UI principles, particularly regarding simplicity, apply to these compositions.

AbstractUI Intro Concept03

App integrations

AbstractUI Intro Concept02

Admin tools

AbstractUI_Intro_ConceptUIAnytimeAnywhere.jpg

Collaboration, any time, anywhere



Literal UI

  • Literal UI provides simple guidance for screen captures and recordings of Dropbox products.

It is a direct screen capture or recording of a product, used when the highest level of product detail is required, such as for in-depth product demos, tutorials, or help center resources. These all demand more attention from users, so be sure to lighten the cognitive load.


Rules: Literal UI

  1. Be worthy of trust

Never show real user data without express consent.

2. Before screen capturing, simplify your screen content

Minimize or remove all UI elements that are distracting or extraneous to the feature that’s being explained.

  • Remove unrelated open windows

  • Remove unrelated desktop icons

  • Remove desktop background images that are potentially distracting

  • When showing the browser, don’t include the Favorites bar or other icons unless necessary

  • When showing files, use brief, intelligible names that provide context

AbstractUI Intro Literal

In this example, notice the lack of unrelated elements in the desktop. A drag-and-drop action is being explained, so only a desktop file and the browser are needed.

3. Edit thoughtfully to drive the user’s attention

  • Maintain an even pace. Pause when landing at key points

  • Zoom in to the UI when a more specific feature is being explained. For example, zoom into the Dropbox tray instead of showing the entire desktop, if you’re covering that product in depth.

  • Clicks can be depicted by using a subtle opacity mask or radar effect

4. Desktop background color

To keep a screen recording as simple as possible, change the desktop background to a single accent color from our color palette.

5. Simplified Literal UI

There may be cases when we have vendor resources for editing literal screen recordings, with programs such as After Effects. We call this Simplified Literal UI. The goal of this would be to apply slight abstraction to some of the nonessential UI elements in the recording to clarify an otherwise dense literal screen. You may use our Abstract UI principles for guidance on style and application. Additionally, external vendors and partners can leverage the Abstract UI Library if its components help the editing process.