8-Point Grid
The 8-Point Grid System is a spacing method used in UI design where all elements like padding, margins, icons, and typography are sized and positioned in increments of 8 pixels (or points). This creates a consistent and scalable design.
Breakdown
In the 8-Point Grid System the margins and padding between elements are set in increments of 8: 8px, 16px, 24px, 32px, 40px, etc. all the way through the entire design.
UI components like buttons, cards, icons, and images are sized based on multiples of 8. So buttons might be 40px high (5 x 8) and Icons could be 24px or 32px wide and high. If needed smaller increments can be used to such as 4, 8, 16, 24, 32 pixels.
How I use it
I learned this method early on in my design education and it is a life saver for keeping everything in order. It provides a much needed visual consistency that keeps every page or screen looking cohesive. Another huge factor is the simple scalability of the system, it’s very easy to design screens for mobile, tablet, and desktop while keeping all of it looking consistent. Finally it makes handing of to the developer far smoother as they do not need to perform any guesswork on the spacing.
