Published on <a href="https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Chris Godby <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*y10_EeeYsxHGQdZ8bY7wtg.jpeg">
Spacing is everything in UI design.
Forget colour, forget typography. Nail the spacing and you’re half way there. Why?
<ul>
<li>It improves data consumption through better legibility</li>
<li>It provides customers with a more consistent user experience</li>
<li>It eliminates guesswork and decision fatigue whilst designing and developing</li>
<li>It drives consistent scalability</li>
<li>It conveys meaning by giving elements a visual hierarchy</li>
<li>If you’re a designer, you’re output will just… look better.</li>
</ul>
<h3>Setup a spacing system🌌</h3>
I use Sketch app to design user interfaces but the principles here work regardless. If you’re working with a developer this will make both your lives easier. Especially as the product and UI grows — getting to 500 artboards without some sort of spacing system in place is no fun.
To begin, set out base numbers for your grid. I use material design principles so divisions of 8: 8px / 16px / 24px / 32px / 40px / 48px / 56px and so on for all padding / margin between elements (sometimes 4px if you need to go in tight).
I now think in 8’s — at first you’ll probably be using a calculator just to check, but it soon becomes natural. Other designers are happy enough using 5 / 10 / 15 / 20 etc — whatever works for you, the point here is you’re building a base for spacing consistency.
Ensure you communicate how the system works to developers and stakeholders visually:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*0sa1H-795NbZSc6u.png">Material design vertical spacing of a table card
Here you can quickly see that regardless of colour and typography we’ve given the content a visual hierarchy. Even if ‘Nutrition’ was the same font size as ‘Froyo’ it would still command more prominence. You can go a step further and name the sizes (xxs, xs, s, m, l, xl, xxl) and add them to your design system so there’s one source of truth, one point of reference for the whole team.
<h3>So how does this work in Sketch?</h3>
It’s really not that hard, and you’ll soon find your designs improving — incorporating better vertical rhythm on websites and more consistency in app design.
<img alt="" src="https://cdn-images-1.medium.com/max/400/0*NbQyYrHqW-WRIrbx.gif">
I’ll take a web project I’m working on at the moment. To maintain vertical rhythm whilst using the 8pt UI grid, I use an 8pt baseline grid (4pt baseline works well too) — here’s my Sketch layout settings:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*sF1IN_GYGZGr5Mzm.png">
So let’s look in more detail:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*2g9XK0HFdQ20Jzqx.png">
So how does this help?
From one template of elements like this (Section, H2, Paragraph[l], Icon, H3, Paragraph[s], USP panel) we can quickly build a spec/set of rules that will scale and carry consistency throughout the product, saving time and guesswork later.
Developers don’t see things like designers, and vice versa — creating visual design specs bridges this gap.
<h3>Icons</h3>
I used to use icon fonts and quickly found they’re a pain and have a bunch of limitations. With decent browser support I now use SVGs and set them up like this:
<img alt="" src="https://cdn-images-1.medium.com/max/851/0*8gqRfSO_aKE930t8.png">
Ensure you frame your icon as they’ll come in different sizes: and naturally use multiples of 8. These are 64&#215;64 so fit within the UI grid. Most icons are designed for these sizes anyway (16&#215;16, 24&#215;24, 32&#215;32 etc).
Down the line if you need to change an icon and it’s used in 100 different places, you just change this one symbol. With icon fonts this meant regenerating the set and making sure the developers always had the most up-to-date version. It was also really buggy in Sketch for some reason.
<h3>Text elements and line-height</h3>
Regarding line height it can be tricky to make sure text elements fall within the grid. As a broad rule I tend to use this <a href="https://github.com/lorenzwoehr/Golden-Ratio-Line-Height-Sketch-Plugin">Golden Line height plugin</a> or for more basic treatment multiple by 1.5 which gives results like this:
16pt / 24
21pt / 32
24pt / 36
32pt / 48
etc
Pro tip: Multiply font size by the line-height you choose to save using your head.
<img alt="" src="https://cdn-images-1.medium.com/max/207/0*aLrAJ0YqM6JFFDLk.gif">
Line height should actually adapt depending on the width of the element so bear that in mind when working with different devices sizes. Sketch doesn’t handle this (as far as I know), so it is something that needs to be documented in your design spec.
<h3>Putting it into practice</h3>
It’s not always easy to lay down a set of rules like this — perhaps your current sprint is so focused it’s hard to see the big picture or perhaps you’re working on an existing UI with no system in place.
There never seems to be time for this stuff right?
But I highly recommend you:
<ul>
<li>Get the Product Owners on board (talk about scalability, efficiency, faster prototyping… I’ve found it to be an easy sell).</li>
<li>Invest a chunk of time now to save a lot of wasted time and frustration later.</li>
<li>Talk to the developers and tell them what you plan and how it can help them — get their input on how best to provide something they’ll actually use</li>
<li>For existing products, take a step back and build design rules based on the current assets.</li>
<li>For new products, create a basic starter template (based on brand guidelines) with grid/text elements/spacing and add rules as you create components, it’ll change the way you think about design.</li>
<li>Make sure you share it with the whole team and help them understand the benefits.</li>
</ul>
👏 If you found this handy
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=577e4f0fd520" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/the-8pt-grid-consistent-spacing-in-ui-design-with-sketch-577e4f0fd520">The 8pt Grid: Consistent Spacing in UI Design with Sketch</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

The 8pt Grid: Consistent Spacing in UI Design with Sketch

Top Stories