Application layouts
Learn how to choose a navigational frame based on page content and information architecture.
A layout consists of a navigational frame and a content area with a responsive grid system. They provide a foundational framework that helps establish consistency throughout a product experience. They act as key starting points for both designers and developers.
Best practices
To promote consistency across products, designers can use the pre-built layouts in our component library as a starting point and adjust as needed.
Keep in mind the following when using layout components:
- Layouts show default positioning for dialogs, panels, forms, and messaging components. Turn these on/off based on the design’s needs.
- The main area of the page can be swapped for multiple content area layouts.
- Layouts have variants for a variety of page widths.
- Turn on the Nova: Visa theme file to use the grid system.
Do Customize layouts by using the default navigation styles and/or the alternative color palette and changing the surface color for the page background.
Don't Rearrange and mix layout components. Make sure to establish a clear visual hierarchy when using more than one level of navigation.
Navigational frames
VPDS supports four main navigational frames: horizontal, vertical, mixed, and advanced. Refer to Information architecture when choosing which layout works best for your needs.
Horizontal
- Common UX convention displaying the top-level pages of the site.
- Persistent navigation is always visible to users.
- Allows for more horizontal screen real estate in the main content area.
- Scan patterns are influenced through natural language flow and horizon line movement.
- Can’t accommodate a large number of items in a single view (would need to add subnavigation - see Advanced).
Vertical
- Can house main and local navigational links within one contained section.
- Can accommodate more navigational links or levels than horizontal layout.
- Can be visible in a single view above the page fold.
- Utilizes natural vertical scrolling and accordion movements.
- Takes up more screen real estate than other navigational patterns.
Advanced
- Adds a secondary navigation under the horizontal bar.
- Works best with the utility navigation (account, notifications, search) in the top bar and the main content of the application in the subnavigation row below.
Mixed or Inverted L
- Combines the horizontal and vertical navigation layouts.
- Horizontal layout houses the main or global navigation.
- Vertical layout houses the local or page-level navigation.
- Best for more complex enterprise apps or sites.
Grid systems
Each layout contains a responsive grid system. Based on the panels it contains (navigational and/or informational), the grid system will adapt to the different layouts and page widths. For example, the vertical and mixed layouts have their own grid system to allow space for the left navigation panel.
Content areas
Content areas are groupings of information or components. They should be placed on the screen hierarchically based on the user’s task flow. Content areas can span any number of columns, but the components within the area do not need to align to the grid system.
Content areas reflow and adapt to varying page widths and breakpoints. When working on a responsive design, consider how your content areas will shift as the page grows and shrinks. Communicate intentions for this reflow with the development team.
A. Margins: White space along the edges of the screen that ensures content doesn’t get cut off.
B. Content area: Space available for content to occupy once margins have been defined.
C. Keyboard: Mobile on-screen keyboard may cover the content area but shouldn’t impede the user’s ability to scroll.
Platform considerations
Mobile (375 px)
A. Top app bar: Can remain persistent (or sticky), or scroll with page content.
B. Hamburger menu: Houses the navigational links.
C. Logo: Centered in top app bar.
D. Utility icons: Recommended to show only 1-2 in mobile screen size.
E. Tab bar: Anchored to the bottom of the screen for easy navigation.
Tablet (768 px)
A. Top app bar: Can remain persistent (or sticky), or scroll with page content.
B. Hamburger menu: Houses the navigational links.
C. Logo: Centered in top app bar.
D. Utility icons: Can show 2-3 in tablet screen size.
E. Tab bar: Anchored to the bottom of the screen for easy navigation
Ultra wide screen views (1600 px and greater)
There is both a fluid and fixed grid option for use cases where the screen size exceeds 1600 px. Keep in mind how your content areas will shift as the page grows and shrinks, and communicate this with the development team.
Fixed grid
The fixed grid centers the content within the page and allows for whitespace on each side. This layout is a good option for more traditional web or text-heavy pages.
Fluid grid
The fluid grid grows as the page width increases. This layout is appropriate for use cases such as dashboards.
