Сетки в веб-дизайне: полный гайд

Сетка — боль всех начинающих дизайнеров: какие бывают, как правильно и какую выбрать, как построить, а точно ли надо? Может, ну её нафиг =) Давайте разбираться.

Что такое сетка в дизайне сайтов

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

Можно ли сделать сайт без сетки

Да, конечно же, можно. И стену можно покрасить без подготовки и предварительного выравнивания =)) Вопрос в том, насколько аккуратно и качественно у вас получится. Часто именно это отличает новичка от профессионала. В обоих случаях мы получим некий результат: макет сайта или окрашенную стену, но разница будет видна невооруженным глазом. В случае использования сетки — аккуратный и структурированный макет, с которым легко работать, масштабировать и поддерживать. Без сетки будет случайное расположение элементов и хаос.
Если речь идёт об одностраничном сайте или о стилистике, типа брутализма, можно попробовать проигнорировать сетку, но, если мы говорим о сложном проекте — многостраничном, масштабируемом — сетка обязательна!

Получается, что сетка главный элемент макета, и нужно сразу её построить?

Нет, сетка всего лишь инструмент, который помогает упорядочить работу и создать правила, чтобы далее им следовать и не выдумывать каждый раз новые. Но слепо упарываться в сетку не нужно. Особенно, если вы только на старте работ. Если начать сразу создавать сетку, а потом пытаться вписать в неё ваш дизайн, можно сильно застрять в узких рамках и стать её заложником. Сначала необходимо найти идею, композицию, накидать грубый набросок из элементов, подвигать их, ища нужный вам итог. И вот когда картинка начинает приобретать формы, и вы понимаете, что и как хотите сделать — велком, сетка и порядок.

Для чего нужна сетка

С её помощью дизайнер может организовать элементы макета, привести их к единому формату и определённой логике. Такой подход поможет создать более целостный проект, аккуратный и профессиональный. Рассмотрим основные преимущества работы с сеткой:

Единый стандарт расположения элементов

С сеткой ваш сайт будет выглядеть как целостный проект, даже если он будет мега-большой. Вам не нужно будет выдумывать, как расположить тот или иной элемент, как организовать пространство на странице. Все правила уже задаёт ваша сетка и дизайн-система проекта.

Снижение вероятности ошибок при переносе дизайна

Частая проблема разработчиков и дизайнеров в том, что макет у дизайнера выглядит по‑одному, а после вёрстки программистами — по‑другому. Это связано или с неаккуратностью и невнимательностью разработчика или с халатностью дизайнера. Если вы расположили элементы в макете хаотично, не продумали логику и поведение, наплодили кучу различных вариантов или вовсе не указали какие-то важные параметры, то и результат ждите соответствующий. Хорошо, если разработчик к вам придёт с вопросами. Но на практике, он, скорее всего, сверстает как есть, или сам додумает. Если элемент в макете стоит не по сетке, то и в итоговом варианте на сайте он также будет размещён случайным образом.

Аккуратный эстетичный дизайн

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

Коллаборация

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

Простая адаптация

Выполнить адаптивную версию при наличии сетки гораздо проще, чем без неё. Вы сэкономите кучу времени, своего и разработчика.

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

Если у вас есть правила и система компонентов, работа над макетом станет проще и быстрее: достаточно соблюдать логику и применять в работе заранее созданные решения.

Придание целостности дизайну

При работе с сеткой дизайнер в макете использует сразу несколько гештальт‑принципов, создавая единый и гармоничный дизайн: схожесть, близость, замкнутость.

Виды сеток в дизайне

Сеток существует огромное количество, и все они подходят под разные задачи. Рассмотрим четыре основных вида сеток:

Блочная (манускриптная) сетка

Это самая простая сетка, которую, в основном, используют для разметки страницы в типографии. По сути, это просто прямоугольник.

В веб-дизайне такую сетку чаще всего используют при вёрстке простых текстовых страниц, например: Политика конфиденциальности, статьи и подобные блоки.

