Layout

Layout overview

Having a defined layout encourages consistency and form across various designs, platforms, and screen sizes. When all elements and spacing follow a uniform framework, the human eye groups elements into shapes, shapes into patterns, thus making UX easier to understand at a glance.

Comprising of grid and column-breakdowns, layouts provide structure for creative decision-making, especially in the moments of rapid prototyping. Follow best practices of layout design, supported by the templates in Pega, for the most success.

Cosmos Design System grid

Last updated: Dec 2019

Spacing

Whitespace enables the eye to group similar elements together not only for the benefit of establishing a figure-ground-hierarchy but also maximizing readability of content and data. The Pega Platform UI uses an 8px system (multiples of eight pixels) throughout the entire interface to define relationships with design elements.
  • 8px: The minimum horizontal padding in an interactive element (e.g., the distance from the border edge of an input field, from the text inside it).
  • 4px (8px * .5): The space between an icon and its related text (e.g., a back button with an image of an arrow and the word “Back”).
  • 16px (8px * 2): The space between sections of data inside the same container, the inner padding on the container itself, and the default desktop text size.
  • 24px (8px * 3): The space between unique sections of data (e.g., a case’s master details file starts 21px below where the Perform Harness ends).

Last updated: Dec 2019

Grid

The grid template is designed for the activity action area on a 1440px monitor. 10 columns are evenly spread out by 16x of padding all around. Use this grid as a guide for breaking your design into columns.

Last updated: Dec 2019

Using Columns

One-Column Layout

This should be the starting place for all designs, especially when designing forms. Actions areas, such as assignemnts and Pulse feeds, will stack on top of one another in the vertical space.

one column grid

Two-Column Layout

In some cases, a one-column layout is not the best way to organize necessary content on the screen.

two column grid

Use two-column layouts when:

  • There are many text input fields (>6) on a single screen, and real estate is at a premium.
  • Specific fields do not have strong associations.
  • Speed is not a primary need.
  • Additionally, avoid using a two-column layout to display one line of fields.

When using a two-column layout design, text will follow an inline wrapping pattern.

Last updated: Dec 2019