Layout and Planes
This section explains how we use planes to guide customers, create order, and focus attention.
Core layouts for See
The planes layout system is modular and flexible. It’s a chaotic world out there, so this system provides order without veering into bland repetitiveness.
But starting from scratch can be overwhelming. To resolve this tension, we’ve designed six core layouts that can work in a variety of ratios and with most content. Consider these for most marketing communications.
Adapting the core layouts to different communication ratios
Core Layout 1: Two content planes; sometimes simple is best
Core Layout 2: Three content planes for slightly more versatility
Core Layout 3: Four content planes
Core Layout 4: Four content planes with a “windmill” pattern
Core Layout 5: Four content planes with an asymmetrical arrangement
Core Layout 6: Four content planes with ever-increasing sizes
Advanced layouts for See
If the six core layouts are not suitable for a communication, you can build your own layout while maintaining consistency within the planes system.
The base grid expands from the edges of the tab. Additional planes can be created by subdividing the cells symmetrically.
Examples of base-grid application
This simple grid provides a multitude of options for content arrangement.
Minimum two planes; maximum five planes
Planes can have a variety of sizes, as long as they don’t exceed five total (not counting the tab).
As your layout becomes more complex and incorporates more planes, they don’t all need to extend from the tab to the edge of the canvas. It can be beneficial to introduce a plane running perpendicular for a more asymmetric use of the grid.
Vertical and horizontal planes
When more than three planes appear in a layout, use a combination of vertical and horizontal orientations.
A desirable “windmill” pattern is achieved when planes emanate from different edges of the tab. This pattern can be created with a subtle shift in the base grid, shown in the illustrations below.
Split grid with “windmill” pattern
How to create a split grid
Split the base grid along a line that includes an edge of the tab. Take the section that does not include the tab and rotate it 180 degrees. Then rejoin it to the rest of the base grid. This simple act creates a split grid in which the cells appear to be rotor blades encircling the tab, like a windmill.
Examples of a split grid
Four or five planes only
Base grid vs. split grid
Content applied to base grid
Content applied to split grid
Don’t apply grid lines randomly in a layout. Grid lines should always be compatible with the visual identity system guidelines for either a base grid or a split grid.
Planes should extend from the edges of the tab
Don’t position a plane randomly in a layout; it should always be anchored to the tab, unless it’s a subdivision.
When planes are subdivided, always use the grid.
Planes should be subdivided symmetrically.
Don’t subdivide planes randomly.
When filling a split grid with content, avoid having a stairstep pattern.
Split-grid planes should meet at the tab.
Don’t create a stairstep pattern with planes.
Other general don’ts
How to apply elements to planes
Tab + wordmark
Begin by choosing a layout structure and place the tab in the center. The tab always uses the primary colorway—a Coconut glyph on Dropbox Blue (the tab itself should be considered a small plane)—and the wordmark is always Graphite on a Coconut background.
See Logo for more information about the tab and wordmark.
There are several ways to use typography in the planes layout system:
Headline (Sharp Grotesk 23 Book)
Body copy (Atlas Grotesk Medium)
Combination of headline and body copy
When deciding placement, think about the message you’re trying to convey and which plane would best deliver it.
See Typography for more information.
Headline + body copy
Next, decide which type of visual imagery to use: illustration, photography, or hero iconography. Each type has different qualities, which are described in the Visual imagery overview. Choose the type that best communicates your idea, and never use more than two types of imagery in a piece of communication.
Sometimes more than one image is needed to properly tell a story. A customer file can be a great way to add context or another layer of narrative to a piece of communication.
A customer file should always relate to the larger story you’re telling, and it should appear as an inset within a plane.
See Photography for more information about customer files.
The final step is picking an accent color that is harmonious with the other elements. Use only one accent color per piece of communication. For the other planes, use base colors.
See Color for more information about how to pair color with content
That’s it—you’re now equipped to create beautiful, thoughtful pieces of communication that feel uniquely Dropbox. The possibilities are endless!
Don’t use visual effects such as drop shadow.
Don’t use full bleed for a customer file.
Don’t use more than one accent color.
Don’t use keylines in a See communication.
Don’t use the same type of imagery more than once (example: two customer files).
Don’t use more than two types of imagery (example: customer photography, customer file, iconography).