Коллажная сетка в дизайне

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

Колоночная сетка

Это самая популярная и привычная для дизайнеров сетка. Она состоит из колонок и межколоночных отступов. Её мы детально рассмотрим в следующих разделах статьи.

Модульная сетка в дизайне (швейцарская сетка)

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

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

Из чего состоит сетка

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

Также существует такое понятие, как микромодуль — это самая малая и неделимая часть выстроенной сетки.

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

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

И модуль — это не обязательно квадрат или прямоугольник ;))

Вот это тоже модули:

Более сложные логотипы могут быть построены без использования сетки или с частичным ее применением.

То же самое касается визиток: если она простая, вполне можно обойтись без сетки, просто аккуратно расположив контент.

Вернёмся к веб-дизайну. Здесь чаще используется колоночная сетка. Это связано с тем, что классическую модульную сетку сложно подстроить под динамичную веб‑страницу: при разных разрешениях высота элементов будет меняться, сохранить её в едином формате не получится.

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

Колонки

Их может быть любое количество. Чем больше колонок, тем гибче страница.

Чаще всего дизайнеры используют систему кратную четырем: 12, 8, 4 колонки. И самый распространенный формат: 12 колонок для десктопной версии, 8 — для планшета и 4 — для мобилки.

Почему именно они? Потому что такая система позволяет легко адаптировать макет под различные устройства. Например, карточка в десктопе занимает 4 колонки, значит, при 12 колоночной сетке, получается 3 карточки в ряд.

Теперь нам нужно адаптировать всё это под планшет: так как мы задали параметр ширины карточки — 4 столбца, то — магия =))) Не нужно задавать ей новые размеры, нужно всего лишь перенести третью карточку в планшете во 2й ряд. Карточки по-прежнему занимают 4 колонки. Аналогично с мобилкой: там 4 колонки, а значит, в ряду останется 1 карточка, остальные последовательно уйдут во второй и третий ряд.

Ширина колонки может быть любая, но, если мы говорим о 12-колоночной сетке в десктопе, то обычно она составляет от 60 до 80 рх.

Межколоночный пробел (Gutter)

Это то расстояние, которое образуется между колонками. В среднем оно составляет 20−32 рх, при тех же исходных данных.

Это очень важная величина, так как её размер диктует параметры целостности дизайна. Если сделать слишком маленький Gutter, то контент на сайте может выглядеть кучно, прижато. Если наоборот — слишком большой, то композиция развалится.

Плохие варианты:

Хороший вариант:

Оптимальное межколоночное расстояние. Композиция выглядит целостно и гармонично. Дизайн сайта компании, предоставляющей услуги стоимостного инжиниринга и нормирования в строительстве «Ценовые Системы». Проект WebValley Studio.

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

Пример расположения контента на сайте при отсутствии Gutters в сетке: за отступ взята целая колонка. Дизайн сайта компании «ФинЭксперт». Проект WebValley Studio.

В примере выше — сам блок из 3х карточек размещается по ширине 12 колонок. Между карточками задаётся отступ, в нашем случае — 120 рх. Получается довольно интересный эффект. Но тут нужно быть осторожным, так как на больших размерах экрана макет уже может выглядеть не столь эстетично, поплывет строка. Также данное решение не стоит использовать, если у вас большой масштабируемый проект.

Поля Offset или смещение

Это важный параметр, про который нельзя забыть при проектировании сетки.

Смещение — это отступ от края контейнера, который не даёт выпасть вашему контенту при небольших разрешениях. То есть это минимальная фиксированная ширина от края экрана.

Без учета этого параметра может получиться вот так:

С учетом полей дизайн будет выглядеть так:

Хороший пример макета с полями Offset — контент не выпадает за края экрана. Дизайн сайта производителя мебели «Ленинградский Мебельный Завод». Проект WebValley Studio.

Offset должен быть равен или больше межколонного отступа, согласно правилам внешнего и внутреннего.

Чем больше размер экрана, тем больше пустое пространство (поля) по краям от контента (если речь идёт не о резиновой вёрстке).

