There are five common layouts for applications when lists, forms, and homepages do not meet your required specification. These are not he only layouts allowed, but the most common. Other layouts are allowed if approved.
The five types are Full Page, Card Grid, Split View, 2-Column, and 3-Column. These layouts should be used as the standard layouts for your application if possible. On the following pages there are common examples and use cases called out. If for some reason you feel that these layouts do not meet your applications neeeds or your applications could be better by deviating, get in contact with the design team to discuss alternatives.
The full page layout is the most common. It is the layout used by list and form applications, such as Incident or Problem. The navigation is placed at the top. It will commonly have a back button, menu, and application specific buttons or controls.
The navigation should be placed on the top of the application view when using the full page layout.
The navigation should not be at the bottom of the page for a full page layout.
The card grid layout is used to display a grid of cards that contain summaries of a record. Clicking on the card will open up the actual record. This layout should be used to allow a user a high level summary of many records. An example of this would be the Tagged Documents application.
Split views are used to split an interactive visualization from a list/form of data that is driving that visualization. The two panes are generally linked and interacting with one will affect the other. The visualization should always be on top and be the main point of interaction. The list/form allows for the user to consume the data after navigating using the visualization. The list/form is still interactive however and allows the user to use familiar features such as filtering, sorting, or updating fields to drive the visualization.
The visualization should not go below the list
2-Column layouts are used to display some form of navigation alongside a main content area that is the focus. The navigation column can be displayed on the right or the left of the main content, but which side depends on the type of navigation being used. The general rule is, if the navigation is visually competing with the navigator for your attention it should be placed on the ride side of the main content.
Here we are using a right navigation because the navigation is simple list which is very similar to the navigator. Placing it with the navigator would be competing with the navigator for the users attention.
In this case there are cards on the right of the main view that contain summaries of documents. Clicking on the card updates the main content with the full document. The cards do not compete with the navigator in this situation and left navigation is fine.
The 3-Column layout is used to handle supporting navigation as well as main content and secondary content. The same rules of navigation placement apply as the 2 column, and secondary content is then placed on the opposite site. Many times this layout will be used for more complex applications. Live Feed is a good example of this layout.
Here we are using a right navigation because the navigation is a simple list which is very similar to the navigator. Placing it with the navigator would be competing with the navigator for users attention.
In this case there are cards on the left of the main view that contain summaries of documents. Clicking on the card updates the main content with the full document. The cards do not compete with the navigator in this situation and left navigation is fine. The secondary content is then placed on the right of the main content.