Design with 4px Grid System
Goodbye 8-point Grid, Welcome 4-point Grid!
Use multiples of 4 to make cleaner and clearer UIs
If you are a product designer or user experience designer, you may have heard the term grid system. In this article, I will talk about how using a 4-point grid will make your UI looks pixel perfect. This is because a balanced, scalable space allows both the designer and the developer to work very fast on a project.
When I started designing the UI 4 years ago, I did not follow any specific guidelines. I was mostly checking on other apps and websites and how they have given space for their designs. They have utilized space in many different ways,rather sticking to a once specific standard. I saw all sorts of numbers. Margins / Paddings of 12px, 13px, 15px, 20px,…
Then I started my research on this to figure out the perfect spacing patterns and perfect multiples to use in the design.
As a result, I got to read about 8 points grid system on spec and started following it as a principle in all my designs which in turn made me upset if I couldn’t see the same in other designs. But with the passage of time, I found out that this has limited me in some cases when it comes to enterprise software or interfaces with copy, text fields, hyperlinks, tables, and buttons. Afterwards, I tried out an experimental approach to use 4-point grid spacing style in my designs without the acknowledgment of any other party. By playing around with 4-point grid spacing style, I found out that it’ll be very easy whenever required to change a desktop design to a responsive layout.
With the advancement of time, I got to know more about these 8 point and 4 point grid spacing styles and thought of sharing my ideas with you.
What is the 8- point grid?
There are different screen sizes like website, apps, dashboard, UI, etc. The pixel density is constantly increasing, further complicating the task of property creation for designers. Because of the use of number size and space components such as 8, scaling is easy and smooth for a wide variety of devices. Also, most of the popular screen sizes are divisible by 8, which makes them easy to fit. The principle of the 8pt spacing is to adjust layout, dimensions, padding, and margin of the elements using multiples of 8 (8, 16, 24, 32, 40, 48, 56, etc.).
Then why is the 4- point grid?
Using ‘increments of 4’ for the sizing and spacing of the elements on a page is simply known as the 4-point grid view. Any defined height or width should be divisible by 4 including padding, edges, and line heights. Link options or view more. Instead of choosing between 8 or 16, you can go to 12. imagine icon sizes, spacing between elements, text, and horizontal spacing between icons.
Even Material follows this 4-point grid layout throughout their design.
Using a double number for the size and spacing of the parts can be very effective. For example, devices with 1.5x resolution can be difficult to provide an odd number clearly. Measuring 5px to 1.5x would result in a half-pixel offset. Especially the 4pt grid instead of other equal numbers because it gives you good size options on variables like 6 point system without overloading or controlling you like 10 point system.
And also 4pt layout grid will be most useful when the values it provides at the end are used throughout the box model. Each value should be divisible by 4, including margins, paddings, and line heights. Exceptions are the font size and actual size within the icons, but those elements are still on the cover to match the grid.
Personally, I used to align my text with the 8 basic steps, and there were times the problem that the text in several lines was too tight or too large than the other components. Now I use to align my text to the base level of 4 with a line-height increment of 4. I highly recommend the good line-height tool I moved to 4pt.
If the category is centered within a component such as a button or a list item, it can be positioned outside the 4dp grid. When placed outside the grid the text appears to be vertically centered but centered within one element.
The advantage for designers is that you have to make fewer decisions while maintaining a quality horizontal and vertical rhythm between your elements.
Note for Designer & Developer
It also speeds up the design and development process because designers’ spacing guidelines are easy to cooperate on, and developers know the components can always be implemented in accordance with these consistent spacings.
Controls are natural, sometimes necessary but as designers don’t we like less controls? The 4-point grid will provide more cleanness in your UI work. You may be wondering how many times you can use 12px instead of 8px or 16px as a spacing value.
Have a great day. See you soon with more design articles.
