Description
...
the header identifies the page, and its location within the main product hierarchy.
a list of available categories or items within a library are on the left.
the main content is shown in the central workspace.
further details on individual elements within the main content are shown on the right.
Types
Type | Description | Example |
|---|---|---|
Structure
Layouts consist of:
VerinTop
Ribbon (optional)
Header area
Main workspace
Left panel (optional)
Right panel (optional)
Footer (optional)
...
The VerinTop is in a fixed position at the top of the page.
Ribbon
Description
Used where there are a lot of controls which can be used on the main workspace.
Structure
See Ribbon page.
Placement and Positioning
Directly underneath the VerinTop.
...
Page title (mandatory)
Header text, e.g. page description
Page controls which operate on whole workspace, such as Search, Tabs, or an Action Menu.
Where pages show similar data, the structure of the header should be consistent across different pages within the same product.
Placement and Positioning
...
a header describing the panel contents.
a List of options. Any other examples?
additional information or actions relating to the filters.
...
An optional right-hand panel should present information and actions relating to selected items within the main content, or additional content related to the main workspace.
The panel may be a static element on the page, or within a Details Pane.
...
a header describing the panel contents.
the main panel contents. Any consistency? Can be anything?
Placement and Positioning
...
appear to the right of the main workspace.
have a fixed width. But variable between products? The examples are all different.
The panel height depends on its type:
...
Make sure there’s a natural flow between elements on the page, from top to bottom, left to right.
Prioritise the most important elements to facilitate user decisions.
Form associations between related elements by keeping them in close proximity and using graphical similarities.
Horizontal symmetry ?
Make sure each section is distinct and identifiable.
Be aware of common scanning patterns. F patterns are common for lists of information, learnt from popular search engine designs, where users scan across the top and down the side of the page to find the information they’re looking for.
...
controls in the header area which don’t affect the entire main workspace.
a footer in web apps.
graphical content in the footer.
...
Where there is not enough space to display the full layout, the main workspace should be prioritised. Other areas within the layout may be collapsed or minimised.
Where space is severely limited, it is acceptable to remove auxiliary functionality, but this should be avoided where possible.
Using a mobile-first approach can make layout design and implementation easier.
The layout of content within the main workspace should dynamically respond to the size of the available area.
When the screen width is changed, fixed panels and components should remain fixed to the left- or right-hand side.
The size and spacing within individual components should not change as the layout dynamically responds.
Where there is no longer space for a component, see the recommended responsive design for the individual component.
To improve readability, there may optionally be a maximum width for the layout:
Where the screen width is particularly large, white space may be included on either side of the central interface.
The space on both sides should always be even.
The VerinTop and footer should always remain full width ?
Layout responsive design example
Wide | Standard | Tablet | Mobile |
|---|---|---|---|
 |  |  |   |
Example screens
 | | |||
 |  |  |  | |