Overview of Layouts

SAIL provides a variety of layouts that allow you to arrange content and controls in each user interface. Selecting the right combination of layouts results in the ideal combination of information density, task efficiency, and an intuitive user experience.

Page Width

When designing for a Sites user experience, select the appropriate page width for the content. Choose the “wide” page width for content-packed UIs such as those with many columns of data. The “narrow” width is appropriate for interfaces such as simple one-column and two-column forms where excessive white space is undesirable. The “standard” width is a good compromise for many common use cases. Keep in mind that the selected width for a Site page applies until the user navigates to another page, even when UI content is updated (such as when drilling into a record instance from a record list). Make sure that the width you choose works well for all content that will be displayed on that page.

Page widths compared: (L-R) full, standard, and narrow

On mobile devices, Sites pages always use the full width of the screen regardless of the configured page width.

The page width for UIs viewed in Tempo is always equivalent to the “standard” setting for Sites pages. Interfaces designed for “wide” or “narrow” Sites pages will automatically adjust to fit within Tempo pages.

Tempo pages always use the full width of the screen when viewed on mobile devices.

When embedding SAIL UIs into another web page, the available width is dictated by the dimensions of the Appian container, which is controlled by the web page designer.

Dashboard and Form

Start each page design by selecting a Dashboard or Form Layout. Use the Form Layout for interfaces that feature submission buttons at the bottom. Use a Dashboard for all other UIs.

Columns Layout

Use columns to split UI width into evenly-distributed areas for content. It is also possible to nest columns layouts inside other columns for even more fine-grained control over dense arrangement of UI elements.

From version 17.2, column layouts can be used independently throughout SAIL interfaces. It is no longer necessary to specify columns in conjunction with Dashboards, Forms, or Sections.

Also from version 17.2, there is no limit on the number of columns in each layout. The more columns are used, the less width is available to the content of each column. It is the designer’s responsibility to make sure that there is enough room to properly display content.

Nested columns can be used to provide fine-grained layout control. Here, a set of four columns is used within the second of a two-column layout.

Note how columns are adjusted for display on mobile device screens.

Section Layout

Use section layouts to visually group related parts of interfaces. Each Section has a vertical margin below it to separate it from other page content. An optional heading may be specified to describe the section. Sections may also be configured to allow users to collapse and expand content.

Use section headings to describe the key content groupings on a page.

Wrap content in a section layout to create vertical spacing below it.

Box Layout

Use a box layout as an alternative to section layouts for creating a strong visual grouping of related components. Each box consists of a title bar and a border. Specify a concise heading in the title bar to describe the box contents.

Use box layouts sparingly as they may make pages look more cluttered. Choose a simpler design if a box layout would not help users to better comprehend the UI. Below are some examples of how box layouts may be used effectively.

Use a box layout to highlight particular parts of a form.

Use a box layout to draw attention to important messages and prompts that appear in a UI as users interact with it. This example uses the “ERROR” style as an additional indication of the nature of the box content.

Billboard Layout

Use a billboard layout to show content overlaid above a decorative background color, photo, or video. The height of the billboard can be configured, as well as the position of the overlay. Choose an overlay background style (dark, light, or transparent) to make sure that content can be easily seen against the selected background. Note that the text color is automatically switched to white for improved legibility when the “dark” style is selected.

A variety of size and style configurations allow designers to tailor how content is displayed on top of a decorative background in the billboard layout.

Review this walk-through of an example user interface to see how layouts come together to create an appealing and usable page.