Grids & layouts

Grids and layouts provide structure to visual elements on a screen to make it easier for users to navigate and interact.

Overview

Grids and layouts provide a systematic approach to organizing and arranging elements on a screen. Grids act as a framework for placing and aligning elements, while layouts determine the overall arrangement and hierarchy of content, ensuring optimal usability and visual appeal. Using both together establishes a visual structure that helps designers achieve consistency, balance, and alignment, resulting in a harmonious and user-friendly interface.


Resources


Grids

A grid system also:

Keeps the content consistent and organized

Grid systems encourage alignment and set a structure for designers to align elements against. This kind of neat, clean layout results in an organized design and consistent user experience.

Saves designers time

Grid systems are particularly useful when designing complex interfaces with several layers of complexity. Instead of spending time re-creating your Workspace layouts over and over again, the grid system provides an existing structure with flexible layouts that can be customized according to the customer's needs.

Reinforces visual hierarchy

Grid systems serve as the basis of a design, so you can draw attention toward or away from specific content by simply scaling it up to extend across multiple columns in the layout.

Scales collaboration

Grid systems are especially useful in corporate design, where there are typically multiple designers jumping in and out of projects, as well other contributors who need to coordinate in the execution. A smart grid and layout system allows these teams to move swiftly, innovate, or adjust to unforeseen changes.


Layouts

There are a series of layouts you can use to quickly design Workspaces that are consistent and flexible.
There are two main elements of each template - the Chrome and the Stage.

The Chrome is a fixed element of every template. The Stage works on the grid system, which is where the flexibility lies.

The Chrome

The Chrome is a fixed global header that facilitates all Applications and their features.

Chrome layout with fixed header measurements details

The Stage (12-column grid system)

The Stage is where UI Pages for the Module are displayed. The layout of the Stage is designed with containers that align with the grid system. The inside of a container ignores the grid system for more flexibility.

Stage layout with its grids and measurements visualized

Layout examples

The Stage can support up to twelve columns and you can configure the containers to your needs. You can also design a hybrid layout with multiple containers that each have different layouts/columns inside. However, each additional container and corresponding layout adds complexity to the UI.

Here are some examples of layouts that have one, two, or three containers that span across the twelve columns.


Containers

1-Container (12 columns)

1 container with 12 columns layout visualized
1 container with 12 columns layout applied to ITAM dashboard

The widgets and list are contained in a single 12-column container and span across the full view.

1 container with 12 columns layout applied to CSM dashboard

The list is in a single container and spans across the full view.

2-Containers (1:1)

2 containers with 6-6 columns layout visualized
Example of a dashboard using stage layout with 2 equal containers

The Stage is divided equally into two containers of six rows each. The containers each hold different content (i.e. forms, activity feed, etc.).

3-Containers

3 containers with 4-4-4 columns layout visualized
Example of a dashboard using stage layout with 3 equal containers

The Stage is divided equally into three containers of four columns each. The containers each hold different content (i.e. forms, activity feed, expanded side panel, etc.).

3 containers with 2-3-7 columns layout visualized
Example of a dashboard using stage layout split into 3 unequal containers

The Stage is divided unequally into two containers - one with seven columns and one with five columns. The containers each hold different content (i.e. widgets, list, etc.).

Hybrids

1-Container (top) + 2-containers (bottom)

Example of ITAM dashboard with 1 container on top and 2 containers beneath it

The ribbon is in a single container and spans across the full view. The cards inside are aligned with the grid. Underneath, there is an additional single container that contains the list.

With ribbon

Example of CSM dashboard with 1 container on top and 2 containers beneath it

The ribbon is in a single container and spans across the full view. The cards inside are aligned with the grid. Underneath, there are two containers that each hold different content (i.e. forms, activity feed, etc.).

With left side panel

Example of CSM dashboard with left side panel

The side panel expands and squeezes itself into the left side of the full-page list.

With right side panel

Example of CSM dashboard with right side panel

The side panel expands and squeezes the right part of the full-page list.