Yesterday

Сетки. Как их использовать и для чего

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

Сетка может применяться как в печати, так и при работе с продуктом (адаптивные сетки для веб, планшетов и мобильных устройств). Сначала рассмотрим общую терминологию, а потом углубимся в детали.

Элементы поля

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

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

Столбцы и отступы

Стандартная сетка со столбцами состоит из 3 элементов - столбцы, отступы, и боковые отступы.

Столбцы

Это широкие блоки, как правило выделенные цветом, которые составляют ширину контента - к примеру, блок с календарем выше имеет ширину в 4 столбца.
Таким образом, элементы поля располагаются на определенном количестве столбцов, ширина которых не меняется, меняется только их количество.
Как правило, в дизайн системе учитывается 3 экрана для сетки - 12 столбцов для веб-версии на ПК, до 6-8 столбцов для планшетов, и до 5 столбцов для мобильных телефонов. Размер может использоваться любой, однако большинство сеток имеют ширину столбца от 60 до 100 пикселей.
Выбор подходящей и одинаковой для всей дизайн-системы сетки, в данном случае - ширины столбца, критически важен, т.к. это является основным фактором, который будет определять ширину контента и ширину отдельных элементов.

Отступы

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

Боковые отступы

Боковые отступы, они же - боковые поля, внешние желоба - это пустое пространство снаружи, за пределами ширины контента. Для адаптивности, боковые поля увеличиваются в случае, если увеличивается ширина устройства. К примеру, страница сайта в разрешении Full HD и в разрешении 4К будет выглядеть по-разному. На мобильных устройствах же боковые поля обычно составляют 20-30 пикселей. Опять же - это не жесткое правило, а скорее всего - основная рекомендация.

Работа с сеткой

Также есть несколько основных правил работы с сеткой, такие как расположение элементов, их размер, отступы, и использование элементов за пределами столбцов:

Элементы поля занимают определенное количество столбцов

Принцип заключается в том, что элементы занимают определенное количество столбцов. Их можно разделить как угодно - например - 2 поля по 6 столбцов, 3 поля по 4 столбца, 4 поля по 3 столбца, и так далее.

К примеру - профиль, модальное окно, элемент дашборда, карточка товара на маркетплейсе, да и вообще все что угодно - первый вариант (самый большой) - используется для веб-версии на сайте, имеет в ширину 6 столбцов, последний элемент - аналогичный по смысловой нагрузке, но может использоваться в мобильной версии (имеет в ширину 3 столбца)

Не оставляй элементы в желобах

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

Внутри поля элементы могут быть не привязаны к сетке

Рассмотрим такой пример - кружок с фотографией имеет размер с 1 столбец, но частично находится в желобе. Или текст, который также располагается со сдвигом в 20 пикселей желоба:

На самом деле, это корректный макет. Сетка применяется к родительскому элементу, а не к тем элементам, которые внутри него

Казалось бы, если учитывать предыдущее правило - выглядит некорректным, ведь нельзя делать так, чтобы часть элемента находилась в желобе. Однако в этом случае не совсем так - правило расположения элементов применимо к самому родительскому элементу (который на данном экране занимает ровно 8 колонок, и не находится в желобах), а к элементам внутри самого родительского контейнера эти правила могут не применяться. Более простой пример - если сделать карточку шириной в 4 столбца и разделить её ровно пополам - например на левой половине будет фото, а на правой описание того, что изображено на картинке - картинка сдвинется на половину желоба, а текст будет располагаться как будто не от начала самого столбца - это нормальная практика. В данном случае, если и используется какая-либо разметка для этих элементов - то в том случае, когда родительский контейнер является фреймом, и сетка находится внутри самого контейнера, а не на экране.

Элементы без полей и графика могут располагаться без сетки

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

Вместо заключения

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

И напоследок - полезные ссылки:

  • Material Design - дизайн система Гугла
  • Carbon - дизайн система IBM
  • Repo - сайт с дизайн-системами различных компаний