Page anatomy & zones

The content area is divided into three zones that contain different types of content depending on its function.

In larger viewports the layout of the zones will change and zone 3 will move up next to zone 2. See more on the page about Grid & responsiveness.

Zone 1: Welcome

The section is responsible for orientation and quick introduction.

The zone is divided into these features:

Backdrop (optional)

May be an image, colour, fifth element or left blank (will then receive the background tint as default)

Page title

A name of the page or sometimes a group of pages.

Introduction (optional)

May be used to give an introduction or description of a product or explain features of the page

Page functions (optional)

Functions that are global for this page. For example: Save shortcut, Print, Edit, etc.

Alerts (where applicable)

Small alert messages that provides a deviation summary for items that are highlighted further down on the page. This gives a sense of urgency to items and makes it harder to miss errors/information that is a long way down on the page.

Tech stuff

The zone is not a part of the module/spa that each project develops. Instead, each page needs to supply the shell with information about what features should be enabled and what content to display.

Zone 2: Main content

The main stage, where a module or widgets present the customers data.

[bild]

This is the area where you as a designer and/or product owner develops the views needed for the specific area.

The layout is further detailed in different page types that keeps us coherent across the site. See more under Taxonomy & pagetypes.

Tech stuff

In this area the spa/micro site is hosted

Zone 3: Explore

The zone presents information that may be the next step for the user. This may be a promotional offer, or simply links to related pages/functions.

Some content may be presented based on the page’s purpose while other content may be selected based on the customer or his/hers financial situation. For example, a page about accounts may show information about what services you could connect to your account, but if you do not have any accounts, it may instead promote what accounts the bank can offer you. Visually this zone will borrow its style from public web being more bold and loud.

Tech stuff

The zone content is handled by the shell, much in the same way as promotional messages are handled in current IBx (“puffarna” in Swedish).

Example