Application layouts
Learn how to choose a navigational frame based on page content and information architecture.
An application layout consists of a navigational frame and a content area organized within a Responsive grid system. It provides a foundational framework to establish consistency throughout a product experience, and serves as a key starting point for designers and developers.
Best practices
- Start with the pre-built layouts in our component library and adjust as needed.
- Use layouts to establish default positioning for panels, forms, and messaging components and toggle their visibility to fit your application.
- Customize navigation styles, color palettes, and background colors as needed.
- Select the appropriate layout variants to accommodate different page widths and content area layouts.
Note: To use the VPDS grid system, add the Components library to your Figma project, then navigate to Layout guide in the Properties panel.
Do Establish a clear visual hierarchy when using more than one level of navigation.
Don't Rearrange and mix the pre-built layouts in ways that don’t align with common UX conventions.
Navigational frames
VPDS supports four main navigational frames: horizontal, stacked horizontal, vertical, and mixed.
Horizontal navigation
Horizontal navigation is the most common way of displaying the top-level pages of a site. It’s typically placed at the top of the page and occupies horizontal space directly above the main content area.
Stacked horizontal navigation
Stacked horizontal navigation adds a secondary navigation bar under the primary horizontal bar. This works best for applications with a larger number of main navigation items to help declutter the experience.
Vertical navigation
Vertical navigation is located next to the main content area on the page, and can be used when a website has a large number of navigation items or when horizontal space is limited.
Mixed navigation
Mixed navigation combines horizontal and vertical navigation in complex applications. The horizontal bar has global navigation items, while the vertical panel has local navigation items.
Grid systems
Each layout uses a responsive grid system that can adjust to different screen sizes. The grid changes depending on which panels are included, such as navigation or information sections, so it fits the layout and page width. For example, the grid designed for vertical and mixed layouts adapts to accommodate the left navigation panel. Learn more about grid systems in Responsive grid system.
Content areas
A content area is the primary section of the interface where the main information, features, and interactive elements of an application are displayed. Content areas can span multiple columns, and information should be displayed in a logical order based on the intended user flow.
Content areas reflow and adapt to varying page widths and breakpoints. When working on a responsive design, consider how the content areas will shift as the page grows and shrinks, and communicate intentions for this reflow with your 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.
Platform considerations
Mobile
For mobile experiences, 375px is a common reference width. However, actual screen widths vary across devices, so layouts should be designed responsively to accommodate different sizes.
Tablet
For tablet experiences, 768px is a common reference width. However, actual screen widths vary across devices, so layouts should be designed responsively to accommodate different sizes.
Ultra wide screen views
There are fixed and fluid grid options for use cases where the screen size is 1600px or greater. Keep in mind how your content areas will shift as the page grows and shrinks, and communicate the intended experience with your development team. Learn more about fixed and fluid grid options in Responsive grid design.
