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.
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.
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.
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.
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
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
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
Description
A single product
Where it's used
In large containers where a good amount of detail can be extracted
Combo
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
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
Content
Such as types of files, file naming, or icons within the components provided.
Gray bars
The amount of gray bar vs.text, adhering to a maximum of 70% gray bar.
Visible vs. hidden components
You may show or hide components such as files, avatars, icons, buttons, or hyperlinks.
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.
Dropbox desktop and mobile combo
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.
Good Balance
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.
Work together from anywhere.
Transform your folders
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
Content
Such as types of files, file naming, or icons within the components provided.
Gray bars
The amount of gray bar vs.text, adhering to a maximum of 70% gray bar.
Visible vs. hidden components
You may show or hide components such as files, avatars, icons, buttons, or hyperlinks.
Narrative
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.
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.
Example: In the illustration above, the plus symbol appears as an avatar, conveying the idea of “more people.”
Example: In the illustration above, the lock appears as a sync icon, conveying the idea of “secure file.”
Example: Although the menu below does not appear in our products as such, it drastically simplifies the depiction of file permissions.
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.
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.
App integrations
Admin tools
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
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
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.