Principles of spacing in UI design (Part 1)

Why is spacing important?

Before I talk about spacing principle, you should know how spacing important is with our design.

In design have four main factors in such as:

• Content
• Graphic
• Navigation
• Identify

Spacing has not only an impact directly on this factors but also on aesthetics design. Even more, it gives the page a harmonic look. It decides you want them to pay attention to what. If you know the principle of spacing, you can use it in all your products. And you have a power strength of designers.

Now let’s check the below example:

For the above line, if there’s not enough space between elements, they become hard to read. It makes them feel disagreeable thus users want to scan past them. The sentence they can remember that is ”Title 1”.

The below line, they read easier than the above sentence. It allows the user to focus on the key elements.

Do you wonder why books use serif fonts? Because serif fonts lead the eyes forward, making the text easier to read. Besides, the letters in books are too small and many, thus far you should direct the eyes to the right. A letter with serifs will limit to whitespace between words. As such, there’s no vertical movement the eyes and serifs suggest a connection between letters to improve readability of user.

Do you understand the importance of spacing? I will show another example if you do not understand it.

Here are two of my landing pages. Above page balanced use of negative spacing in addition to suitable aspect ratios. It looks organized and visual harmony. For below page, the illustration is too big. Contents are not associated together. The page has not a visual hierarchy and whitespace is appropriated.

In brief, with four main factors but if the spacing is different together, the recognization is also different. Therefore, you should seriously understand the principle of spacing to improve your design. And now, let me show you!

What is the principle of the spacing?

1. Vertical spacing

The first principle is a vertical axis spacing (x). In website or mobile, there are the least with three formats include large spacing, medium spacing, small spacing ( spacing as little as possible, you shouldn’t subdivide it into much). These spacings will go through design to keep consistency in your project.

Large spacing: To adapt to a large amount of information and so they need wide spaces to separate elements. For example, the above image, I divided two main titles “Phieu dang ki du thi …” and “ A.Thong tin …” with below body text.

Medium spacing: To adapt to a medium amount of information in such as divide “Phieu dang ki du thi ….” (title 1) and “A.Thong tin …” (title 2) or title and body text. Similarly, depending on the function and goal your design to design a reasonable outcome.

Small spacing: To adapt to a small amount of notification such as body texts or elements

2. Horizontal spacing

The second principle is a horizontal axis spacing (y). For this one, you can set up the grid to divide into the layout. It can ensure the flexibility of the layout design. Occasionally, you can arrange components without following the grid layout.

Conclusion

Based on that, you will have the benefits of approving negative spacing:

• It improves the readability/legibility of the user
• It has a strong layout system
• It enhances visual aesthetics
• It ensures the flexible layout in design
• It builds consistent design.

What's next?

Next part 2, I will show value spacing and in cases when you approve the principle of the spacing to avoid encountering them.

You can follow me on https://dribbble.com/Anna23593 and thank you for taking the time to read it.