Description
...
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 possible, the structure of the header should be consistent across different pages within the same product.
Placement and Positioning
...
The panel may be a static element on the page, or within a collapsible Filter Pane.
 |  |
Structure
The content of the left panel should be shown as a Listleft panel will usually consist of:
a header describing the panel contents.
a List of options. Any other examples?
additional information or actions relating to the filters.
Placement and Positioning
When using the filter
...
The panel should appear to the left of the main workspace.
The width of the panel should be fixed.
The panel height depends on its type:
When the panel is a static element on the page, it should start beneath the header area.
A filter pane always fills the vertical space, from beneath the VerinTop to the bottom of the page.
Right panel
Description
details. Fixed 320px? Or variable width?
Static on page or using collapsible Details panel
...
The 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.
 |  |
Structure
The right panel consists of:
a header describing the panel contents.
the main panel contents. Any consistency? Can be anything?
Placement and Positioning
Details pane - top. On page - beneath header.
The panel should appear to the right of the main workspace.
The width of the panel should be fixed. But variable? The examples are all different.
...
The panel height depends on its type:
When the panel is a static element on the page, it should start beneath the header area.
The top of a Details Pane should usually align to the top element in the page header, such as the page title or search bar. It should extend to the bottom of the page.
Footer
Description
Structure
...
Placement and Positioning
The height of the footer should be fixed.
Responsive Design
Best practices
Use:
Make sure there’s a natural flow between elements/journey through the page. Hierarchy (top-bottom, l-r).
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 the layout works at all screen sizes, cross-device, cross-browser.
Make sure each section is distinct and identifiable.
Don’t have too many tiles?
Consistent spacing between elements
Focal points – use colour sparingly for primary CTAs
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.
...