UI regions

The term describes areas of the layout, such as side navigation, content area, app bars. Each UI region shall remain the same at any device, though it might change the place from breakpoint to breakpoint.

Each region carries a particular type of content such as HTML, a report, a form, a chart, a list, a breadcrumb, PL/SQL, a tree, a URL, or a calendar. Regions are positioned and styled according to the page template. Basically, UI regions, excluding content area, are out of the grid, and linked to keylines for placement adjustment.

Regions can be of different kinds. Each page may consist of several regions:

1. Navigation panel. This region should guarantee access to all top level destinations of the website or platform. Navigation can be also represented as a collapsed “burger” menu, top or bottom navigation bar, or tabs.
2. Toolbar (optional). This region presents all the necessary commands for direct access to the application’s most frequently used features.
3. Content. This region can include text blocks, cards, map, illustrations, images, tables and other types of content.

It is useful to remember including all the vital regions into your page template and to build a well-constructed grid based on the positioning of all the required blocks. This could help you as a designer to keep your app or website consistent, provide developers with clear mock-ups and users with easily navigated pages.