big

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

Колоночные сетки

big
Исходный размер 2304x1556
big
Исходный размер 2304x1556

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

big
Исходный размер 2304x1556
Исходный размер 2304x1556

Коллажные сетки

Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556

Интуитивные и алгоритмические сетки

Исходный размер 2304x1556
Исходный размер 2304x1556

Комбинированные сетки

Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556

Восьмипиксельный микромодуль

Вертикальный ритм просветов и отступов придаёт дизайну «консистентный» вид.

Исходный размер 2304x1556

Идеальный микромодуль — 8pt (или 8 «логических пикселей»).

Исходный размер 2304x1556

Всем польза.

Для дизайнеров — меньше возни.

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

Для пользователей — консистентная эстетика и pixel perfectness.

Исходный размер 2304x1556

Почему 8pt? Устройства с разрешением 1,5x будут работать медленнее, чтобы обеспечить качественный рендеринг дробных значений.

Исходный размер 2304x1556

Для удобства поставьте Big nudge = 8. Теперь Shift+стрелка будет перемещать объекты на 8pt.

Исходный размер 2304x1556

У вас есть кнопка автоматической ширины (контент определяет её ширину), и вы решили добавить внутренние поля в 8px слева и справа от неё. Стиль бренда требует обрамлённой кнопки. Как считать границу? Возможны варианты.

Исходный размер 2304x1556

Любые отступления от сетки могут вызвать недоразумения между дизайнерами и разработчиками. Второй способ вызывает их меньше. Важно договариваться «на берегу».

Осторожно! Figma не учитывает обводок при расчёте границ.

Браузер измеряет границы как сплошное пространство на странице. Установка параметра box-sizing: border-box выводит границу на внутреннюю часть заданной высоты и ширины, но подталкивает к внутреннему содержимому. Установка параметра box-sizing: content-box приводит к тому, что внутренние поля и граница будут посчитаны за пределами заданных высоты и ширины.

Исходный размер 2304x1556

На самом деле существует два основных варианта этой системы. В одном случае элементы помещаются в отображаемую системой сетку с шагом в 8 пунктов («жесткая решётка»), а в другом — просто измеряются шаги в 8 пунктов между отдельными элементами (мы будем называть это методом «мягкая решётка»).

Основным аргументом в пользу метода жесткой решётки является то, что, используя дополнительные прозрачные фоновые элементы и группируя их с небольшими группами элементов переднего плана, вы можете отслеживать отступы и подкладки для каждого элемента и просто прикреплять эти контейнеры к сетке, как кирпичи. Material Design, где все уже спроектировано в соответствии с сеткой 4pt, естественным образом соответствует этому методу.

Аргумент в пользу метода Soft Grid заключается в том, что когда приходит время кодировать интерфейс, использование фактической решётки не имеет значения — она просто будет выброшена. Когда приоритетом является скорость получения управляемого набора макетов, отказ от жесткой решётки в пользу более мягкой решётки может стать преимуществом.

Исходный размер 2304x1556

Не забывайте о необходимости оптической компенсации.

Исходный размер 2304x1556

Проблема. Ограничивающая текст рамка добавляет дополнительное пространство над и под фактическим текстом. Поэтому, когда ограничивающая рамка используется для измерения пространства, оно оказывается больше, чем нужно. Чем больше высота строки, тем больше проблема.

Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Исходный размер 2304x1556
Другие проекты c тегом дизайн цифровых продуктов
Путь волонтёра
Путь волонтёра
Разработка сайта для фонда «Вспомнить Всё»
Разработка сайта для фонда «Вспомнить Всё»
От сердца — сервис для доноров крови
От сердца — сервис для доноров крови
56
Мы используем файлы cookies для улучшения работы сайта и большего удобства его использования. Более подробную информац...
Показать больше