Столбцы

Столбцы задают границы расположения контента в макете. То есть, это блоки, которые образуются из группы колонок.

Столбцов может быть 2, 3, 4, 6 и так далее: дизайнер сам решает, какой вариант ему подойдет в том или ином случае. Также можно миксовать в своём макете разное количество столбцов, но лучше выбрать единую кратную величину: например, 4 столбца хорошо миксуются с 2.

А вот миксовать 2 столбца и 3 — ну, так себе =))

Согласитесь, получилось не очень =))

Давайте ещё раз посмотрим на итог без лишнего шума:

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

✓

Определенных правил использования тех или иных решений нет, тем не менее, подходите к выбору осознанно.

Элементы поля: правила вёрстки

Элементы поля — это содержимое вашего макета: текст, изображения, графика. Есть несколько важных правил, которые необходимо соблюдать при вёрстке макета:

1. Все элементы в макете должны занимать определённое количество колонок. Ровное количество: не 4,5 столбца, не 3,75. Это должно быть целое число, например, 4 колонки. Не оставляйте контент в межколонных желобах.

2. Начало контента и начало колонки должны совпадать. Не размещайте контент не от начала колонки.

3. Не используйте столбец как внешний отступ между элементами.

Пример правильного и неправильного использования внешнего отступа

✓

По сути, все три пункта говорят об одном и том же: контент должен занимать чётко N количество колонок!

А как же быть со сложными компонентами?
Тут все просто:

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

На примере выше, сама карточка расположена в столбце из 4 колонок, а вот элементы внутри неё уже не попадают в сетку, а имеют свои собственные отступы. Например, отступ текста от аватарки задан фиксировано, и меньше межколонного отступа. Почему так? Если бы мы задали отступ тексту до аватарки равный gutters, то карточка просто развалилась бы, так как межколонный отступ слишком большой для её размеров:

Но вот другой пример, в котором всё не так однозначно: карточка слева расположена в 6 колонках с фиксированным отступом, который меньше межколонного отступа. Справа — та же карточка, но уже с отступом равным gutters.

И тот и тот вариант имеет место быть. Но если есть возможность причесать карточку и задать отступ, равный gutter, чтобы картинка и текстовая группа заняли ровно по 3 колонки, то это будет лучшим решением.

Делать первый или второй вариант — решать дизайнеру, исходя из задач и стилистики проекта.

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

Хотя, на самом деле, в примере текст, который выпал, не столь важный. То есть, теоретически, можно допустить, что он выпал — ну и фиг с ним, он нам не несёт какой-то смысловой нагрузки.

А что если так:

Упс. Тут уже критично, согласны?

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

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

Принципы модульности

1. Нечётный пиксель;
2. Чётный пиксель.

Нечётный пиксель

В основе данной системы лежит микромодуль, размером 5 рх. То есть вся система построения сетки, выравнивания элементов, отступы между ними — подчинены размерам, кратным 5.

Здесь обычно идут двумя путями:

1. Расчерчивают рабочее поле как сетку, которая образует модули 5х5 рх, и располагают все элементы согласно данной сетке.

2. Более распространенный в веб-дизайне и чаще используемый приём: сетка подчиняется базовой линии, кратной 5. В основе — тот же модуль в 5 рх, но макет делится уже не на «миллиметровку», а на горизонтальные строки, на которых размещается контент.

Есть даже целые студии, которые строят свои проекты, используя нечетный модуль, например, студия Charmer.

На Behance можно посмотреть пример использования данного принципа в проекте по редизайну айдентики Rambler, в котором используют данную систему отступов.

Чётный пиксель

В основе этой системы лежит микромодуль, размером 4 рх. То есть, вся разница с предыдущей системой в том, что здесь микромодуль — чётный.

Самым ярким примером данной системы является дизайн-система Google — Material Design.

