Great design is obvious when it’s simple, clear, and consistent. One of the key element what makes it consistent is a grid system. Arguably, the most efficient grid system currently used in the product design is the 8-Point Spacing method, also known as the 8-Point Grid. It was initially introduced by Google Material Design and quickly became very popular among many designers. In this article, I will describe the benefits of using this grid system, provide additional resources, and share my personal solution for its implementation.
What it is.
The 8-Point method is a very simple concept. The idea behind it is to measure the property values of all the elements of a screen or a page layout in increments of eight (in some cases of four). For instance 8, 16, 24, 32, 40 points and so on.
According to Material Design tutorial, there are different alternative techniques, used in the 8-Point method:
Keylines. The distance between layout elements and the left edge of the screen, measured horizontally (by width), whereas the height stays the same (as the height of the screen).
Padding. The space between UI elements, measured horizontally (by width) or vertically (by height).
Vertical Spacing. The height of the layout elements, measured vertically, whereas the width stays the same (as the width of the screen).
To get a better understanding of these methods, take a look at Material Design article “Spacing methods” by Google.
Why to use it.
Using grid systems in product design delivers better user experience by
- Providing the hierarchy of the elements;
- Eliminating the visual complexity;
- Simplifying the decision–making process;
- Bringing a consistency across different screen sizes;
Among other benefits of using 8-Point method is its ability to boost the productivity. This system makes it very simple to measure and create the elements of the layout in increments of eight.
How to use it.
There are plenty of great articles about best practices of the 8-Point Spacing Method implementation on Medium and other sources. Here are just a few examples which I find the most legitimate:
- “The 8pt Grid: Consistent Spacing in UI Design with Sketch” article by Chris Godby, explaining its benefits and best practices of using it in Sketch;
- “Intro to The 8-Point Grid System” article by Elliot Dahl, where he talks about its efficiency while collaborating with other designers and developers;
- “Specifics 001: The 8-Point Grid” article by Bryn Jackson, a very concise and descriptive tutorial with great visual examples;
- “8pt Material Design GUI Templates” article by Joel Beukelman, with great examples of practical implementation of this grid in design system used by now-gone Design Inc. website.
8-Point Spacing Template.
To expedite my personal layout design process and increase productivity, I designed a Sketch symbols library with prebuilt elements measured in increments of eight (and four for the padding method), based on the screen size of the iPhone X (375x812px).
The library consists of all the types of the elements to be used with the methods, mentioned in the Material Design article, such as Keylines, Padding, and Vertical spacing. For the sake of convenience, I also added Margins elements which are the space between the left and the right edges of the screen and the very first of their element on either side.
Here’s a quick demo of how I use the library.
Please feel free to try, share, and build upon my initial project, which I published on GitHub under MIT license.
Meanwhile, also check out my article on "Workflows. Manual version control for Sketch files with GitHub” to learn how I use GitHub for this project.