How to use pixel grid?

Question

Design

Until today, I did everything by eye. Margins and sizes were set according to my aesthetic vision. Of course, I try to keep the same indents between similar blocks, for example, between form fields, but for this I have to “run” all the time to the layouts of other pages to peep the values, since I don’t remember all of them. I got tired of it, I decided to learn how to work with a pixel grid in order to achieve some kind of consistency and uniformity in design - you set the rules once and follow them without thinking about what kind of indentation you need. I'm currently reading about the 8pt grid recommended by Apple and some design bloggers. And immediately an amateurish question arises: if we use 8pt increments everywhere, then what about creativity? Let's say I drew a button that looks cool, but does not fit into this grid? Well, not 8 or 16 pixels is not suitable for indenting on the left, exactly 10 is needed. What to do in such cases? Or another example: you need an input with a height of 20 pixels, not 16, not 24, not 32, but exactly 20. How to proceed here? Is there a common workflow? Please teach me how to work with these grids :) Thank you!

Answer 1

No problem! You read about 8px grid, but I often use 4px grid in my work (complex projects or small elements). It is certainly more difficult to work with, but nevertheless you get more creative freedom (since the indentation of the same button can be 4, 8, 12, 16, 20, 24 pixels, and not just the canonical 8, 16, 24). Try it, maybe this is what you need!

Answer 2

so what about creativity?

Is creativity a manifestation of curvature?
You have in the text either pt or px, you decide.
Well, make it so. Grid is a helper, not an eccentric who hits his hands for a step to the left.
Grids were invented for convenience, so that the blocks in them were on the same level, etc. With the advent of scss and less, all this has become even more convenient. For you can set values ​​and then use them, for example:

@margin-size: 15px;
@color-default: #fff;
.some-my-block {
margin: @margin-size auto;
padding: @margin-size;
color: @color-default;
}

Standardization, as a result of aesthetic beauty. But this does not mean that the button in such a block cannot be of other sizes. However, you need to understand that if you do not follow these rules everywhere, you will not be able to change the margin-size to another tomorrow and expect that everything will be fine.