vikipavlin23
@vikipavlin23
"Наверстываю" упущенное

Какие должны быть размеры в дизайне?

Стало интересно узнать существует ли какое-то негласное правило у дизайнеров про размеры блоков и отступов, чтобы они были кратны 5?
В последнее время сталкиваюсь с тем, что всем плевать. Хотя раньше везде где проходила курсы и на прошлой работе размеры были заданы по такому принципу. Поэтому для меня диковато было, что кнопки могут быть 168px, 96px, 234px и тд. Отступы у блока тоже могут верхний и нижний не совпадать ( к примеру 19px и 20px).
Объясните с проф точки зрения как правильнее?
  • Вопрос задан
  • 1552 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Не оттуда пляшете.

Давайте я вам как девочка девочке всё объясню. На примере джинсов.
Есть такая штука мода. Сейчас в обтяжку, раньше клеш или широченные. Но при этом всегда остаются люди предпочитающие классику или консерваторы, которые предпочитают даже слегка устаревшую классику.

Так вот, с сайтами аналогичная история.
10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

Кроме этого есть аспекты адаптивности.
И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

Поэтому, хороший дизайнер либо сопровождает работу верстальщика, либо пишет сопроводительное письмо с указанием зависимостей, либо и то и другое.

И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
pospelov
@pospelov
Руководитель веб-студии
Нет таких правил и стандартов, кнопка может быть хоть 100, хоть 131 пиксель, это какие-то влажные фантазии верстальщиков, не понятно ради чего...

Вертикальные и горизонтальные ритмы ЖЕЛАТЕЛЬНО соблюдать, кроме случаев, когда ты четко знаешь, почему ты их нарушаешь.

Если в одном месте 19 пикселей до (условно) до футера, а в другом 20, то конечно это не внимательность! И здесь должен быть стандарт.
Ответ написан
mixail_fet
@mixail_fet
Дизайнер веб-интерфейсов
Есть такое правило, и действительно, многие сейчас этим пренебрегают. Вообще, в отрасли появилось очень много "самозванцев", которые так или иначе, не хотят соблюдать стандарты, но при этом, заявляют, что являются профессионалами.

Про то, как грамотно составлять систему отступов, можно почитать тут:

Отступы в дизайне: системный подход
Как создать устойчивую и гармоничную систему отсту...
Ответ написан
Oleyouhou
@Oleyouhou
UX/UI
Профессионалы часто используют сетки для определения размеров и отступов, но они редко кратны 5.
Часто используются сетки 4x4 и 8x8. При желании, можно поискать статьи с обоснованиями, какая размерность лучше и почему.
Часто для определения размеров блоков, отступов и элементов используются модульные сетки и, иногда, baseline grid, пришедшие из полиграфии.
В целом, размеры у элементов редко когда бывают «красивыми» (20, 40, 60).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы