When you improve your spacing, the following happens: <ul><li>It is easier for users to consume the content. </li><li>It creates a hierarchy of information that relays importance to the user. </li><li>It creates consistency throughout your designs. </li><li>It just looks better. </li></ul>

1. Why is spacing important?

The 8Pt grid allows you to use multiples of 8 to space elements in your design. These units include 0, 8, 16, 32, 64, etc. The advantage of the 8Pt grid is that there are fewer numbers to work with. The benefit of the 4Pt grid is that there are more numbers to work with, making it easier to create tighter designs. The 8Pt grid allows you to use multiples of 8, including 0, 4, 8, 12, 24, 32, 64, 72, etc. If you want to 

2. An introduction to point grids

The more familiar the two aspects are, the closer they are together. Conversely, the less friendly they are, the further apart. If you break up elements into different friend groups, you can decide on how ‘ friendly’the elements are to each other based on how related they are. If a class is a friends group, a page layout is a class. Everyone is together, but only some are friends. If you break the rules,

3. Spacing friendships

Containers (includes cards, modals, pages, etc.) should have the largest spacing value. As an example, Godbole uses 16pts as her largest value.Content (includes headers, paragraphs, tables, etc.) is about spacing your typography correctly. The height of headings, paragraphs, and the space between them should all be taken into account and spaced.Components (includes buttons, input fields, icons, etc.) is about the spacing between your smaller components and inside of them, for example, the spacing inside and around your button.

4. The three Cs of spacing