На самом деле, более распространенный и привычный формат такой сетки — 8 рх модуль. То есть, это тот же самый чётный модуль, кратный 4, но более привычный для разработчиков и дизайнеров. Это значит, что в основе чётной модульной сетки лежит модуль 8х8рх. Все размеры элементов и отступы между ними подчиняются шагу в 8рх, то есть 8, 16, 24, 32, 40 и так далее.
Значения с шагом в 4рх в системе отступов используются реже, при необходимости. Обычно, это какие-то маленькие элементы компонентов, где, например, отступ в 8рх — мало, а в 16рх — уже много. В таком случае используется размер 12рх.
А вот система размеров иконок, наоборот, привычней строится на 4рх системе: 16х16, 20х20, 24х24, 40х40, 60х60 и так далее.
Почему чётная система используется чаще? Потому что масштабировать чётные значения проще. Если вы будете выгружать элемент в 1,5х, то нечётный подход даст вам дробные значения пикселя, которых не должно быть в макете.

Распространенные варианты колоночных сеток

Так как в веб дизайне преимущественно используются колоночные сетки, рассмотрим их виды и особенности.

12 колоночная сетка

Самая удобная, гибкая и распространенная среди дизайнеров. Почему именно её чаще всего используют? Потому что её легко поделить на чётное и нечётное количество столбцов (3, 4, 6). Это позволяет делать как удобные и безопасные симметричные интерфейсы, так и более сложные по структуре макеты, делая акцент на одних элементах, и убирая на второй план другие.

4 колоночная сетка

Также достаточно удобная и распространённая сетка. Не такая гибкая, как 12-колоночная, более симметричная и простая. Но и более надёжная.

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

3 колоночная сетка

Этот вариант сетки считается сложным и требующим особого внимания к оформлению, так как является асимметричным. В каждой колонке помещается по 3 столбца, а в ряду — по 3 карточки. Требуется практика и навыки при работе с такой сеткой. Качественные макеты на основе трёх столбцов показывают мастерство дизайнера.

6 колоночная сетка

Сетка в 6 столбцов ещё более сложная, чем 3 столбца, так как она ещё менее гибкая. С такой сеткой нужно уметь работать. Но для сложных интерфейсов с большим количеством мелких элементов, она может быть удачным вариантом.

Комбинации разных видов сеток

Выбранную сетку не обязательно брать за истину и строго придерживаться её рамок. Можно комбинировать разные виды: 3, 4, 6 и 12 колоночные, создавая более интересные и смелые решения в вашем интерфейсе.

Вложенные сетки

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

Ещё вложенные сетки могут образовываться при интеграции сторонних сервисов, у которых также существует своя собственная система выравнивания.

Принципы построения модульной сетки

При выборе сетки для проекта нужно отталкиваться от двух важных параметров:

1. Содержание — тексты, изображения, графика, медиафайлы, таблицы, списки и прочее;
2. Носитель — полиграфия (документы, визитки, брошюры, буклеты, журналы) или веб‑страница, а может что-то ещё.

С чего начать

Начните с простого!
Постройте обычную, например, 12-ти колоночную сетку (если мы говорим о десктопной версии сайта). Она поможет обозначить границы артборда и задать некую отправную точку. Дальше — не торопитесь. Подумайте о композиции в целом. Попробуйте поэкспериментировать с контентом, который необходимо расположить на экране, не обращая внимания на сетку. Задайте основное направление стилистике проекта. После того, как примерно определитесь с композицией, можно вернуться к сетке, и теперь скорректировать всё, с учётом её параметров.

Здесь важно соблюсти некоторые правила.

Построение базовой сетки

Базовая сетка — это разлинованный в клеточку холст (фрейм), в основе которого лежит модуль (чётный или нечётный).

Вертикальный ритм

Вертикальный ритм — это система равных отступов, задающих определенную логику и иерархию между элементами макета по вертикали — между заголовками и текстом, картинками, кнопками, карточками, полями формы и их метками. При этом шаг сетки строится 2 способами: на основе высоты строки или на основе базовой линии.

