Structure
The structure serves as the foundation for creating consistent and user-friendly products. It defines the basic principles that guide designers and developers in their work.
The layout refers to the arrangement of visual elements on the page as well as the overall structure and hierarchy of the content. The screen layout should always help the user understand the most important information or actions to be done. Due to the broad portfolio in Micro Focus and the variety of content and information that needs to be displayed, there isn’t one specific layout that will meet all the product needs. However, some recurring layout patterns can be used as a starting point to ensure consistency in the product.
When selecting the layout for a page, prioritize consistency with the layout of other existing pages.
Page layout
The basic page layout is comprised of a page header or masthead that spans across the whole viewport, a main content area and a side panels. Usually the primary navigation will be either on the masthead or the side panel, while the main content will be displayed in the main content area.
Table layout
Tables allow flexibly to view and manage extensive datasets. This layout might extend to the whole width of the screen, and might have collapsible side panels. The table layout can support infinite length, enabling data to load as users scroll.
Dashboard layout
A dashboard layout provides an overview of important information and key metrics in a concise and organized manner. Dashboards with drill-down capabilities might have a side panel that will open to show the user detailed data.
It’s crucial to take into account the diversity of screen sizes that users may have to ensure the accessibility and usability for a broad group of people. Our user base includes a range of popular screen sizes, from 1366×768 on smaller devices such as laptops and tablets to 1920×1080 on larger devices like desktop monitors and TVs. By supporting this range of screens, we can cover a significant portion of use cases. Some products may require a smaller minimum resolution, such as 1280×720, depending on their target audience and product requirements.
Consider removing between 150 – 200 pixels from the screen height. This space is often taken by the system’s menu bar and browser toolbars, and it will affect how the user sees the content.
Grid
We use an 8-pixel grid for spacing across the screen, both vertically and horizontally. The grid helps establish a consistent rhythm between elements and provides flexibility without overwhelming the system. Sometimes it’s possible to use multiples of 4 pixels if 8 seems too much.
Spacing
The spacing should always help establish a clear hierarchy and help the content become more understandable. For a list of spacing tokens, visit the tokens section.
When applying spacing to components, we use multiples of 8 pixels to define dimensions, padding, and margins. By following this rule, we ensure every element aligns with the grid. Although it’s encouraged to use multiples of 8, small components sometimes can have 4 or 6 pixels of spacing.
Elements on a screen are typically arranged in layers or elevations to help with the hierarchy of importance and guide the user’s focus. The bottom layer serves as the background for the product, while items on the content canvas, such as cards, widgets, and tables, are usually considered the first elevation. Structural elements, like the masthead and side navigation, will be elevation two since they might come on top of the content canvas elements. Notifications or dialogs have elevation three or four, appearing above all other components. The highest elevation is reserved for elements that need to stand out, such as tooltips or feedback elements, and has high-contrast color to increase visibility.
