Foundation

Layout and Planes

This section explains how we use planes to guide customers, create order, and focus attention.


The Dropbox tab

LayoutsAndPlanes Intro TabDrivesDivisions

The tab drives the initial division of a page. Subdivisions should be symmetrical.

See

See

Buy

Buy

Use

Use


Principles

1. The tab is a plane

Its placement organizes and motivates the layout of a communication.

LayoutsAndPlanes Intro TabIsPlane

The tab is a plane, anchored to the center (marketing) or the top left (signed-out web and product) of a layout.

2. Planes are the foundation of composition

Planes create visual distinction among groupings of content. We use planes as the foundation for a layout to ensure hierarchy, recognition, and cohesion across platforms and devices.

LayoutsAndPlanes Intro TabDrivesDivisions

The tab drives the initial division of a page. Subdivisions should be symmetrical.

3. Planes are dynamic

Planes react, reveal, and conceal—adapting to the needs of the user, context, and content. They always present the best arrangement for a communication goal. 

LayoutsAndPlanes Intro PlanesDynamic