User Experience Framework Utility

Overview

The Procensol UX Framework enables developers to take control of the design process and build applications within Appian utilising the insights and methods proven by the wider web design community; to put design and user experience at the core of applications, and to share or devolve design responsibility to suit the project or team structure.

It enables teams of any size to quickly construct or integrate with a client’s design system; to bring the user interface components and user experience concepts together into a standardised and documented design language. The framework wraps and extends selected Appian objects, and provides a ‘separation of concerns’ to allow one or more dedicated designers the ability to control layout, colour, typography and other design concerns centrally whilst leaving developers free to consume design objects and focus on the technical solution.

The framework comprises two Appian applications, one for ‘components’ and one for ‘examples’. The first of these contains the simple elements, the wrapped and extended Appian components that represent the core UI toolkit. These elements can be cloned, refined, and adapted for use in any situation. The second contains a site that is built using the UI components. This demonstrates how to use the components to build out a design system – a living document where patterns can be designed and tested and that developers can reference whilst building applications.

Key Features & Functionality

• Responsive Design
  • The framework includes a collection of constants used to define the breakpoints utilised in making a design responsive.
• Column and Grid Layouts
  • The UX Framework contains a large set of pre-defined column and grid layouts that have been parameterised to provide easy configuration of layout and visibility.
  • Columns and grids can be combined to provide a consistent structure and organise different design elements together to produce hierarchy, alignment, and consistency with little effort.
• Typography
  • The UX Framework extends selected Appian components to produce a balanced typographic scale and rhythm that ensures the readability of text and establishes a sense of visual hierarchy.
  • The typographic components provide regular line heights, spacing and placement that are inherited by all components to produce a professional look and feel in an application.
• Colour
  • The UX Framework contains a collection of pre-defined constants that provide a consistent and easily changed colour scheme throughout an application. These include semantically named primary and secondary colour palettes that can be adapted to suit a brand and ensure that all areas of colour choice can be easily maintained and updated.
• Content Boxes
  • The UX Framework contains a collection of report and message card styles, tab and accordion containers and even navigation controls and menus, all built using standard Appian components.
  • The components are often extended with additional functionality to provide more user interactivity options – these can be controlled by the user using icon driven toolbars or affected programmatically to show and hide content as appropriate.
• Pages and Templates
  • A selection of page templates can be utilised when building an application to help bring coherence to the design and development process.
  • Utilising a page template is the best way to ensure that developers are working in a consistent design space that can be altered easily when required.