Spacing Basics and Rules Every Designer Should Know

A good mix of bending rules, on top of creativity, is the key to creating good UI (User Interface).

User interface (UI) design is the process of styling the interface of a software or computerized device with an emphasis on appearance and looks.

It’s a practice that focuses on providing users highly usable and efficient interfaces.

Proper spacing is one of the basic but most important elements in every great design.

It helps organize information while also setting the rhythm, structure, and hierarchy in your design. These factors work together and help the designer have a rational approach when it comes to elements such as spacing.

Let’s talk about the importance of learning the basics of spacing which includes sizing and measuring.

Here are the basic factors when it comes to spacing:

BASE UNIT

Designers are often faced with small but impactful choices when they work. It might not look much, but the height of an image to space around a button can change the way your design looks dramatically

Thus, a spatial system must be used by the designer to maintain a consistent product and reduce the time the designer spends on communicating and changing the design.

The base unit allows you to create the scale of supported sizes in your spatial system. There are different approaches to this and as a designer, and you will encounter increment systems from 4pt, 5pt, 6pt, 8pt, or 10pt increment systems.

WHY 8 PIXELS

A lot of designers show a preference for the 8px linear scale because it is divisible by 4 and 2. It makes it easy to resize any element without ending up with a design with half pixels.

Whereas, if you use 10, you will end up with 5px, 2.5px, and 1.25px respectively. Using half pixels should be avoided as much as possible.

Whole pixels will allow you to have precise pixel boundaries and help your UI elements to appear aligned and crisp.

SIZING

When it comes to a set spatial system, the sizing of solid elements must be prioritized so both elements will match.

Things like buttons and forms are usually measured in increments of the base unit (8,16,24).

Doing so will help define a clear structure, hierarchy, and rhythm to your design. This element can also be applied to the line height, buttons, and input forms. Sizing is a key element in creating rhythm in your overall design composition.

PADDING

Strict padding must be enforced by designers when considering the display of the design into consideration. It can also be applied when the content is less predictable to allow sizes of different elements to follow the content. Consistent padding will not only allow the design to be aesthetically pleasing but have much better readability.

The element’s sizes may still depend on the rules from your spatial system but will still help improve the readability in cases of user content that’s hard to predict. The space between UI elements must be measured in increments of the base unit (8, 16, 24, 48) as much as possible.

Here are some examples:

Example 1:

Use increments of 8 to size and space out the elements on a page. By doing so, any defined height, width, margin, or padding will have an increment of 8.

Example 2:

Using an 8px grid makes scaling for many different types of devices easier and more consistent.

Example 3:

For typography, the classic font size scale 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, and 72 pixels is a harmonious progression of font sizes with a ratio that allows you to scale up to much larger font sizes.

Conclusion

While just going with the flow is easier than creating and following a structured system, modifying these spacing elements to your design process and encouraging other people to work on the same project might be a challenge.

Regardless, doing so will result in better user experiences, fewer changes and revisions, and faster product delivery.