8

8px grid system

over 3 years ago from , Designer & front-end developper

Good day everyone!

So I was reading about 8px grid system. I like it a lot. Oddly, I was already using it when designing for mobile devices. I thought a 10px grid system was suitable for desktop views, now I'm not that sure.

Do you use any similar system? If yes, what are the advantages of this kind of thinking?

REF : https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

5 comments

  • Richard SisonRichard Sison, over 3 years ago

    Yeah I've been using an 8pt grid for a long time now and that article you posted is a fairly comprehensive write-up of the benefits.

    But when I explain it to people, I usually frame the benefits are around the impact to your team's workflow:

    • Easier for designers. Since I know I'm pulling from a predefined set of numbers adjusting details in a design is a lot easier. If I need more space, I just nudge by 8, 16 etc.
    • Less guesswork for devs. Similarly for developers, since they know the designs have been created from the basis of an 8pt grid, they know their choices are from a limited range. It makes it easier for them to see patterns in a design knowing that there's a system behind it.
    • Encourages more accurate results. Because of both of those, it just discourages using arbitrary values. And when it becomes a known system between designers and developers, it just makes the process and workflow a lot smoother.

    Bonus: When developers are aware of it too, any discrepancies are easier for them to troubleshoot or fix themselves. Let's say there's an inconsistency in padding on a few components, if they notice it they can just flag it with you and resolution is a lot easier.

    6 points
  • John Barrows, over 3 years ago

    my understanding is that 8 is a clearer divisor for most of the numbers we see most in computer logic (8, 16, 32, 256, etc). Also, as browser default type sizes are 16px, then that browser default of 16px becomes an immediate multiple of 8. Screen sizes like 1024 x 768 are easy multiples for an 8 pixel grid.

    Newer iPad Pros sizes aren’t easy multiples of 10 or 8. So, the 8pixel grid may still be an easy mental model from which to design, but I don’t know how well it fits final rendered CSS anymore.

    1 point
  • Alexis WollseifenAlexis Wollseifen, over 3 years ago

    (looks like I cannot directly answer comments so here we hare)

    Thank you for your response Richard B. & Richard S.!

    I actually did tried this system for a more "classic web project". And yes, it is way much easier!

    The redundancy of the 8px already creates a consistent visual base. In fact, I focus more quickly on the essentials, without having to check the sizes, spacings, etc.

    It also allows me to work on visual coherence in verticality, which I have left aside so far, for lack of time.

    From a collaboration point of view, it is clearly easier to work with other designers following this simple 8px rule. This rule ensures a kind of "healthy environment" without limiting the creation too much.

    I plan to meet with the development team to present this solution.

    For now, it's a win within our Design Team!

    1 point
  • Richard BallermannRichard Ballermann, over 3 years ago

    This article does a great job outlining everything.

    I've gotten used to using 8px grids as a fairly firm guideline, and so far it seems like the closest thing to the "golden unit" from my POV. It isn't too limiting as the 10px grid can be, and isn't so fine that you and your team struggle to grasp what the patterns are which a 6px grid starts to suffer from.

    I may stray from it here and there but overall its a solid way to simplify sizing and spacing units when multiple teams are involved.

    1 point