Сетки и паутинки on HSE Design
big

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

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

big
Original size 2304x1556
big
Original size 2304x1556

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

big
Original size 2304x1556
Original size 2304x1556

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

Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
Original size 2304x1556

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

Original size 2304x1556
Original size 2304x1556

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

Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
Original size 2304x1556

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

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

Original size 2304x1556

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

Original size 2304x1556

Всем польза.

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

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

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

Original size 2304x1556

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

Original size 2304x1556

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

Original size 2304x1556

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

Original size 2304x1556

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

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

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

Original size 2304x1556

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

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

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

Original size 2304x1556

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

Original size 2304x1556

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

Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
Original size 2304x1556
We use cookies to improve the operation of the HSE website and to enhance its usability. More detailed information on the use of cookies can be fou...
Show more