Intro to The 8-Point Grid System (2016)

The truth is none of them. They have different heights and paddings but without a system in place to clearly explain the thinking behind a style rule why should you follow it?

Well, what’s your solution wise guy?

The 8pt grid system. Use increments of 8 to size and space out the elements on a page. To me this means that any defined height or width, margin or padding will be an increment of 8.

Why 8pts?

The variety of screen sizes and pixel densities has continued to increase making the work of asset generation more complicated for designers. Utilizing an even number like 8 to size and space elements makes scaling for a wide variety of devices easy and consistent.

For example devices that have a 1.5x resolution will have a hard time cleanly rendering an odd number. Scaling 5px by 1.5x will result in a half pixel offset.

Ok, I get the even number thing, but seriously, why not 6, or 10?

The majority of popular screen sizes are divisible by 8 which makes for an easy fit. Scaling by increments of 8 offers a good amount of options without overloading you with variables like a 6 point system, or limiting you like a 10 point system. Ultimately you have to decide what size is right for your audience. The “system” is only good if it is easy to follow and repeat.

What is the value of the 8pt system?

For Designers: Efficiency, less decisions to make while maintaining a quality rhythm between your elements.

For Teams: An easy system of communication between designers and developers (no fussing over pixels). A developer can easily eyeball an 8pt increment instead of having to measure each time.

For Users: Consistent aesthetic to the brand they trust. No blurry half-pixel offsets on their preferred device.

(Update) Read more in part two of this post

8-Point Grid: Borders and Layouts

Where do I get started?

Here are a few articles about implementing an 8pt grid for designers and developers.

Bryn Jackson’s 8-Point Grid post is the most comprehensive guide from definitions to implementation.

Anthony Collurafici’s post about his Sketch workflow is a great guide to getting started. He is also the creator of www.nudg.it which greatly speeds up my workflow.

Google Material Design — Metrics & keylines article is another great resource for examples and explanations.

Intuit’s Harmony Design System has a great explanation of responsive, baseline grids, and why the pixels count.

Questions:

At Pivotal this is something we are still exploring. I’ll be sharing our process along the way in future blog posts. Do you use a similar system in your projects? Why or why not? If you have, what have you learned?

from Hacker News https://ift.tt/2mRoqMC