Такой подход к работе с ритмом удобен, так как не нужно измерять расстояние между элементами. Всё укладывается в строки. Например, в примере выше — заголовок занимает 3 строки, текст — 6 строк, картинка — 7 строк и так далее.

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

Горизонтальный ритм

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

Пространственная система

Отлично, с отступами решили: до заголовка будет поменьше, до кнопки — побольше. До карточки тоже сделаем большой, а вот саму карточку организуем, как более вложенный компонент ;))
А вот какие эти размеры — «побольше-поменьше», поможет определить пространственная система. Тут нужно исходить из задачи, имеющегося контента и итоговой цели.
Нужен минималистичный интерфейс с лаконичным расположением элементов или нужна страница со сложным пользовательским интерфейсом с кучей элементов?

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

Построение дизайнерской модульной сетки

Дизайнерская модульная сетка — это сетка, которую создал дизайнер для своего проекта. Строится модульная сетка на основе базовой и колоночной — сначала создаем первую, потом, на неё сверху, накладываем вторую. Определяем размер основного модуля — дизайнерская сетка для проекта готова =))

Сетка адаптивного дизайна

При построении сетки в проекте важно также не забыть о том, что в современном мире большое количество всевозможных гаджетов: от смартфонов до 4K-мониторов. Поэтому необходимо продумать адаптивные версии и точки перехода — breakpoints.

Расчет точки перехода — breakpoints

При создании адаптивных версий число колонок может увеличиваться или уменьшаться в определенных точках перехода. Как их рассчитать? На самом деле, нет каких-то единых значений диапазона, в которых должен происходить переход от одной версии сайта к другой. Можно в разных источниках встретить разные цифры.

Пожалуй, самыми популярными и адекватными на сегодня можно считать данные системы Bootstrap Grid 5.

WebValley Studio пользуется именно этими параметрами. Наши дизайнеры верстают макеты в таких разрешениях:

1. 1400px >= Desktop (для больших разрешений)
2. 1200px ≤ Desktop < 1400px
3. 992px ≤ Tablet < 1200px
4. 768px ≤ Tablet < 992px
5. 576px ≤ Mobile < 768px
6. Mobile < 576px

На заметку дизайнерам:

Размеры фреймов для макетов, которые всегда прорабатываются в любом проекте:

1600рх (grid ≈ 1140 − 1280)

1024рх (grid ≈ 960)

768рх (grid ≈ 736)

320рх (grid ≈ 296)

Остальные версии по желанию или необходимости

Но, например, кто знаком с популярным конструктором Tilda Publishing, тот видел, что точки перехода для адаптивных версий у них немного отличаются. Если вы создаете макеты для дальнейшей вёрстки на этой платформе, то целесообразно придерживаться их версии breakpoints:

1200рх (grid = 1160)

960рх (grid = 920)

640рх (grid = 620)

480рх (grid = 460)

320рх (grid = 300)

Правила расположения контента в адаптивном дизайне

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

Карточки последовательно переезжают в нижнюю строку согласно заданной нумерации. Нельзя просто взять и перетащить вниз то, что не поместилось сбоку, если мы говорим о разработке. А вот в Tilda, кстати, так можно. Но всё же не нужно. Приучайте себя делать сразу правильно!

Оптическая компенсация

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

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

Ещё больше этот эффект усиливается при разном размере элементов:

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

Особенно часто этот эффект можно наблюдать с такими буквами, у которых минимальное прилегание к левому краю (при выравнивании по левому краю), например «O» и «C» на примере. За счёт большого скругления букв, кажется, что буква сместилась вправо. При большем размере этот эффект увеличивается. А вот те буквы, что имеют максимальное прилегание по линии выравнивания, как «R», а также те буквы, у которых прилегание по углам, как у «X» — уже не дают такого эффекта.

Но если увеличить размер шрифта ещё, то эффект будет даже у таких букв:

Происходит это потому, что текст помещён в контейнер, и чем больше размер текста, тем, соответственно, больше отступ внутри контейнера.

То есть, с точки зрения кода элементы выровнены по одной оси X, но визуально так не кажется.

