V
V
Victoria Zgolich2019-02-06 11:08:36
css
Victoria Zgolich, 2019-02-06 11:08:36

What should be the design dimensions?

It became interesting to find out if there is some kind of unspoken rule among designers about the size of blocks and indents so that they are a multiple of 5?
Lately, I've been dealing with the fact that no one cares. Although before, everywhere where I took courses and at my last job, the sizes were set according to this principle. Therefore, it was wild for me that buttons can be 168px, 96px, 234px, and so on. The indents of the block may also not match the top and bottom (for example, 19px and 20px).
Explain from a professional point of view as correct?

Answer the question

In order to leave comments, you need to log in

4 answer(s)
A
Ankhena, 2019-02-06
@vikipavlin23

Don't dance from there.
Let me explain everything to you as a girl to a girl. For example jeans.
There is such a thing as fashion. Now tight-fitting, earlier flared or wide. But at the same time, there are always people who prefer the classics or conservatives who prefer even slightly outdated classics.
Well, it's the same story with websites.
10 years ago, 14px font was thought to be megalomaniac and used 10 or 12. Tiny indents between lines. Particularly negligent, even between paragraphs, they tried not to make empty lines.
There is fashion and user perception of modern sites. The way you want to see right now. Even proportions and dependencies change.
In addition, there are aspects of adaptability .
And it's not the width of the button that is 100 or 96px, but the width of the button is the width of the text plus padding. And it would be nice if these paddings were proportional to the font size, and not a multiple of 5px. You will set the indent to exactly 20px, and the user will set the font to 150% in the browser settings. And you get a stubby button with ugly little indents.
At the same time, not all elements must be a multiple of the font size, some have other dependencies.
Another option is proportions relative to screen or block sizes. For example, the button should occupy the entire width of the block or half. If the text does not fit, it wraps.
Therefore, a good designer either accompanies the layout designer's work, or writes a cover letter indicating dependencies, or both.
And yes, the designer can clearly say that the right indent is 19px, and the left is 17, because visually (for example, due to the font features) it turns out exactly. If this is a problem for a layout designer, then you should not work with such a layout designer.
It is also true in the opposite direction, if the designer piled up some kind of insane design due to which an extra 1000 lines of code are added, then it makes sense to discuss the appropriateness of using it with the designer and the customer.
About the contribution of customers to the design, I think you yourself know. They have a special sense of beauty, well, if just a conservative from the first paragraph.

M
Maxim Pospelov, 2019-02-06
@pospelov

There are no such rules and standards, a button can be at least 100, at least 131 pixels, these are some kind of wet fantasies of layout designers, it’s not clear why...
It is DESIRABLE to follow vertical and horizontal rhythms, except when you clearly know why you violate them .
If in one place there are 19 pixels up to (conditionally) up to the footer, and in another 20, then of course this is not attentiveness! And there should be a standard here.

M
Mikhail Proskurin, 2019-02-06
@mixail_fet

There is such a rule, and indeed, many now neglect it. In general, a lot of "imposters" have appeared in the industry who, one way or another, do not want to comply with the standards, but at the same time, they declare that they are professionals.
You can read about how to correctly compose an indentation system here:
Design indents: a systematic approach
How to create a stable and harmonious indentation system...

O
Oleg Stepanov, 2019-02-10
@Oleyouhou

Professionals often use grids for sizing and spacing, but they are rarely a multiple of 5.
4x4 and 8x8 grids are often used. If you wish, you can search for articles with justifications, which dimension is better and why.
Often, modular grids and, sometimes, baseline grids, which came from the printing industry, are used to determine the size of blocks, indents, and elements.
In general, the sizes of elements are rarely "beautiful" (20, 40, 60).

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question