SAIL is a framework for quickly creating interfaces that are portable across devices. It uses a drag-and-drop interface to assemble layouts, components, and displays. Layouts organize interface elements and include options like forms, headers, sections, and cards. Components are placed within layouts and include selections, text fields, and images. SAIL also features grids to display structured data and recipes to code common patterns.

1. SAIL
Appian’s Interface Framework

2. What is SAIL?
● Self-Assembling Interface Layer
● Framework for designers/developers to create interfaces quickly and
efficiently
● Alternative to simplified UI design
○ Incompatible across different devices
○ Difficult to easily create unique interfaces for clients

3. Enter: SAIL
● Easy: drag and drop method, low-code environment
● Portable: automatically configures design to device being used
● Powerful: can integrate existing services with new ones
● Affordable: created to adapt to futuristic needs

4. Aspects of SAIL
● Layouts:
○ Group similar components in an interface
● Components:
○ Elements inside of layouts
● Selections:
○ Radio buttons, checkboxes, drop downs
● Displays:
○ Rich text field, displaying images/icons

5. Layouts
● Intuitive design
● Important to:
1. Present information clearly
2. Facilitate orientation and navigation
● Let’s look at some layout examples

6. Layouts continued
Forms:
● Arranges elements beneath a heading and above buttons
Headers:
● Displays arrangement of components beneath a card header
● Useful for landing pages and reports; cannot be nested

7. Layouts continued
● Section:
○ Displays information beneath a section title in an interface
○ Allow users to collapse/expand content
● Cards:
○ Group related content
○ Only displays data
○ Allows for background color

8. Examples

9. Layouts continued
● Boxes:
○ Groups related components
○ Consists of a title bar and a border
○ Can make pages look cluttered
● Do:
○ Use to draw attention to specific portions of a form
● Don’t:
○ Nest boxes
○ Mix different box styles on the same page
https://docs.appian.com/suite/help/21.1/ux_box_layout.html

10. Layouts continued
● Button:
○ Displays buttons in an interface
● Billboard:
○ Shows content overlaid above decorative background

12. Layouts: Columns and Side By Sides
● Both are techniques to display content horizontally
● Columns:
○ Used for primary/top-level organization
● Side By Sides
○ Shows relations of smaller components

13. Examples

14. Grids
● Display data in a structured, easy layout
● Allows users to quickly find data
● Read-only or editable
● Do:
○ Be consistent and concise with formatting data in a column
● Don’t:
○ Display large blocks of text
○ Have different content types in same column

16. Editable Grid

17. SAIL Recipes
● Reusable code to create common UI design patterns
● Can easily combine multiple recipes
● Example:
○ Format user’s input as a telephone number and save formatted value
○ https://docs.appian.com/suite/help/17.2/recipe_format_the_users_inp
ut.html

18. Links:
● SAIL Design:
○ https://docs.appian.com/suite/help/17.3/SAIL_Design.html
● Box Layout:
○ https://docs.appian.com/suite/help/21.1/ux_box_layout.html
● SAIL Recipes:
○ https://docs.appian.com/suite/help/17.2/SAIL_Recipes.html#:~:text=S
AIL%20recipes%20provide%20Designers%20with,will%20be%20relevant
%20to%20forms.