<img alt="Tess Gadd" src="https://miro.medium.com/max/500/0*-eaghEYioJltyRo" width="28" height="28">The easiest way for me, to see an interface designer’s skill is by how they use spacing in their design. Color, typography, imagery, etc., are usually given to you in a brand guide — but correctly using spacing is a skill. After a while it becomes second nature, but only after you have learned and used the basic rules.In this cheat sheet, I explain a rather cheesy metaphor I tell to new joiners to explain how to space elements. These basic rules will hopefully help you train your eye to look at spacing more critically.In this cheat sheet we will cover:<OL><LI>Why is spacing important?</LI><LI>An introduction to point grids</LI><LI></LI><LI>The three Cs of spacing</LI><LI>Closing thoughts</LI><LI>Further reading</LI></OL><h1 data-selectable-paragraph="">1. Why is spacing important?</h1>When I was a wee junior at my first product design job, I can remember being pretty proud of myself with a design I had done. I handed it over to one of the senior designs, who we affectionately nicknamed Pixel-Perfect-<a href="https://twitter.com/PietAlberts" rel="noopener ugc nofollow" dir="ltr">Piet</a>. When I saw my layout again, I was blown away. It looked SO much better but had the exact same elements. By simply improving the spacing in my design, he had created a far more organized, clean, and cohesive layout.<BLOCKQUOTE>Piet had worked a new kind of magic that I was only beginning to understand.</BLOCKQUOTE>When you improve your spacing, the following happens:<UL><LI>It is easier for users to consume the content.</LI><LI>It creates a hierarchy of information that relays importance to the user.</LI><LI>It creates consistency throughout your designs.</LI><LI>It just looks better.</LI></UL><h1 data-selectable-paragraph="">2. An introduction to point grids</h1>Like most interface designers, I started my career as a graphic designer. For designing print layouts, we were taught (I kid you not) to use a square shape to measure the distances between different elements to create consistency.That just won’t fly in digital product design as it isn’t accurate enough.Us interface folk prefer to use more intentional means of measurement between components and shapes. So then comes the question: how far apart should things be spaced? Being someone with ten fingers and ten toes, the inclination is to space items in units of 10. It is also a nice round number that is easy to remember and is often used in graphic design layouts. But 10pt is actually just too big and doesn’t multiply or divide well.Enter the 8pt grid. The 8pt grid allows you to use multiples of 8 to space elements in your design. These units include 0, 8, 16, 32, 64, etc.<BLOCKQUOTE>The number 8 is kinda a magic number — it just works.</BLOCKQUOTE>However, word on the (product design) rumor mill is that the 8pt grid is out, and the 4pt grid is in. This means that you can use multiples of 4, including 0, 4, 8, 12, 24, 32, 64, 72, etc. <a rel="noopener" href="https://uxdesign.cc/goodbye-8-point-grid-hello-4-point-grid-1aa7f2159051" dir="ltr">Dries De Schepper</a>, an interface designer at Deloitte Digital, says that the 4pt grid will give your work much more flexibility, and you will be surprised at how often you use 12pt as opposed to the 8 or 16pt.<figure><img alt="A scale showing the different spacing units in the 8pt and 4pt grids." src="https://miro.medium.com/max/500/1*wE8gsosqu4oqPTS-CNjuGA@2x.png" width="680" height="232"></figure>The advantage of the 8pt grid is that there are fewer numbers to work with, making it easier to keep consistent. Conversely, the benefit of the 4pt grid is that there are more numbers to work with, making it easier to create tighter designs.<h1 data-selectable-paragraph="">3. Spacing friendships</h1>Before I talk about spacing friendships, let’s talk about friendship, and let’s talk about it in the context of a class.In a class, usually different friend groups are going to form. And within those friend groups, even closer friendships form. So you get best friends within a circle of close friends, within an even larger circle of friends.(In reality, friendships circles overlap far more, but for the sake of the metaphor, let’s just pretend that they don’t.)<figure><img alt="A diagram of friendship circles." src="https://miro.medium.com/max/500/1*u95Qm2hj4QFyR8FYDWx23w@2" width="680" height="436"></figure>So how does friendship relate to spacing in UI design?Think of the distance between elements in your design as friendship circles. Some are closer; some are less so. The more familiar the two aspects are, the closer they are together. Conversely, the less friendly they are, the further apart.<figure><img alt="A scale showing the different spacing units in the 8pt and 4pt grids and how they relate to different friendships." src="https://miro.medium.com/max/500/1*Aj2tyac7pkZaIQxGWbxLYQ@2x.png" width="680" height="375"></figure>Compare the two images below. The one on the left was used with the same spacing everywhere. The one on the right was made using spacing friendships, which means the container padding, and the space between the icon, text, and buttons are all different.<figure><img alt="In the first design, the spacing is all the same. In the second, the spacing is different and based on spacing friendships." src="https://miro.medium.com/max/500/1*eckUdmcc3xJVTl8mFuBDzw@2x.png" width="680" height="464"></figure>Can you see that the image on the left looks floaty and messy? Can you see that the one on the right seems balanced and neat?If you look at the example below, you can see how I group the different elements into different friend groups.<figure><img alt="Example of how spacing friendships work in a simple component." src="https://miro.medium.com/max/500/1*ePnCSn-BiE4TrKmhJVKXAQ.png" width="680" height="320"><figcaption dir="auto">Example of how spacing friendships work in a simple component.</figcaption></figure>As you can see in the above image, different elements are broken up into different friend groups. You can decide on how ‘friendly’ the elements are to each other based on how related they are. For example, in the above image, the title and body copy are more related than the button or graphic. But the graphic and button and text all have a similar message so are still grouped together.So what about full layouts? The same principle applies, just with more moving parts.So if the above component was a friends group, a page layout is a class. Everyone is together, but only some are friends. In the below example, you can see how I used the same principle in the full layout as I did in the small component.<figure><img alt="Different steps to showing how to space items in a web page." src="https://miro.medium.com/max/500/0*9FJAzasKICP0dr3f" width="680" height="674"></figure>As you can see in the above image, breaking up elements into different friend groups helps create consistency and hierarchy. Naturally, this isn’t a perfect metaphor, and there may be some exceptions where you decide to break the rules.<h1 data-selectable-paragraph="">4. The three Cs of spacing</h1><a href="https://medium.com/@priyanka_godbole" rel="noopener" dir="ltr">Priyanka Godbole</a>, a product designer at Facebook Design System, has a similar but more structured approach to spacing. She breaks up elements into three main categories, namely; Containers, Content, and Components. For each of these categories, they have a predefined spacing attached to them.Containers (includes cards, modals, pages, etc.) should have the largest spacing value. As an example, Godbole uses 16pts as her largest value.Content (includes headers, paragraphs, tables, etc.) is about spacing your typography correctly. The height of headings, paragraphs, and the space between them should all be taken into account and spaced.Components (includes buttons, input fields, icons, etc.) is about the spacing between your smaller components and inside of them, for example, the spacing inside and around your button.<h1 data-selectable-paragraph="">5. Closing thoughts</h1>Using the correct spacing is a very intuitive exercise, and it takes years to fine-tune. Hell, I would bet my bottom dollar that Pixel-Perfect-Piet would still be able to find errors with my spacing.My hope is that by thinking of components within a design as ‘friends’, will help you get a better feel for how elements should be spaced.<h1 data-selectable-paragraph="">6. Further reading</h1>To learn more about spacing, grids, and how to think about them, check out the following links:

The easiest way for me, to see an interface designer’s skill is by how they use spacing in their design. Color, typography, imagery, etc., are usually given to you in a brand guide — but correctly…

product

Product & Design

The easiest way for me, to see an interface designer’s skill is by how they use spacing in their design. Color, typography, imagery, etc., are usually given to you in a brand guide — but correctly using spacing is a skill. After a while it becomes second nature, but only after you have learned and used the basic rules.

In this cheat sheet, I explain a rather cheesy metaphor I tell to new joiners to explain how to space elements. These basic rules will hopefully help you train your eye to look at spacing more critically.

In th is cheat sheet we will cover:

<ol><li>Why is spacing important? </li><li>An introduction to point grids </li><li> </li><li>The three Cs of spacing </li><li>Closing thoughts </li><li>Further reading </li> </ol>

