Guidelines
Layout regions are the foundation for interactive experiences. They’re a layout’s building blocks and are composed of elements and components that share a similar function. A large screen layout has three main regions:
- Primary navigation
- Secondary navigation
- Nav list area
- Main body
When creating a responsive layout system, it’s helpful to establish minimum and maximum dimensions for the body and margins, as well as scaling behaviour that allows each region to adapt to different form types.
Navigation
The navigation area houses our main points to move around the various pages and tools within Deploy. It also contains our Space Switcher, Project Switcher and portal-wide search functions.
Primary header
The primary header is used to inform users where they area within the Deploy platform. This contains a main title, 'heads-up' information, a primary and secondary action-button, and a basic navigation component to move back to a parent page.
Side navigation
The side navigation (navList) is comprised of a list of various nested functional page links. These page links navigate a user to a particular part of Deploy. Side navigation is set to a fixed width of 200px on desktop, and has simple responsive behaviour on tablet and mobile devices.
Additional content in this area is:
- onboarding tour stepper (top of side navigation for sample projects)
- project description (with uncapped text length)
Body content
Body content is one of the most important areas within the Deploy platform. This area can contain a vast array of information and tools for users to complete a range if tasks. Content can include (but not limited to):
- text containers and information
- buttons
- alerts
- fields and forms
- inputs
- lists
- tables
- and more
With guidance from our patterns, designers and engineers can create a variety of tools within the body content.