Что делать дизайнеру в таком случае? Вспомнить, что сетка не непреложная истина, а лишь инструмент, помогающий в работе. Не нужно слепо придерживаться заданных рамок. Пользователь на сайте сетку всё равно видеть не будет, а вот кривое выравнивание заметит. Можно смело сместить нужный элемент вне сетки и надеяться, что разработчик сверстает этот фрагмент так, как вы ему показали ;))

Параметры сетки в макетах

Сетка в макете может быть фиксированной или резиновой. Чем они отличаются и какие есть нюансы — частый вопрос студентов нашей академии.

Фиксированная сетка — Fixed Grid

Эту сетку можно встретить как в современных сайтах, так и в старых — раньше в основном все сайты помещали в грид-контейнер, и их можно легко отличить по внешнему виду:

Fixed Grid — это некий контейнер, внутри которого размещается контент на экране. При этом существуют контрольные точки, при переходе которых пользователю показывается следующая версия, например, планшетная. Контент внутри грид-контейнера не меняется в пределах диапазона контрольных точек, то есть изображения остаются прежнего размера, текст не растягивается и не перемещается на следующую строку. Увеличивается или уменьшается лишь пустое пространство по бокам от грид-контейнера — «ушки».

Размещение контента при Fixed Grid на разных разрешениях экрана. Меняется только ширина пустого пространства по бокам от контейнера, текст и карточки остаются на месте. Дизайн сайта строительной компании Генезис. Проект WebValley Studio.

Размещение контента при Fixed Grid на разных разрешениях экрана при перестроении в планшетную версию. Дизайн сайта строительной компании Генезис. Проект WebValley Studio.

Гибкая сетка — Fluid Grid

При резиновой вёрстке напротив: весь контент динамичный и задаётся в процентах. Тут уже нет определенного контейнера, и контент равномерно распределяется при масштабировании: изображения — растягиваются, текст — переезжает на другую строку в рамках заданного диапазона. Здесь также есть контрольные точки, при которых контент будет перестраиваться в адаптивную версию, однако они носят ориентировочный характер. Поэтому при резиновой вёрстке важно сохранить размеры межколоночного расстояния и количество колонок.

Гибридная сетка — Hybrid Grid

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

Слева на примере показан пример комбинированной сетки, справа — Fixed Grid.

Нарушение сетки

Нарушение сетки может быть хорошим решением, если ваш макет выглядит слишком простым и скучным.

Акценты

Чтобы избежать простоты и шаблонности в макете, дизайнеры часто прибегают к такому приёму, как добавление акцентов. Их присутствие может освежить дизайн и придать ему интересный нестандартный вид.
Например, рассмотрим дизайн страницы сайта IT-компании GartLight Solutions от WebValley Studio. Сложность работы здесь заключалась в том, что на странице большое количество контентных блоков, с таким же большим объёмом текста в каждом из них, скромная палитра цветов в сине-белой гамме, полное отсутствие изображений у компании. Чтобы не скатиться в скучный шаблонный макет, дизайнеры выбрали интересную сетку со смещением контента, а в качестве акцентов добавили тонкие вертикальные линии сквозь весь сайт, аккуратную анимированную графику и крупные стрелки. В типографику решили также добавить акцент в виде подсвеченных градиентом слов. В итоге получился интересный, по-прежнему строгий и премиальный дизайн, совершенно не скучный и не шаблонный.

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

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

А вот удачный пример добавления акцентов на фон в макет:

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

Ассиметричные сетки

Ещё один достаточно распространенный вариант придать простому макету интересный вид и уйти от шаблонности в работе. При помощи асимметрии можно грамотно управлять вниманием пользователя на сайте и вести его по странице так, как вам необходимо. Здесь также важен баланс и умеренность. Если просто сместить весь контент в одну часть сайта и оставить пустой другую, можно добиться странного эффекта, что всё поехало. Согласитесь, так себе результат получится =))

В данном случае, симметричный вариант выглядит намного выигрышней:

