Layout and Planes

Buy

The tab drives the planes

The tab is anchored to the top left corner and drives the division of the layout into planes. Subdivisions are created symmetrically within a plane.

The structure of the layout is used to organize the content.

The planes drive the composition

A layout system based on interrelated planes encourages the prioritization and simplification of content.

The planes layout system accommodates varying amounts of content. Modules with a lot of content can use more planes.

Simple divisions create the most effective layouts

A good rule of thumb: Use simple subdivisions—quarters, thirds, halves—to break up a plane. There should be harmony and balance across all of the planes in a layout. Simplicity is key.

Basic layout: one plane

Basic layout: two planes

Basic layout: three planes

Basic layout: four planes

How to apply elements to planes

As outlined under See, planes are a vehicle for content. Many of the guidelines in that section apply to Buy as well.

See Visual imagery for more information about its role in brand communications. 

Tab + wordmark

The tab is always anchored to the top left corner and uses the primary colorway—a Coconut glyph on Dropbox Blue (the tab itself should be considered a small plane). The wordmark is always Graphite on a Coconut background.

For more information about the tab and wordmark, see Logo.

Typography

Many of the guidelines for typography in a See communication are the same for a Buy communication.

• Headline (Sharp Grotesk 23 Book)

• Body copy (Atlas Grotesk Book)

• Combination of headline and body copy

There are two options for a layout:

1. The headline is at the top of the plane, and body copy is at the bottom. Both are flush left. 2. The headline and body copy are centered together in the plane. This layout is typically used for a section heading.

See Typography for more information about its application in Buy communications. 

Flush left: Sharp Grotesk headline + Atlas Grotesk body copy

Centered: Sharp Grotesk headline + Atlas Grotesk body copy

Visual imagery

As with a See communication, the types of visual imagery that are appropriate for a Buy communication (photography, illustration, hero iconography) have different qualities and serve different goals. Choose the type that best communicates your idea. Visual imagery provides an overview.

Illustration

Photography

Hero iconography

Illustration

Illustrations are used to communicate abstract concepts through simple scenes and metaphors. They should appear in their own plane, and usually are not combined with hero icons or photos in a layout.

See Illustration for information about line work, human tones, and cutout shapes.

An illustration helps communicate what a photo cannot.

Use illustration to support and clearly encourage actions.

Photography

Photos should tell real stories about real people. Showing a specific use case also helps contextualize the value of Dropbox products. Customer photography always appears full-bleed in a plane.

For more information about customer photography, see Photography.

Hero iconography

Use hero iconography when product functionality or features are the focus of a communication. Hero icons are usually not combined with photos or illustrations in a layout.

See Iconography for more information about hero icons.

Customer files

Customer files can be layered with a UI icon to tell an implicit story about functionality.

See Photography for more information about customer files. See Iconography for more information about how to pair UI icons with customer files. 

Color

When choosing a color to use in a layout, you should consider the message that’s being communicated and the location in the customer journey. Introductory landing pages tend to be more colorful and have more variety, while educational pages deeper in the journey are less colorful and use a smaller range of accent colors.

See Color for a more detailed explanation of color application in a Buy communication. 

Landing pages, such as a product page, may use several accent colors in close proximity.

Deeper pages, such as a customer story, must use a color “theme” rather than a range of accent colors.

Within a layout, use classic color theory (examples: analogous, complementary) to pair accent colors with colors in the visual imagery. There should be only one accent-color theme per layout.

Putting it all together

Each plane should represent a single idea

Use planes to establish hierarchy and to organize content. Each plane should contain one type of content (examples: text, customer photo, customer file). Multiple planes together form a module.

Content in two planes

Content in more than two planes

Three planes

Four planes

Planes are dynamic

Planes are not always static, and should be used to breathe life into the Dropbox site. For example, planes can animate as you scroll, expand and contract when appropriate, and change color for feedback during user interaction.

Planes build in complexity Motion not only draws a user’s attention, but also focuses it where action is needed.

In this example, the appearance of a CTA button is the final motion.

Planes reveal information Planes can help prioritize information and reveal additional details when users interact with them.

Animated planes should conform to the established page grid When planes exist on different elevations, they should replace one another by conforming to the page gridlines—thereby avoiding visual complexity. The page should always appear simple and intentionally composed, even as new content or elements are introduced via animation.

This side-nav plane comes in from the side and stops moving when it reaches the edge that’s shared by two adjacent planes.

Keylines

Keylines are used to create separation between elements when additional planes are not appropriate—for example, if further subdivision of a plane is more than what’s actually needed.

Keylines are often used for timed carousels to indicate progress.

The lighter keylines separate the company icons, while the Graphite keyline serves as a timer.

Lighter keylines are used to delineate each feature. Graphite keyline serves as a timer.

Keylines are also used to separate two planes that have the same color, and to separate the fields in a form.

A lighter keyline creates separation between two adjacent white planes (top of page).

Content and screen sizes

Planes are stacked differently for large, medium, and small screens.

Progressive enhancement

We use progressive enhancement as we move from smaller viewports to larger ones. This means we start with fewer planes and less complexity on smaller viewports, and progressively include more as space becomes available.

Contextual changes Be mindful of what’s relevant to the user, and think of the device they might be using while viewing the Dropbox site. Mobile view of the product is shown on small screens, and desktop view of the product is shown on large screens.

Layout adjustments The orientation of planes may change from one screen size to the next.

Exceptions

Collage modules

Planes are an ideal tool for structuring information, but life becomes boring when everything is predictable. That’s why we also use a collage module—an exception to the rigidity of planes. In a collage module, the background acts as the plane, allowing content to be placed more freely and organically.

The rules are looser for a collage module. A successful arrangement depends on two things: finding what suits the content best, and the judicious decision-making of the designer.

Don’ts

Don’t overfill the planes.

Don’t use more than one image within a plane.

Don’t violate plane boundaries.

Don’t use more than four planes in a Buy communication.

Don’t use more than one color theme in a module.