Layout

A layout offers versatile ways of presenting and structuring content to create a balanced user experience.

Usage

When to use

The layout and app structure is the foundation for designing applications in MindSphere.

General construction

A layout consists of the following elements:

layout-usage-general-construction
1. MindSphere OS Bar, 2. Main region, 3. Navigation region, 4. App bar region, 5. Context region

1. MindSphere OS Bar

  • The MindSphere OS Bar is the most common UI component for all MindSphere apps. For further information see chapter MindSphere OS Bar.

2. Main region

  • The main region contains the main content of the current page.
  • The navigation region is mainly used for the app navigation.

4. App bar region

  • The app bar region is used for the app bar.
  • The app bar is the applications first level navigation for main sections within an application.

5. Context region

  • The context region is used for tools and additional information content.

Uniform structure and spacing is an important factor to create a consistent experience.

Types

There are the following layout types:

Fullscreen layout

The fullscreen layout is often used to view and manage large sets of data, forms, charts or other types of visualization.

layout-usage-typ-fullscreen
Fullscreen layout

Examples

layout-usage-typ-fullscreen-edit-mode
Edit-mode in fullscreen

Fullscreen detail page used for managing large sets of data and comparing values.

layout-usage-typ-fullscreen-large-datasets
Detail page in fullscreen

Two column layout with navigation region

This layout is often used as a master detail layout.

layout-usage-typ-2column-left
Two column layout with navigation region

Example

layout-usage-typ-two-col-left-master-detail
Master detail layout

Two column layout with context region

This layout is used if no navigation region is needed but additional information or tools.

layout-usage-typ-2column-right
Two column layout with context region

Example

layout-usage-typ-two-col-right-workspace
Workspace layout

Three column layout

This layout is used if a navigation region and additional information or tools are needed.

layout-usage-typ-3column
Three column layout

Example

layout-usage-typ-three-col-extended-layout
Extended layout

Do’s & Don’ts

ayout-usage-dos-useonce-1
ayout-usage-dos-useonce-2

  • Ensure a simple navigation structure.
  • Don’t use more than one app bar or navigation component.

Style

This chapter shows several layout styles in the MindSphere Design System.

Overview

layout-style-overview-fullscreen
Detail layout

layout-style-overview-master-detail
Master detail layout

Color

The following table gives reference to the different colors and shades used:

Region State Property Color name
Navigation region all Background color Gray 100

Sizing and spacing

The following measurements show the dimensions of the layout:

Basic layout elements

If the content in the navigation region is complex, more space could be needed.

layout-style-sizing-basic
Sizing of app bar region and navigation region

layout-style-sizing-context-region
Sizing of context region

Main region

layout-style-spacing-fullscreen
Spacing for fullscreen layout

layout-style-spacing-master-detail
Spacing for master detail layout

Mobile for less than 768px

layout-style-spacing-mobile
Spacing for mobile

Standard spacing

The standard horizontal spacing is an increment of 4px.

layout-style-spacings-horizontal
Horizontal spacing

The minimum horizontal spacing for block-level elements is 8px.

layout-style-spacings-block-spacing
Block-level element spacing

The standard vertical spacing starts at 2px and increases by 4px and later by 8px:

layout-style-spacings-vertical
Vertical spacing

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top