8px grid system

3 years ago from Alexis Wollseifen, Designer & front-end developper

  • Richard SisonRichard Sison, 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