…точнее, модульные сетки в веб-дизайне
Колоночные сетки


Модульные сетки

Коллажные сетки
Интуитивные и алгоритмические сетки
Комбинированные сетки
Восьмипиксельный микромодуль
Вертикальный ритм просветов и отступов придаёт дизайну «консистентный» вид.
Идеальный микромодуль — 8pt (или 8 «логических пикселей»).
Всем польза.
Для дизайнеров — меньше возни.
Для команд — облегчение коммуникации между дизайнерами и фронтами — последние не должны всё измерять каждый раз, а могут исходить из шага 8pt.
Для пользователей — консистентная эстетика и pixel perfectness.
Почему 8pt? Устройства с разрешением 1,5x будут работать медленнее, чтобы обеспечить качественный рендеринг дробных значений.
Для удобства поставьте Big nudge = 8. Теперь Shift+стрелка будет перемещать объекты на 8pt.
У вас есть кнопка автоматической ширины (контент определяет её ширину), и вы решили добавить внутренние поля в 8px слева и справа от неё. Стиль бренда требует обрамлённой кнопки. Как считать границу? Возможны варианты.
Любые отступления от сетки могут вызвать недоразумения между дизайнерами и разработчиками. Второй способ вызывает их меньше. Важно договариваться «на берегу».
Осторожно! Figma не учитывает обводок при расчёте границ.
Браузер измеряет границы как сплошное пространство на странице. Установка параметра box-sizing: border-box выводит границу на внутреннюю часть заданной высоты и ширины, но подталкивает к внутреннему содержимому. Установка параметра box-sizing: content-box приводит к тому, что внутренние поля и граница будут посчитаны за пределами заданных высоты и ширины.
На самом деле существует два основных варианта этой системы. В одном случае элементы помещаются в отображаемую системой сетку с шагом в 8 пунктов («жесткая решётка»), а в другом — просто измеряются шаги в 8 пунктов между отдельными элементами (мы будем называть это методом «мягкая решётка»).
Основным аргументом в пользу метода жесткой решётки является то, что, используя дополнительные прозрачные фоновые элементы и группируя их с небольшими группами элементов переднего плана, вы можете отслеживать отступы и подкладки для каждого элемента и просто прикреплять эти контейнеры к сетке, как кирпичи. Material Design, где все уже спроектировано в соответствии с сеткой 4pt, естественным образом соответствует этому методу.
Аргумент в пользу метода Soft Grid заключается в том, что когда приходит время кодировать интерфейс, использование фактической решётки не имеет значения — она просто будет выброшена. Когда приоритетом является скорость получения управляемого набора макетов, отказ от жесткой решётки в пользу более мягкой решётки может стать преимуществом.
Не забывайте о необходимости оптической компенсации.
Проблема. Ограничивающая текст рамка добавляет дополнительное пространство над и под фактическим текстом. Поэтому, когда ограничивающая рамка используется для измерения пространства, оно оказывается больше, чем нужно. Чем больше высота строки, тем больше проблема.