Layout and Grid
Neo's responsive design adapts to screen size and orientation, ensuring consistency across applications and devices. It helps to prevent loss of content through truncation or distortion.
Regions
Regions refer to distinct areas within the UI that serve a specific purpose or contain related content. Regions help organize and structure the layout, making it easier for users to understand and navigate.
Header:
The header region contains information and links that are pinned to the top of the screen. The application name, user details, and primary navigation links appear here.Side Navigation:
This region provides additional information, action items and navigation options for the content region.Content:
The main content of the page is shown here. This region will occupy most of the user’s attention, and contains the most detailed and pertinent information relating to their current workflow.
Grid System
A grid system in UX design is a foundational layout structure that helps organize and arrange content on a user interface in a consistent and visually pleasing manner. Grid systems are widely used in application UI design to create and reinforce order, hierarchy, and balance.
Margins
A margin is the space around the outside left, right, top, and bottom edges of elements within a layout.
Padding
Padding refers to the space between the regions in the UI. It is an essential aspect of design as it affects the visual balance, readability, and user experience. No text should encroach into the padding areas. Without padding, fields can run together or overlap making comprehension difficult.
Gutter
A gutter separates the regions in the layout. It helps to create visual separation, organize content, and establish the hierarchy.
Grid System
The Content region of the UI is divided into a 16-column grid. The width of each column will adapt to the size of the window. Other regions, such as side navigation, do not use the 16 column grid.
Columns are stretched or compressed based upon the width of the region.
Pixels
The spacing for all components uses increments of 8 px and applies both vertically and horizontally. In some cases, increments of 4 px are acceptable. This forms the standard unit of measure for all UI elements.
Multiples of 8 px are used to define dimensions, padding and margins. Different spacing methods can be used to determine how to place elements within layouts and components. Consistent spacing creates a visual balance that makes it easier for users to scan and interact with.
Dimensions
This specifies the width, height and internal structure of components. These measurements align with the 8 px grid. When only the height is specified, in a table row for example, the width is responsive to the viewport width.
Alignment
Screen elements of similar importance or that contain similar information should be aligned within that region.