When I was a wee junior at my first product design job, I can remember being pretty proud of myself with a design I had done. I handed it over to one of the senior designs, who we affectionately nicknamed Pixel-Perfect-<a href="https://twitter.com/PietAlberts">Piet </a>. When I saw my layout again, I was blown away. It looked SO much better but had the exact same elements. By simply improving the spacing in my design, he had created a far more organized, clean, and cohesive layout.

Piet had worked a new kind of magic that I was only beginning to understand.

When you improve your spacing, the following happens:

<ul><li>It is easier for users to consume the content. </li><li>It creates a hierarchy of information that relays importance to the user. </li><li>It creates consistency throughout your designs. </li><li>It just looks better. </li> </ul>

Like most interface designers, I started my career as a graphic designer. For designing print layouts, we were taught (I kid you not) to use a square shape to measure the distances between different elements to create consistency.

That just won’t fly in digital product design as it isn’t accurate enough.

Us interface folk prefer to use more intentional means of measurement between components and shapes. So then comes the question: how far apart should things be spaced? Being someone with ten fingers and ten toes, the inclination is to space items in units of 10. It is also a nice round number that is easy to remember and is often used in graphic design layouts. But 10pt is actually just too big and doesn’t multiply or divide well.

Enter the 8pt grid. The 8pt grid allows you to use multiples of 8 to space elements in your design. These units include 0, 8, 16, 32, 64, etc.

The number 8 is kinda a magic number — it just works.

However, word on the (product design) rumor mill is that the 8pt grid is out, and the 4pt grid is in. This means that you can use multiples of 4, including 0, 4, 8, 12, 24, 32, 64, 72, etc. <a href="https://uxdesign.cc/goodbye-8-point-grid-hello-4-point-grid-1aa7f2159051">Dries De Schepper </a>, an interface designer at Deloitte Digital, says that the 4pt grid will give your work much more flexibility, and you will be surprised at how often you use 12pt as opposed to the 8 or 16pt.

The advantage of the 8pt grid is that there are fewer numbers to work with, making it easier to keep consistent. Conversely, the benefit of the 4pt grid is that there are more numbers to work with, making it easier to create tighter designs.

Before I talk about spacing friendships, let’s talk about friendship, and let’s talk about it in the context of a class.

In a class, usually different friend groups are going to form. And within those friend groups, even closer friendships form. So you get best friends within a circle of close friends, within an even larger circle of friends.

(In reality, friendships circles overlap far more, but for the sake of the metaphor, let’s just pretend that they don’t.)

So how does friendship relate to spacing in UI design?

Think of the distance between elements in your design as friendship circles. Some are closer; some are less so. The more familiar the two aspects are, the closer they are together. Conversely, the less friendly they are, the further apart.

Compare the two images below. The one on the left was used with the same spacing everywhere. The one on the right was made using spacing friendships, which means the container padding, and the space between the icon, text, and buttons are all different.

Can you see that the image on the left looks floaty and messy? Can you see that the one on the right seems balanced and neat?

If you look at the example below, you can see how I group the different elements into different friend groups.

As you can see in the above image, different elements are broken up into different friend groups. You can decide on how ‘friendly’ the elements are to each other based on how related they are. For example, in the above image, the title and body copy are more related than the button or graphic. But the graphic and button and text all have a similar message so are still grouped together.

So what about full layouts? The same principle applies, just with more moving parts.

So if the above component was a friends group, a page layout is a class. Everyone is together, but only some are friends. In the below example, you can see how I used the same principle in the full layout as I did in the small component.

As you can see in the above image, breaking up elements into different friend groups helps create consistency and hierarchy. Naturally, this isn’t a perfect metaphor, and there may be some exceptions where you decide to break the rules.

<a href="https://medium.com/@priyanka_godbole">Priyanka Godbole </a>, a product designer at Facebook Design System, has a similar but more structured approach to spacing. She breaks up elements into three main categories, namely; Containers, Content, and Components. For each of these categories, they have a predefined spacing attached to them.

Containers (includes cards, modals, pages, etc.) should have the largest spacing value. As an example, Godbole uses 16pts as her largest value.

Content (includes headers, paragraphs, tables, etc.) is about spacing your typography correctly. The height of headings, paragraphs, and the space between them should all be taken into account and spaced.

Components (includes buttons, input fields, icons, etc.) is about the spacing between your smaller components and inside of them, for example, the spacing inside and around your button.

Using the correct spacing is a very intuitive exercise, and it takes years to fine-tune. Hell, I would bet my bottom dollar that Pixel-Perfect-Piet would still be able to find errors with my spacing.

My hope is that by thinking of components within a design as ‘friends’, will help you get a better feel for how elements should be spaced.

To learn more about spacing, grids, and how to think about them, check out the following links:

UI cheat sheet: Spacing friendships

1. Why is spacing important?

2. An introduction to point grids

3. Spacing friendships

4. The three Cs of spacing

CURATED BY

Related collections

More like this