Excellent UI Spacing Cheat sheet: A complete guide, to Boost Your Next Design Project! 🤜
Overview
The 8-point grid system
The 8-point grid system is a precise and flexible method UX designers use to establish consistent spacing and alignment between elements. It involves dividing the layout into a grid, with each unit of measurement equal to 8 pixels or points. By adhering to this grid, designers can maintain a sense of balance throughout their designs.
The beauty of the 8-point grid lies in its versatility. Designers can easily create spacing increments by multiplying or dividing 8, such as 8, 16, 24, 32, etc. This system provides a reliable framework for spacing elements, ensuring consistency and visual cohesion across different screen sizes and devices.
Spacing friendship
If you are in the design business, whether graphic or digital painting,… you must have heard about the principle of proximity.
This principle suggests that when elements are positioned close together, we perceive them as belonging to the same group. Conversely, we categorize elements into separate and distinct groups when they’re far apart.
The closeness between elements implies a certain level of “Friendship”. This concept, referred to as “Spacing Friendship” by the UX collective, allows us to categorize spacing based on the perceived relationship between elements.
Spacing is relative
You can understand spacing better if you look at the bigger picture. There’s a reason why 8-point spacing is so popular: it’s based on the most fundamental elements: the texts.
The spacing may need to be adjusted when you’re using a font size other than 16 pixels.
Solution for dynamic spacing
For dynamic spacing, the spacing should be built around a constant, which I call x or in some design systems like Atlassian calls “base unit”:
You can make X 0.75 – 1.25 times the size of your smallest element (usually the text). In most cases, you should use a ratio of 1. Sometimes, when you want the design to have more breathing room, like in the hero section, you can use a 1.25 ratio.
Try to be consistent
Like I said before, there are no correct answers. But you still need to be consistent and try your best to limit your spacing options.
That’s why I recommend sticking with the 8-pixel grid system instead of a smaller system like the 4-pixel grid system. Believe me, in the future, you will thank me so much for that.
Conclusion
In a nutshell, by using the 8-point grid system, and considering spacing friendships, designers can create balanced designs.
#ux #ui #userexperience #uidesign #uxdesign #spacing #visualdesign #uxlaws #design #mobile #web #webdesign #appdesign #webdevelopment #react #css #js #html #startup #business