Spacing & Layout
Required: Following the guidelines for spacing and layout is mandatory.
Spacing in design means figuring out how much space should be between objects to create a visual haromony, user-friendly layouts and enhance readability. It involves defining consistent spacings between text, images, buttons and containers. Proper spacing contributes to a professional and appealing apperance thatusers want to like and interact with further.
Our spacing system is built on the base unit of 8. This ensures visual consistency and scales well across various monitors and resolutions.
Multiplier | Space |
|---|---|
0.25 x 8 | 2 px |
0.5 x 8 | 4 px |
0.75 x 8 | 6 px |
1 x 8 | 8 px |
1.5 x 8 | 12 px |
2 x 8 | 16 px |
2.5 x 8 | 20 px |
3 x 8 | 24 px |
Usage of small spacing, values below 1x
The smaller numbers, 8 and below, are used for small and compact parts of the UI, including:
- The space between label and component
- The space between icon and text
- Space between grouped and repeating elements
- Gap between a trigger component and its child (i.e. drop down menus)
Usage of bigger spacing, values above 1x
We use values higher than the base value for larger elements and structures that are unrelated to each other.
Did you know that you can change the nudge amount in figma? Go to Menu > Preferences > Nudge amount and change it to 8 instead of 10.
Corner radius is also built on the base unit of 8, which means that corner radius are usually set to 4 for smaller elements and 8 for larger ones. This is also the corner radius values that Windows 11 follows. For some components, such as windows, tooltips, and menus, we defer to Windows to determine the appropriate formatting, ensuring a cohesive and visually pleasing user experience across our interface.
To assist with layout in CET, we've developed a grid system specifically tailored for extension tabs. However, it can be extended to larger layouts and dialogs if necessary. The grid serves as a guideline for placement, emphasizing the 8 base unit. While it's necessary adhered to, there are instances where it's necessary to create elements that don't strictly align with the grid. In such cases, maintaining the 8 base unit as a guideline and using appropiate margins to align elements is recommended.
The grid consist of 12 columns, each 16 px wide, with an 8 px gutter. When placing items, aligning them with the columns ensures the most consistent design across the application.
For specific applications to the Component Tabs, please refer to Content Layout of a Component Tab, Product Button, and Tool Button.
When creating a column grid for windows other than the extension tab, it will still consist of 12 columns, with a margin of 16, and gutter of 8. In Figma, creating a grid for design is easy. However, if you need to know the width of each column, you can use this formula:
Loading...
For simplicity, ensure that you adapt the total width so that the result of the column width is an integer (no decimals). If achieving this is not possible, consider adjusting the number of the margins. The margins constitute 32 out of the 120 in the formula.
This grid is designed to be used when designing a layout for products and tools in an extension tab (i.e. only buttons). This layout is designed to create an uniform feeling where everything is aligned. This means, if you have a button which is 40x40 pixels, all the buttons on the same row needs to have the same size.
When placing elements in a stacking pattern, it is recommended to add them from left to right for optimal visual flow. Consideration of this left-to-right sequence enhances readability and aligns with typical reading patterns. The picture below illustrates various examples demonstrating how the stacking flow could behave.
Visual hierarchy plays a significant role in guiding the user through the information and interaction presented on the screen. An effective hierachy will reduces the user's cognitive load and ensures they can quickly understand the interface, find the information they need and navigate seamlessly.
How to create good hierarchy:
- Size: Users tend to notice larger elements more easily, and bigger elements are percieved as more important than smaller ones.
- Text: Proper use of headings and font sizes helps users read and organize information effectively.
- Elements: Larger elements attract more attention than smaller ones. For intance, a group with a bigger images on products may be percieved as more important than a group of smaller images.
- Consider scanning patterns: Users often scan content rather than read. Common scanning patterns include Z-pattern, F-pattern, spotted pattern, layer-cake pattern, and commitment pattern.
- Whitespace: Elements that have more spacing around them are percieved as more imporant than others.
- Color: Color can be used to draw attention to a specific type of element, but keep Accessibility in mind.
Alignment is important as it enhances the visual appeal and facilitates easy scanning in design. While the column grid can assist with alignment, it may not cover every scenario, particularly when optical alignment or center alignment is applied.
Optical adjustments comes into play when, for example, alignment is mathematically correct, yet the layout still gives an unbalanced impression. In such cases, small adjustments are needed to achieve an aesthetic and pleasant appearance.
There is other circumstances other than alignment that need to be optical adjustment, for example optical scale and color.
- Alignment: The eye percieves elements to be misaligned even though they are mathematically correct.
- Scale: Elements (including text) seems to be smaller than others next to them even though they have the same size.
- Color: The weight of the object and how much the colour appears can make two objects next to each other appear to have different colors even though they are the same color.
In the image below, there is an example of a scale and how it is adjusted:
- Mathematical scale: The circle button to the left seems the be smaller than the textbox, even though they are the same height in pixel.
- Optical scale: The circle button to the left have been optically adjusted and appears to be the same height as the textbox even though it's a bit larger. Filled objects are perceived as more heavy and does not need a optical adjustment.
In the image below is an example of optical alignment; the right image will look slightly off-center, while the left one is centered. This happens because there are different alignment methods, and when the bounding box is seen as a rectangle, it is, in this case, misaligned. There are several ways this situation occurs, and not only with icons. It is important to be aware of this circumstances occurs and that sometimes it is needed to slightly modify the margins.
When objects are placed close to each other, the mind will percieves them as grouped together. This means that related objects should be closer to each other than objects that are not related. By applying this principle, also known as Gestalt's Law of Proximity, we help the user understand and organize information in a faster and more effecient way.
Ensure related items are grouped close to each other, and use consistent spacing for similar items.
