As a designer you’ve probably heard the term grid whether you’re designing a website, a magazine, or a mobile app. We have grids for all sorts of content arrangements. We use column grids to align content horizontally. Baseline grids to vertically align bodies of text. Soft grids and hard grids to describe how strictly we adhere to them. I took interest in the 8pt grid system after hearing Bryn Jackson avidly talk about it. I decided to find out what, if any, benefits an 8pt system could give my designs.
What’s the problem? I’ve gotten this far without using the 8pt system.
I’ve used design systems like Bootstrap or Foundation to jumpstart web projects, even tried to build a few similar systems myself. It wasn’t until recently that I realized components like buttons can be beautifully laid out individually but degrade the overall design when set into a larger soup of elements and content. This is because reaching an aesthetically pleasing composition to the overall page is difficult to consistently create. I can use my design eye to nudge a few elements here or there but I can’t rely on a team of designers and developers to share my same vision. Without a system to define the spacing relationships of my elements it’s difficult to create consistency.
In this comparison you can see an 8pt grid system vertically aligning the elements of a form versus a popular design system that utilizes arbitrary numbers to space and size elements.
Why does my interface need to be consistent?
It doesn’t. However, if you want to have a professional and trustworthy appearance it should. If you’ve ever shopped online, you’ve experienced the hesitation when you click purchase and the credit card entry form looks different from the rest of the site. A little consistency goes a long way.
Why is adopting Bootstrap or a similar system not enough?
Bootstrap is an opinionated library of components that allows designers/developers to focus on the content and user experience. It has raised the quality of countless websites across the web. But not having a consistent unit of measurement can lead to layout inconsistencies between pages, particularly on projects with two or more designers.
When building our own brand aesthetic at Pivotal we often need to create unique components and layouts. While recently working to unite our UI system we came across the fact that the branding in the top corner of all of our products is slightly different. Built by separate teams around the world, the overall concept is the same but the execution is slightly different. Which one is wrong?
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?
Change is the only constant, so individuals, institutions, and businesses must be Built to Adapt. At Pivotal, we believe change should be expected, embraced and incorporated continuously through development and innovation, because good software is never finished.
Intro to the 8-Point Grid System was originally published in Built to Adapt on Medium, where people are continuing the conversation by highlighting and responding to this story.
