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.
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.
