fbpx

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.

spacing basics example

Here are the basic factors when it comes to spacing:

BASE UNIT

base unit example

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

why 8 pixels example

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

sizing example

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

padding example

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:

typography 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:

typography example 2

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

Example 3:

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

thank you image

Share:

Share on facebook
Share on twitter
Share on linkedin

Sofia, Bulgaria

info@influencevibes.com

+359 879 985 016

Copyrights 2020 © influencevibes.com. All rights reserved. Read our Privacy Policy and Cookies Policy.

Our Services are FREE OF CHARGE

With the outbreak of COVID-19 around the world, we have witnessed businesses falling apart, people losing their jobs, and billions of dollars lost in revenue. This is why we have decided to offer our services for FREE during this global emergency.

Our mission has always been to keep companies growing. However, today, we’d like to help keep businesses running so that the economic effect of the crisis will be minimized and people will not lose their jobs as their company’s revenue streams.

To take advantage of your services FREE OF CHARGE, just get in touch with us and we can help you keep your business up and running.