Guidelines

A comprehensive set of best-practice guidelines for every component.

Design Guidelines and Usage

Icon of screen representing content presentation

Content Presentation

There are several components to consider as you organize your content for presentation. Review these guidelines to better understand the various options for content presentation.

Content Presentation Components
Icon of screen representing data input

Data Input

Properly intaking data can easily be overlooked. There are many techniques and components that are often misused for data-gathering experiences. Review these guidelines to ensure that you gather the cleanest data, and provide the most intuitive experience.

Data Input Components
Icon of grid representing data presentation

Data Presentation

Data can sometimes be overwhelming for a user to absorb if not presented appropriately. These guidelines will help you understand how to best present data.

Data Presentation Components
Icon of a screen representing messaging

Messaging

Messages bring purposeful and useful information to users attention. We need to communicate with users to guide their journey through an application. The choice of which component to use and how it is implemented will depend on the scenario that the user is facing.

Messaging Components
Icon of a hand representing navigation

Navigation

There are a number of ways to navigate throughout a website or application. However, different scenarios require different navigational components. These guidelines will help direct you to the best solution for your scenario.

Navigation Components
Icon of screen representing page actions

Page Action

Page actions are typically containers of information or navigation that overlay the current page content. These containers help guide the user with additional or required information pertinent to their scenario.

Page Action Components
Icon of screen representing visual experience

Visual Experience

Visual elements such as typography and iconography help shape the overall look of a website or app. These components are often considered as part of the overall theme/style, but also consider these guidelines as you put them into use.

Visual Experience Components

Guidelines by Component

  • BadgesBadges are used to draw the user's attention to a specific area. They are contextually placed adjacent to the parent label, tab, or link.
  • ButtonsUse buttons to trigger actions or to submit forms.
  • ChipsChips are compact elements that represent an input, attribute, or action. They should have a clear and helpful relationship to the content or task they represent.
  • ColorUse color to support branding as well as visually organizing the information.
  • Content Containers (Cards and Panels)Content containers are groupings of information about a single subject.
  • Data ListsList items contain curated groupings of data that are displayed in the form of a list.
  • Date EntryDates can be entered in a text input field with data masking, or a date picker control.
  • DialogsA type of modal window that appears centered, in front of app content, to provide critical information or ask for a decision. A dialog is a purposefully interruptive mechanism to capture the users full attention. Use them sparingly.
  • DividersA thin line that groups content in lists and layouts.
  • DrawersDrawers provide hidden navigation or supplemental content that can be accessed by the user as they need it. They are anchored to the screen edge, allowing the user to primarily focus on the main screen content.
  • Field ErrorsContextual and actionable feedback to help users resolve failures and avoid future complications.
  • File UploadUpload files with file selection, or drag and drop methods.
  • FormsA form is a collection of UI elements that allows the user to enter and send information to a server.
  • IconographyConsistent visual graphics used to indicate meaning, and help users navigate. Icons should be simple and immediately understood. 
  • LinksUsed for navigation, such as moving to another screen within the application.
  • Loading IndicatorsLoading indicators communicate feedback regarding system status and response to an action. 
  • MenusMenus are lists of content categories or features, typically presented as a set of links or icons grouped together with visual styling distinct from the rest of the design.
  • Notification MessagesNotifications are intended to draw the users attention to an important message. They can alert a user of something before they take action, or can inform a user after they've taken action. Be sure the notification message is specific to their current situation.
  • PaginationUse pagination to divide large data sets into more manageable sections.
  • Progress StepperA progress stepper lets users know the steps involved in a multi-step process, and which step they're on. The user should be able to easily visualize their progress through a finite number of related screens.
  • Selection ControlsSelection controls allow users to complete tasks that involve making choices, or switching settings on or off.
  • SelectsSelect components are used for collecting user-provided information from a list of options.
  • Sticky ContentAllows for select content to remain on screen as the user scrolls.
  • TablesTables provide structure to information to make it easier to understand or manipulate.
  • TabsTabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
  • Text FieldsText Fields allow users to enter and edit text.
  • TypographyOptimized typographic scales present the design and content clearly and efficiently.
  • White SpaceWhite space or "negative space" is intentional empty space between and around elements of a design or page layout.

Let's Chat!

Together, we can understand and assist with the challenge or opportunity on your mind.

Connect