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 the base unit 8 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 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 spacing methods the column grid 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 extension content docid\ k9e w3zzkehm38jtvqkyu , product button docid\ l2jrbivjudj7ixbuu tgz , and tool button docid\ slm9kidf g5xog2upu0km how to apply to other layouts 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 column width = \frac{total width 120}{12} 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 the grid grid 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 stacking flow 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 layout guidelines create hierarchy 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 docid\ wfsmn utuozdt74 dr1sr in mind do structure infrmation with the aid of size, white space and colors to create a visual hieararchy don't elements should not fight for attention by having the same heading and sizes make sure things are aligned 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 adjustment 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 group by proximity 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 do group related items close to each other and use the same spacing for similar items don't group related items far apart