Application frame

Version 6.0.0

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

Date

Version

Spectrum

Apr 06, 2022

6.0.0

Download

Apr 20, 2019

5.0.0

Download

Table of contents#

Header bar
Sidebar
Panels
Bottom bar
Dividers
Popovers and trays
Changelog

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.

The sidebar is a place for displaying tools and actions. It can be on either side of the application frame (left or right) or on both sides. Sidebars should be used on desktop and tablet — an alternative layout should be chosen on a phone. A small horizontal divider can be used to divide and organize groups of tools or actions related to each other.

Tools#

Similar to modes, tools can affect the entire application. Because of that, they are always located at the top of the left sidebar, next to application modes (when present). The default tool should be at the top.

Actions#

Actions buttons can be located anywhere on the sidebar(s). They are versatile and can be used in multiple ways depending on the needs of the application: they might open panels, popovers, and trays; or display on canvas controls.

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#