Design Objectives & Goals

Our primary focus & goal for the Alta Icon Style is to ensure that the icon style translates elegantly on all platforms and devices while providing the flexibility needed to enhance and enrich the user experience of the overall UI experience. The design Objectives is to capture a branded L&F of an icons system that is:

Alta Look Feel

Icon Systems & Structure

The key concept that defines the Alta Icon Style is a system-based design approach to the structure of the icons. The Alta Icon Style is based on 4 guiding principles that all icons share:

The various styles in our system add attributes to these base guiding principals, which creates a system of related icons. The attributes are flexible, and differ from one style to another. For the Restricted, Mono Color and Full Palette Icons, the style distinction is derived through the use of palette, such as applying a limited vs extended palette. The Rich Style Icons have additional material attributes added such as gradation, patterns, and light source, while still remaining true to the fundamental principles of the design system. Realistic Style Icons diverge from the structural constraints but retain a close tie to the palette and lighting attributes.

Having a system based design ensures a unified brand expression throughout the UI. It also enables us to provide a variety of icon styles that are flexible and complimentary, helping to enrich the UI and user experience.

Icon Style Examples

Achromatic Icons

Achromatic Icon Sample

Mono Color Icons

Mono Color Sample

Full Palette Icons

Full Color Sample

Icon Styles for various Icon Types

The Alta Style Production Guide provides an overview of the various icon types and context that define the Alta icon approach. There are two key concepts that are useful to understand before proceeding:

Icon Type

This is the functional purpose of an icon. For instance, icons used to provide access to major application/functional modules are called "Application Navigation Icons" or icons used to represent objects/content are called "Qualifier Icons". For more details see the "Icon Types" section further down on this page

Icon Style

This is the visual and stylistic approach in our icon design system. Examples include Mono Color Icons or Full Palette Icons. The style is intended to offer a range of flexibility while maintaining a consistent brand approach. For more detailed information please reference the icon style section of this guideline.

ICON STYLE ICON TYPE
  functional APP Navigation status qualifier dashboard
Mono Restricted      
Achromatic      
Mono Color    
Full Palette      
Mouse Over, Mouse Down, and Disabled states are required

Icon Type

Application Navigation Icons

Alta utilizes the Application Navigation Bar to provide navigation access to major modules of an application. It is a unique component in that it only performs this function. To further signify this action, Application Navigation icons are only used within this component and have a unique appearance relative to the other Alta icon style.

Functional Icons

Functional icons perform an action or navigates a user to a page to perform the action. These icons have state: enabled, disabled, focus highlight, and selected. Focus highlight is also known as mouse over. Select occurs on mouse down or [Enter].

Never use functional icons as a way to beautify a page or unclutter a form. By design, functional icons are subdued to give rise to page content over page functions (i.e., chrome). Over-populating the page with functional icons for decorative purposes defeats the goal of functional icons

Qualifier Icons

An optionally clickable icon that accompanies page content. They are provided to only reinforce associated concepts on the page. In short, they are redundancy cues. In cases the icon is clickable, the associated artifact (e.g., link, tab) is also clickable and articulated as such.

Never use qualifiers alone as they may not make sense without the context of associated content (e.g., text label). Together, both the icon and the associated text serve as redundant cues which users find very helpful. Alt text is not needed on these icons if their meaning is redundant with associated content. However, Alt text is needed when a qualifier serves as a type identifier. For example, if a list of documents shown on the page, are of different types (e.g., Word, PDF, HTML, or Power-point) but the type extension (e.g., .doc, .PDF) is not visible, then Alt Text is required on the qualifiers to help identify the type of document.

Status / Modifier

Status icons notifying the end user about the status of an object in the system. Status states are dynamic and change based on a user’s actions and/or system update. Unlike qualifier icons, status icons are nonclickable. Use status icons only with other status icons. Spatial combinations of functional and status icons (i.e., clickable, nonclickable) must have clear labeling (e.g., column headers in a data or layout table) and reasonable spatial separation. Alt text describing state is required for status icons.

Badges Icons

Much like status icons, badges reflect UI messages information based on a user’s action and/or system update. Badging is used to flag or highlight information to the end user that may or may not require an action. Badge icons can be standalone icons or used with all other styles of icons in the Alta System.