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: Aug 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: Aug 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: Aug 2019

Using Columns

One Column Layout 
This should be the starting place for all designs, especially when designing forms. Actions areas, such as tasks 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. Designers should use two or three-column layouts when:
two column grid
  • There are many text input fields (>25) on a single screen, and real estate is at a premium.
  • Specific fields do not have strong associations.
  • Speed is not a primary need.
 
Using a two-column layout is preferable to using a three-column layout. Use a two-column layout when you have >= 6 fields to show. 
 
Do not use a two-column layout to display one line of fields.
 
Do not mix two- and three-column layouts on the same screen. You can mix one-column and two-column, or one-column and three-columns.
 
Use a three-column layout when you have >= 9 fields to show. Do not use a three-column layout to display one line of fields. If a two-column layout would suffice, use that.
 
When using any multi-column layout design — two, three, or four — text will follow an inline wrapping pattern.

Last updated: Aug 2019