Documentation

Layouts

Different layouts are the best way to focus the users attention and create hierarchy. Additionally, a well chosen layout serves as a guiding hand for the user to work with the application. Our recommended way to create both an attractive and accessible layout is to follow the principles below.

Copy link to headline:Core principles

The following fundamental principles are recommended for every layout:

  1. Responsive

    Layouts must be adaptive, ensuring structural integrity and usability across all devices and screen sizes.

  2. Content-driven

    The layout must be dictated by the content, not the other way around. Prioritize the structural needs of information before selecting a layout pattern.

We strongly recommend using our grid system for ensuring responsive and consistent layouts.

Copy link to headline:Page anatomy

This section defines the global regions of an application. In its most comprehensive form, a typical page consists of four regions:

  1. Main navigation

    Provides access to top-level pages and global interactions. This region is persistent (fixed at the top or left) and independent of the scroll container. See our OnyxNavBar(opens in a new tab) component for the technical usage.

  2. Sidebar

    Facilitates navigation within a master-detail structure or provides secondary interactions. It remains fixed to the side of the screen (left or right). See our OnyxSidebar(opens in a new tab) component for the technical usage.

  3. Page content

    The primary area for displaying information. This section is flexible, governed by our grid system and serves as the main scroll container of the interface. See our OnyxPageLayout(opens in a new tab) component for the technical usage.

  4. Bottom bar

    A global region at the bottom of the screen for triggering confirmations or status updates. It is independent of scrolling and can be applied to specific objects or the entire page. See our OnyxBottomBar(opens in a new tab) component for the technical usage.

All available options regarding content alignment and max-width can be found in our grid documentation.

For easy technical usage, we strongly recommend using our OnyxAppLayout(opens in a new tab) and OnyxPageLayout(opens in a new tab) components. Here is an example of a basic app layout to get started:

Copy link to headline:Component layout

Internal component structures are always left-aligned. The only exception to this rule is within table columns, which may utilize center or right alignment for specific data types.

  • List item
  • List item
  • List item
  • List item
  • List item

Left align the content within components.

  • List item
  • List item
  • List item
  • List item
  • List item

Don't use center or right alignments within components. Exceptions like table columns might still exist.

Copy link to headline:Visual Rhythm & Grouping

To establish a sense of structure, we focus on the visual and functional connection between elements:

  1. Proportion & Balance

    Maintaining balanced proportions across content sections ensures a smooth, professional appearance.

  2. Spatial Grouping

    Objects sharing similar functionality or content should be visually clustered. We use open space (white space), typography, and dividers to distinguish these groups and reduce cognitive load.