Version 5.0.0

Application frame

Adobe applications should share the same fundamental structure. This guarantees consistent and familiar experiences across products and platforms, and a shorter learning curve.

Header bar#


The header bar contains the highest level of navigation and action items (e.g., modes, file name, global actions, syncing, sharing). For this reason, it is always present at the top and is consistent across all platforms.

Application mode#

Applications can have several modes when necessary (e.g., Design, Prototype, Share). Each mode represents a specific workflow, and switching between modes changes the entire interface.

By enclosing the entire set of features into several modes, the interface remains simple and optimized. Because modes affect the entire application, they are located on the left side of the header bar. The order in which the modes are displayed should reflect the order in which users should use them.

Tabs with labels design and prototype, aligned to the left of an application header bar.

Global actions#

Actions that are global to the application (e.g., sharing, syncing, undoing) are located on the right side of the header bar. This is a prominent place for actions that is clearly visible and easy to access at all times. A small vertical divider can be used to divide and organize groups of actions related to one another.

Icons for undo, sync, and share, aligned to the right of an application header bar.

Panels#


Panels can be persistent or toggled in and out, depending on the application’s needs. On desktop and tablet, panels are located on either side of the application frame (left or right) or both. Panels come in two different widths: 304 px and 240 px. This panel area can house a single panel or a panel group (multiple panels stacked vertically). On phones, panels are located at the bottom and take up the full width of the screen.

Single panels#

When displaying a single panel in the application frame, the panel takes up entire height available.

Single panel is shown to the right of the application and spans its full height. The panel is titled properties and shows five fields, width, height, x position, y position, and rotation.

Panel group#

Multiple panels can be displayed in a vertical stack, with a divider in between each panel.

Multiple panels are shown to the right of the application and span its full height. First panel is titled properties and shows five fields, width, height, x position, y position, and rotation. Second panel is titled appearance and shows six options, opacity, corner radius, fill, border, shadow, background blur.

Bottom bar#


The bottom bar only exists on mobile phone applications. It is a good alternative to sidebars and a natural place for interactions, as it is easy to reach and accommodates well for landscape views.

Dividers#


Dividers are used to separate various areas. They are 2 px in thickness on desktop scale and 1 px on mobile scale to better fit platform conventions. These dividers are opaque and are designed to always remain darker than bars and panels.

Popovers and trays#


The application frame structure tends to be static and stable. Therefore transient states (e.g., menus, options, settings, additional actions) are conveyed using different containers: popovers and trays.

Popovers#

Popovers float on top of the application (no background overlay). They stand out from the rest of the interface through their visual style (stroke and drop shadow).

For more information, see the Popovers page.

Trays#

Trays only exist on mobile applications. They should be used when exposing a volume of content that is too overwhelming for popovers. They slide in from the bottom of the screen and stand out from the rest of the interface via the background overlay, similar to dialogs.

For more information, see the Trays page.

Changelog#


DateNumberNotes
Apr 19, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)