Scribd
Upload
2 views2 pages

Constellation Design System Principles & Guidelines

The Pega Constellation Design System provides a structured approach to UX design with pre-built patterns and components, allowing teams to prioritize business logic over UI details. It is guided by six core principles including efficiency, ease of use, and alignment with business outcomes, and includes specific design guidelines for fluidity, accessibility, and UX writing. The system is organized into three main parts: portals and landing pages, views, and widgets to enhance usability.

Uploaded by

Pega Training
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views2 pages

Constellation Design System Principles & Guidelines

The Pega Constellation Design System provides a structured approach to UX design with pre-built patterns and components, allowing teams to prioritize business logic over UI details. It is guided by six core principles including efficiency, ease of use, and alignment with business outcomes, and includes specific design guidelines for fluidity, accessibility, and UX writing. The system is organized into three main parts: portals and landing pages, views, and widgets to enhance usability.

Uploaded by

Pega Training
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

The Pega Constellation Design System is built on a prescribed

design approach, providing a collection of pre-built UX patterns and components


that allow teams to focus on business logic and workflows rather than individual
UI pixel placements.
Six Core Principles
The development of Constellation is guided by six foundational values:
 Efficiency: Optimizes the performance of applications for both end users
and developers.
 Ease of Use: Focuses on intuitive interfaces that are easy for users to
learn and navigate.
 Simple Authoring: Empowers low-code and professional developers to
build apps quickly using App Studio.
 Modularity: Uses a systemized collection of reusable rules and patterns
to ensure scalability.
 Best Practices: Built-in industry standards for UX, reducing the need for
manual design oversight.
 Business Outcomes: Aligns UI design with clear business goals and user
productivity.

Key Design Guidelines


To maintain consistency and high-quality UX, Pega provides specific guidelines
across several domains:
 Fluid Design (RAILS): Components should follow the RAILS framework
—Responsive, Accessible, In-the-model, Localizable, and Secure.
o Responsive & Adaptive: Constellation adjusts layouts based on
viewport size rather than targeting specific device resolutions.
 Accessibility:
o Labels: All form fields and controls must have associated labels;
placeholder text is discouraged.
o Visual Clarity: Maintain at least a 4.5:1 color contrast ratio and
avoid using color alone to convey state or status.
o Navigation: Features like landmarks (regions), automatic heading
levels, and keyboard-friendly interactive elements are provided out-
of-the-box.
 UX Writing: Text should be direct, professional, and conversational.
o Use sentence case by default for most UI text.

o Avoid industry jargon and filler words like "very," "truly," or


"actually".
 Flexibility within Prescription: While Constellation is "prescribed," it
offers varying levels of flexibility. For example, Landing Pages are very
flexible for custom widgets, while Pulse and certain case templates are
more strictly prescribed to maintain workflow integrity.

Visual Hierarchy and Structure


The architecture follows a Principle of Separation of Concerns, dividing the UI into
three main parts:
 Portals & Landing Pages: Persona-specific interfaces for consolidating
case information.
 Views: Specific screen configurations for data entry or display.
 Widgets: Targeted components (like the "To-do" list) that enhance
usability within views.

You might also like