How to Create Better Layouts with 8pt Grid

Grids are an essential element of UI design.

Good. Good. Don t discount color. Let s not forget about typography. But get the grid right, and you re halfway to creating more attractive and functional interfaces.

Consistent and scalable intervals help eliminate design and development guesswork. Fewer design decisions required. And this allows you to significantly speed up the work on projects.

The 8pt grid is probably one of the most commonly used grid systems, and for good reason.

Let me tell you more about her …

Good. What is a point?

Point (pt) is a dimension of space that depends on the screen resolution. The simplest explanation is that when resolving “1x” (or @ 1x) 1pt = 1px…

Earlier when all screens were 1x; 1pt equals 1px. Then there were Retina screens (2x) and Super Retina (3x), and everything changed. When designing for the iPhone X (3x), your design will render at three times the pixels per inch (ppi).

So, for example, if you have a 24px icon when you export it as an asset @ 2x and @ 3x, the rendered image will be either 48px (2x) or 72px (3x), then it will look great on Retina and Super Retina displays, respectively.

I always recommend designing to scale 1x, and then export assets in other sizes as needed (@ 2x, @ 3x, etc.). This will greatly reduce confusion.

Why 8 points?

As I mentioned earlier, the variety of screen sizes and pixel densities continues to grow, which can make things difficult.

Use an even number for padding and size of elements, such as eight, greatly simplifies scaling to a wide variety of devices and makes it more consistent.

The basic tenet of the 8pt grid is that you use margins, padding, and sometimes the size of elements within your design. multiples eight (8, 16, 24, 32, 40, 48, etc.).

I always think about 8 when creating my interfaces, but in some cases I use 4ptfor example, when designing designs for mobile devices when screen real estate is limited.

Hard or soft mesh?

When designing interfaces in the past, I have always preferred to use the soft mesh method. Then you simply measure the 8pt pitch between the individual elements of your design.

When using a “hard grid”, the elements are laid out on the grid in 8pt spacing, which I find too impractical when it comes time to code the design.

Icons and 8pt grid

When it comes to icons, you will find that most of them were designed to be placed inside multiples of frames. eight (16 × 16, 24 × 24, 32 × 32, etc.)

If not, then make sure that any icon you add to your design is framed inside a container using a multiple of eight (e.g. 24×24). This will simply allow you to place icons consistently across interfaces.

Typography and 8pt grid

When it comes to type, using a 4pt baseline grid along with an 8pt grid will give you more harmonious vertical rhythm across all designs.

Just align the text to the baseline grid 4that uses a line height multiple of 4 (4, 8, 12, 16, 20, etc.)

Why 4? As for me, I found that scaling the baseline grid to a multiple of 8 simply pushed the text too far apart when dealing with certain text sizes.

A 4pt baseline grid gives you finer control and much better results.

Hopefully now with this Grid 8 overviewpt you will feel confident and able to design interfaces faster, with more consistency, and fewer design decisions.

Try an 8pt grid. This will make your designs look 10x better.

Source: UXPUB