Outsell Style Guide for Applications
Design Principles
Help the User Focus
The design should help the user focus on the task and supporting information. Application "chrome" should be subtle. Application screen visual hierarchy should reflect the task hierarchy: the primary task and supporting tasks should be clear.
- The data is the focus. Information and status indication takes precedence.
- Use color sparingly and to add meaning or encode information on a perceptual level.
- Use whitespace generously to help create a clear design. The goal isn't to fill space.
- Establish a visual language that is meaningful and consistent.
Minimalist Design
The design of applications should be just enough to support the user's goals and the supporting task(s). There should be a rationale for every element on the screen. If there's not a reason for an element, or if it doesn't support the user's primary task, get rid of it!
Transparent Design
The best application UI design is the one the user doesn't notice. The flow of the application should feel natural to the user, exposing features and supporting information at the right time. The design should not interrupt the user and should help them feel "in the flow" of their task. The user should always have a clear understanding where they are, where they've been, and where they can go in the application. We should hear from users:
- "It just works."
- "It thinks the way I do."
Context Over Consistency
If a particular design element "works better" (i.e., it's clear to the users and allows them to perform their task efficiently, without errors) in the UI than a more common or typical element, even one that exists elsewhere in the same application, then the former element should be retained, because it works better given the context.
Design Quotes
Good design is as little design as possible. Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity. - Dieter Rams
Simplicity is not the goal. It is the by-product of a good idea and modest expectations. - Paul Rand
Design is not what it looks like and feels like. Design is how it works. - Steve Jobs
A style is the consequence of recurrent habits, restraints, or rules invented or inherited, written or overheard, intuitive or preconceived. - Paul Rand
That’s been one of my mantras — focus and simplicity. Simple can be harder than complex. - Steve Jobs
Color Palette
The Outsell color palette appears below. The theme used as a default by the style guide is based upon these colors.
Primary Colors |
|||||
|
|
|
|||
Secondary Colors |
|||||
|
|
|
|||
Typography
For headings, content, button labels, and other elements, Outsell uses Lato, available from Google Fonts. Size and color may vary based upon the theme used.
Headings
| Element | Attributes | Where Used |
|---|---|---|
h1. Heading 1 |
Lato (Normal, 400), 24px, HEX 303030, R 48 G 48 B 48 |
Appears immediately below the header and serves to identify the application/module currently being used. |
h2. Heading 2 |
Lato (Normal, 400), 20px, HEX 303030, R 48 G 48 B 48 |
Appears at the top left of, and serves to identify, discrete functional areas within a page. |
h3. Heading 3 |
Lato (Normal, 400), 18px HEX 303030, R 48 G 48 B 48 |
Used for form subsections and large, wide form elements. |
Content
Lato (Normal, 400), 13px, HEX 000000, R 0 G 0 B 0. Used for instructions, messaging, table cells, and other application content.
This is a paragraph. Aliquam et euismod nulla. Donec non sem enim, aliquam aliquam lacus. Sed sed velit ut nibh varius hendrerit eu at felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nec dui eu justo vestibulum ultrices vitae ut justo. Praesent pharetra venenatis urna. Suspendisse a sem ut nulla euismod faucibus. Donec facilisis volutpat posuere. Integer id lectus vitae sem aliquet sodales. Suspendisse iaculis turpis non ante cursus at tincidunt massa lacinia. Mauris ultricies eros id nisl tempus ut iaculis purus ultricies. Sed tempor turpis vitae ipsum viverra ullamcorper.
Iconography
Icon Guidelines
- Whenever possible, use a text link instead of an icon.
- Need an icon? Contact the UX Design Team.
- Iconography will help establish a visual language and identity for Outsell: Please don't use canned icons.
Outsell Basics Web Font
To help establish a distinct and recognizable visual identity, a set of icons has been created to represent application functions and features. This set of icons is available in the Outsell Basics Web Font, glyphs described below.
Download the Outsell Basics Web Font (Last updated April 26, 2014)
| Icon | Class | Meaning |
|---|---|---|
| icon-OutsellLogo | Reserved. The Outsell logo. | |
| icon-Dashboard | Reserved. Used to represent the Outsell Dashboard. | |
| icon-Build | Reserved. Used on represent the Build application. | |
| icon-METL | Reserved. Used on represent the METL application. | |
| icon-Template | Reserved. Used on represent the Manage Templates application. | |
| icon-Administration | Reserved. Used on represent the Administration application. | |
| icon-Draggable1 | Placed to the left of an element, or within an element, to afford draggability. | |
| icon-Draggable2 | Alternative. Placed to the left of an element, or within an element, to afford draggability. | |
| icon-TemplateActive | Used to indicate the currently active state of a template or document. | |
| icon-TemplateNotActive | Used to indicate the currently inactive state of a template or document. | |
| icon-TemplateView | Used to indicate the means to view a template or document. | |
| icon-TemplateEdit | Used to indicate the means to edit a template or document. | |
| icon-AlertWarning | Used in alert dialogs and primary screens to indicate that the user is changing or deleting important information. | |
| icon-Reporting | Used for reporting applications. | |
| icon-LogoO | Reserved. Used in conjunction with the Outsell logo. | |
| icon-LogoU | Reserved. Used in conjunction with the Outsell logo. | |
| icon-LogoT | Reserved. Used in conjunction with the Outsell logo. | |
| icon-LogoS | Reserved. Used in conjunction with the Outsell logo. | |
| icon-LogoE | Reserved. Used in conjunction with the Outsell logo. | |
| icon-LogoL | Reserved. Used in conjunction with the Outsell logo. |
Outsell Logo
The Outsell logo and text glyphs exist in the Outsell Basics Web Font, detailed above. Styles have been provided for medium and small variants of the logo.
Medium
Small
Buttons & Links
| Element | Class | Where Used |
|---|---|---|
| btn-primary | Used to represent the primary action on the form, screen, or dialog. | |
| btn-default | Used to represent the secondary action on the form, screen, or dialog. | |
| btn-secondary-dialog | Typically used in modal dialog boxes to represent the secondary action. Should be placed to the right of the primary action button. | |
| btn-primary btn-sm | Used for primary, or important, actions and when space is limited. | |
| btn-default btn-sm | Used for secondary actions and when space is limited. | |
| None required. | Used for secondary actions and links within content. |
Tables
Sorting
Current table sort is indicated by the presence of a sort indicator in the appropriate column. The sort indicator should show whether the column is sorted in ascending or descending order. It is not necessary to place sort indicators in all sortable columns.
Searching
Searching should work across the entire dataset and not simply within the table results currently displayed. The Clear button should remove the string from the search field and reset the table so all results are displayed with paging (if used) set to the first page.
Forms
Alerts
Warning Dialog
Coding Note Although it will render in View Source as an ×, use × for the close icon.
Use when a potentially damaging action (e.g. deleting, deactivating, changing data relationships) is being taken so that user must confirm the action before proceeding.
Information/Success Inline Message
Use when a non-critical message needs to be shown to the user or when an update has been successfully applied to an element on the screen. These alerts are displayed in line with other screen content and are removed from the DOM when closed.
Information/Success Floating Message
Use when a non-critical message needs to be shown to the user or when an update has been successfully applied to an element on the screen. This variant is positioned below the secondary navigation, floats over screen content, and will not cause content to reflow.
Retaining Alerts in the DOM
For instances when the alert needs to be retained in the DOM after being closed. Use the attribute and value data-hide="alert" in place of data-dismiss="alert".
Paging Control
Typically, tables should contain no more then 15 rows per page (exact number depends on height of rows, type of table content, and other factors). When this number is exceeded, the paging control allows the user to display a subset of results per page.
The paging control consists of a maximum of 15 elements (see examples above): A previous link, a next link, and links to individual pages. The ellipsis character ("…") fills the gap between the visible pages and the first and last pages, depending on the current page number.
| Element | Attributes | Notes |
|---|---|---|
| Previous/Next Links | When enabled, uses the standard link style. | When the first or last page of results is shown, the previous/next link is shown in disabled state. |
| Page button | The page currently displayed has a distinct visual appearance from other available pages, and is not responsive should the user hover or click the element. | Clickable element to go to the desired page of results. |
| Ellipsis | Not linked, uses disabled style. | Used to indicate the presence of pages "in-between" the current set of page links. |
Progress Indicator
Used to indicate the progress, as a percentage, of a system process or user task. It should be dynamic: the length of the progress indicator increases as the item nears completion. The length of the progress bar should be a true representation of progress so the user can have a rough idea of when it will complete (this is especially critical when the user can't interact with the application until the item is completed).
Step Indicator
Used to indicate all the steps, current and otherwise, in a workflow or wizard-type flow. The current step is given an active appearance and all other steps are given a disabled appearance. This is a non-interactive element.
Tabs
Used to separate distinct functionality and information on a screen.
Modal Dialogs
Coding Note Although it will render in View Source as an ×, use × for the close icon.
Interaction Note Dialogs can be closed by clicking the close icon, the primary action button, or the cancel button. Interaction with the glass panel or primary window will not close the dialog.
| Element | Attributes | Notes |
|---|---|---|
| Dialog container | Top border is shown using a contrasting color to the background color. | Includes all standard items and application content. |
| Glass panel | Fills primary screen with a semi-transparent background. | Appears between the primary application screen and the dialog. Should prevent the user from interacting with items on the primary screen. |
| Close icon | Use standard Bootstrap icon (×). |
Closes the dialog. Dialog can also be closed using the esc key. |
| Modal dialog title | Standard h2 appearance is used | The dialog title should match the title of the button or link the user clicked to invoke the dialog. |
| Primary action button | Use the button class btn-primary | Commits whatever changes have been made in the dialog and closes it. If the dialog in informational, this should be the only button. The label should be "OK". |
| Cancel button | Use the button class btn-secondary-dialog | Closes the dialog returns the user to the primary screen. |
Primary Screen Layout
- The Sandbox demonstrates the primary screen layout.
| Element | Notes |
|---|---|
| Content container | Includes branding, navigation, application title, the application content itself, and the footer. |
| Logo | The Outsell logo and text. Refer to the Outsell Logo section above. |
| Language preference & identity | Displays an iconic flag for the user's language preference, language name, username (linked to user preferences), a link to sign out, and the user's avatar. |
| Primary navigation | Contains icons and links to primary applications and application groups. |
| Secondary navigation | Contains links to application-specific functional areas. |
| Application logo & title | Helps establish a visual identity for the application. A distinct icon should be used to represent the application. |
| Footer | Contains brand and copyright information, as well as secondary links to Outsell applications and resources (exact content TBD). |