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
...
Where there is not enough space to display the full layout, the main workspace should be prioritised. Other areas within the layout may be hidden or minimised.
The layout of content within the main workspace should dynamically respond to the size of the available area.
Left panel
Description
Static on page or Filter panel
Lists of objects
Structure
...
A left-hand panel should be used to offer options to refine what is shown in the main workspace. The options can also give the user an idea of the structure of the available information.
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 List.
Placement and Positioning
When using the filter
Filter pane - top. On page - beneath header.
...
Right panel
Description
details. Fixed 320px? Or variable width?
...
Details pane - top. On page - beneath header.
Responsive Design
Footer
Description
Structure
...
Placement and Positioning
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.
...