А вот следующий пример асимметрии более удачный — основной контент расположен в правой части страницы, а второстепенный контент и список — в левой.

Способы создания сетки

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

Создание собственной сетки

Как создать собственную сетку? Можно просто поделить макет на необходимое количество столбцов и работать с ними. Такой подход может подойти для небольшого проекта с простым дизайном или, наоборот, со слишком нестандартным, а также для работы с готовыми конструкторами, такими как Tilda. Главное не забыть про адаптивность вашего макета, а также продумать всё так, чтобы разработчику не пришлось танцевать с бубном, пытаясь сверстать ваш макет.
Но что если всё серьёзней, и требуется построить сетку для крупного проекта или для проекта в долгосрочной разработке, или нужна сетка для сложного проекта с большой детализацией? Можно, конечно, попытаться высчитать сетку самостоятельно, но есть большой риск ошибиться, особенно если вы не знакомы с разработкой. Целесообразнее взять уже готовую сетку или воспользоваться конструктором, чтобы скорректировать параметры сетки под себя.

Установка сетки при помощи плагина, калькуляторы сеток

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

• Gridcalculator.dkПростое приложение. Помогает быстро делать расчет сеток для веб-сайтов и приложений под разные разрешения экранов.

Gridinator.com

Удобный инструмент, позволяет генерировать сетку с параметрами pixel widths, em widths, percentage widths. Есть экспорт сетки в CSS, html, image.

Grid.mindplay.dk

Инструмент для продвинутых дизайнеров. Больше подойдет разработчикам, так как приложение делает экспорт в CSS. Есть еще возможность задать набор параметров для типографики.

Guideguide.me

Плагин позволяет настраивать большое количество сеток, базовых линий, направляющих. Есть версии для Photoshop CS4 и CS5+. Есть пробная бесплатная версия на 14 дней.

Gridlover.net

Приложение позволяет создавать типографскую сетку на основе модульной системы, вертикального ритма.

Archetypeapp.com

Сервис позволяет быстро и легко создавать стили типографики и горизонтальный ритм в режиме онлайн.

Скачивание готовых шаблонов сеток в интернете

Можно скачать уже готовые шаблоны сеток, так вы сэкономите кучу времени. Огромное количество сеток можно найти в комьюнити Figma.

Например, найти большую библиотеку сеток для iOS, Android и Bootstrap можно в Grid System Library от pixsellz.io. Здесь есть сетки с 6 и 12 колонками для 15 различных устройств, в файлах, совместимых с популярными графическими инструментами: Adobe XD, Photoshop, Illustrator, Sketch и Figma:

Современные тренды использования сеток в веб дизайне

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

Ломаные сетки

Популярный тренд — ломаная сетка. Можно встретить как на сайтах, так и в полиграфии.

Пример ломаной сетки можно посмотреть на сайте проекта WebValley Studio для питомника растений «Калужский Тракт».

Диагональные сетки

Приём с размещением границ блоков по диагонали стал популярен 3−4 года назад и остается востребованным на сегодняшний день.

Сплит-экраны

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

На самом деле тренд популярен уже долгое время, и его рамки намного шире. Классным решением в современном дизайне макета может стать, например, галерея фото или блок с услугами или товарами, оформленный в виде плиток, и раскрывающийся при наведении.

Иерархическая сетка

Старая добрая иерархическая сетка была и будет в тренде ещё долгое время. Это асимметричная сетка, в которой объекты расположены в порядке значимости. Она позволяет создавать интересные, не похожие друг на друга решения в дизайне.

Главное правило — не упарывайтесь. Во всем нужна логика и мера. Есть тонкая грань между «так надо» и «я так хочу» и есть ситуации, когда стоит поступить как «я хочу». Важно ответить на вопрос: почему я сделал именно так, есть ли логика в моих действиях, могу ли я привести аргументы в защиту своему решению? Если на все вопросы ответ положительный, то вы смело можете рушить систему. В противном случае — будьте проще!

Источник