⠀ Сетка: Виды сеток

Ну, что, ребята, обещала вам рассказать про сетки, чтобы вы перестали их бояться. Давайте разберёмся, что это за хуйня и откуда столько страхов. Поэтому начнём с базы — расскажу про виды сеток и какие из них нам нужны.

Виды, которые обычно не используем в продуктовом дизайне:

Блочная (манускриптная) сетка — древнее чудо-юдо, которое сейчас встретишь не часто. Максимально примитивный вид. Выглядит как один большой блок, отбитый отступами по краям. Вы все видели эту сетку в Word, когда писали очередной документ. Как раз таки используется в книгах и доках.

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

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

Геометрическая сетка (привет, баухауз) — сетка, которая строится на простых геометрических формах: круги, квадраты, треугольники, прямоугольники, диагонали, а иногда и на более сложных — спирали. Если задумаешь нарисовать лого или простенькую иллюстрашку — используй на здоровье.

А теперь то, что в интерфейсах может пригодиться:

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

Гридовая сетка (или же её иногда описывают как тип модульной, но я бы вынесла отдельно) — строится на квадратных модулях любого размера, какой ты решишь накинуть: 4х4, 5х5, 8х8, 10х10, да хоть 2х2, если ты так решил. Когда ты тыкаешь в Layout guide, то как раз по дефолту вылазит гридовая сетка.

Колоночная сетка — наш интерфейсный фаворит. Просто, гибко, но при этом даёт структурность и системность, помогает проработать адаптивность, если нужно, выстроить контент и не упороться с проверкой выключки объектов на макете. Анатомия проста: есть колонки, межколонники и поля по бокам. Можно использовать для работы с микромодулем, а можно накинуть быстро и комфортно лэндос, не используя эти ваши прогрессии отступов.

Самая известная колоночная — это бутстрап-сетка на 12 колонках, которая пришла к нам из одноименного фреймворка и стала популярной, потому что у неё классная вариативность, ведь 12 можно поделить на нужное количество лэйаутов: 12, 6, 4, 3, 2 и даже на 1.

Вроде очень просто и совсем не страшно. Дальше расскажу про микромодуль, типы колоночных сеток и самое главное — как сделать офигенную сетку для любого продукта (без серебряных пуль, регистрации и смс).

Давай, не выгорай 💜 #базаUI ⠀