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.
Consecutive and scalable intervals help get rid of the guesswork in design and development. 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 the screens appeared Retina (2x) and Super Retina (3x), and everything changed. When designing for iPhone X (3x), your design will display with three times more pixels per inch (ppi).
So, for example, if you have an icon sized 24pxwhen 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 1xand then export assets in different 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 for padding and sizing elements even numbersuch as eight, greatly simplifies scaling to a wide variety of devices and makes it more consistent.
The basic principle mesh 8pt is that you use margins, padding, and sometimes dimensions elements inside 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?
Before creating interfaces, I have always preferred to use the method “Soft mesh”… Then you just measure step at 8pt between the individual elements of your design.
Using “Rigid mesh”, elements are placed in a grid with a step of 8ptwhich 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 fit within frames that are multiples of eight (16 × 16, 24 × 24, 32 × 32 etc.)
If not, then make sure any icon you add to your design is placed in frame inside containerusing a multiple of eight (eg, 24 × 24). This will simply allow you to place icons consistently across interfaces.
Typography and 8pt grid
When it comes to font, use base grid 4pt together with mesh 8pt will give you more harmonious vertical rhythm in all designs.
Just align the text to the baseline grid 4which uses line height value, multiple 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 baseline 4pt grid gives you more precise 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.
Thanks for reading the article.…