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

Question

[Виктория Зголич]

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

Answer 1

[Ankhena]

Не оттуда пляшете.

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

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

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

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

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

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

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

Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.

Comments

[Виктория Зголич]

Анна, вы как обычно на высоте! Спасибо!

[Никита Гарейшин]

Обожаю такие ответы, блеск)

[Нерон Лордов]

96 это точно такое же красивое число как 100. Это 16*6

Неа. 96 это 8*12. Дело в восьмерке - во-первых, потому что это очень "компьютерное" число, а во-вторых, потому что 8-пиксельная сетка крайне популяризировалась после появления Material Design от гугла, хоть она и существовала испокон времён - обрати внимание на общий множитель разрешений в различных видео-режимах: как правило это восьмёрка.

[Нерон Лордов]

Но вообще побольше бы таких верстальщиков, как автор ответа. И дизайнеров тоже.

(понимаю, что автор ответа может не быть ни тем, ни другим)

[Андрей Гуртовой]

пиксели кратные какому либо числу, -- это культ карго.

Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.

если в браузерных настройках выставить размеры 150 то всё на странице увеличивается ровно в полтора раза, исключением могут быть шрифты -- при сглаживании и смягчении шрифтов каждый браузер ведёт себя по разному, но погрешность как правило не составляет пару пикселей.

так что тоже мимо.

[Ankhena]

Андрей Гуртовой, не путайте масштаб с увеличением шрифта.
При увеличении масштаба, да, всё изменится пропорционально.
При увеличении шрифта изменится только шрифт (при условии, что он не был задан жестко в px)

Answer 2

[Максим Поспелов]

Нет таких правил и стандартов, кнопка может быть хоть 100, хоть 131 пиксель, это какие-то влажные фантазии верстальщиков, не понятно ради чего...

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

Если в одном месте 19 пикселей до (условно) до футера, а в другом 20, то конечно это не внимательность! И здесь должен быть стандарт.

Comments

[EYPPNM]

не понятно ради чего...

они себя стараются перестраховать от переполнения с якобы взглядом на будущее, что ктото придёт и изменит контент внутри, и в погоне за этим они наоборот соблазняют переполнять, что приводит потом напротив к трешу

[Максим Поспелов]

EYPPNM, три раза прочитал ваш коммент и не понял о чем вы, без обид)))))))))))))))))))))

[EYPPNM]

Максим Поспелов, верстала всегда думает что он умён, когда оставляет размер элемента разлоченным, что якобы если придёт модератор какойто, или там девочка редактор наполнять чтото, и случится переполнение, то блок или кнопка растянется, и верстала тем самым стимулирует рост вероятности переполнения, что приводит к полной поломки интерфейса или его кривизны в будущем, раз такая возможность есть сделать переполнение, то ей непременно воспользуется какой нибудь другой специалист который придёт работать на проект

[EYPPNM]

Максим Поспелов, и они интерактивные элементы даже наивно любят подгонять под размер шрифта!

[Нерон Лордов]

верстала тем самым стимулирует рост вероятности переполнения, что приводит к полной поломки интерфейса

золотые слова

[EYPPNM]

Вертикальные и горизонтальные ритмы ЖЕЛАТЕЛЬНО соблюдать

Вертикальные ритмы нет надобности строго или желательно соблюдать, они были изобретены только для типографики где существует понятие "Страница на просвет" когда переворачиваешь страницу, чтобы текст который находится сзади не затенял собой пространство между строками, там это жизненно необходимо, потому что читать газету в которой это не учтено при вёрстке - невозможно (буквы сливаются). А вот горизонтальные ритмы соблюдать надо нередко, потому что это Bootstrap нововведение. В вэбе физических страниц нету, источника света за переворачиваемой страницей не существует на проектах. Больше поле для манёвров. Можно этим пренебрегать, больше свободы для дизайна.

Answer 3

[Михаил Проскурин]

Есть такое правило, и действительно, многие сейчас этим пренебрегают. Вообще, в отрасли появилось очень много "самозванцев", которые так или иначе, не хотят соблюдать стандарты, но при этом, заявляют, что являются профессионалами.

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

Отступы в дизайне: системный подход
Как создать устойчивую и гармоничную систему отсту...

Answer 4

[Олег Степанов]

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

Comments

[Андрей Гуртовой]

всё же придерживаться какой либо сетки при выборе размеров это скорее вред чем польза. нет никакого смысла в этом.
статьи что я встречал принимают эти множители за истину, но не обьясняют зачем.

[Олег Степанов]

Андрей Гуртовой, если бы в сетках смысла не было вообще, никто бы этим не пользовался.

Иметь систему размеров, на которую можно ориентироваться (4, 8, 16, 24 и тд) очень удобно, это сильно ускоряет работу. Даже при том, что какого-то высшего смысла именно в таких значениях нет. Множители 4 и 8 удобны, потому что не слишком мелкие и не слишком крупные, как раз чтоб UI рисовать.

Правда есть два но:
1. Если пытаться всегда жёстко следовать сетке, это работу, наоборот, усложнит (либо дизайн будет не оч).
2. Получившийся по сетке "дизайн" как правило, требует доработки напильником.

Короче, сетки полезны, если пользоваться ими без фанатизма.