Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Сетки в веб-дизайне: полный гайд
Сетка — боль всех начинающих дизайнеров: какие бывают, как правильно и какую выбрать, как построить, а точно ли надо? Может, ну её нафиг =) Давайте разбираться.
Что такое сетка в дизайне сайтов
Сетка — это инструмент, который позволяет дизайнеру упорядочить элементы макета и создать правила, помогающие соблюдать единую систему организации во всем проекте.
Можно ли сделать сайт без сетки
Да, конечно же, можно. И стену можно покрасить без подготовки и предварительного выравнивания =)) Вопрос в том, насколько аккуратно и качественно у вас получится. Часто именно это отличает новичка от профессионала. В обоих случаях мы получим некий результат: макет сайта или окрашенную стену, но разница будет видна невооруженным глазом. В случае использования сетки — аккуратный и структурированный макет, с которым легко работать, масштабировать и поддерживать. Без сетки будет случайное расположение элементов и хаос.
Если речь идёт об одностраничном сайте или о стилистике, типа брутализма, можно попробовать проигнорировать сетку, но, если мы говорим о сложном проекте — многостраничном, масштабируемом — сетка обязательна!
Если речь идёт об одностраничном сайте или о стилистике, типа брутализма, можно попробовать проигнорировать сетку, но, если мы говорим о сложном проекте — многостраничном, масштабируемом — сетка обязательна!
Получается, что сетка главный элемент макета, и нужно сразу её построить?
Нет, сетка всего лишь инструмент, который помогает упорядочить работу и создать правила, чтобы далее им следовать и не выдумывать каждый раз новые. Но слепо упарываться в сетку не нужно. Особенно, если вы только на старте работ. Если начать сразу создавать сетку, а потом пытаться вписать в неё ваш дизайн, можно сильно застрять в узких рамках и стать её заложником. Сначала необходимо найти идею, композицию, накидать грубый набросок из элементов, подвигать их, ища нужный вам итог. И вот когда картинка начинает приобретать формы, и вы понимаете, что и как хотите сделать — велком, сетка и порядок.
Для чего нужна сетка
С её помощью дизайнер может организовать элементы макета, привести их к единому формату и определённой логике. Такой подход поможет создать более целостный проект, аккуратный и профессиональный. Рассмотрим основные преимущества работы с сеткой:
Единый стандарт расположения элементов
С сеткой ваш сайт будет выглядеть как целостный проект, даже если он будет мега-большой. Вам не нужно будет выдумывать, как расположить тот или иной элемент, как организовать пространство на странице. Все правила уже задаёт ваша сетка и дизайн-система проекта.
Снижение вероятности ошибок при переносе дизайна
Частая проблема разработчиков и дизайнеров в том, что макет у дизайнера выглядит по‑одному, а после вёрстки программистами — по‑другому. Это связано или с неаккуратностью и невнимательностью разработчика или с халатностью дизайнера. Если вы расположили элементы в макете хаотично, не продумали логику и поведение, наплодили кучу различных вариантов или вовсе не указали какие-то важные параметры, то и результат ждите соответствующий. Хорошо, если разработчик к вам придёт с вопросами. Но на практике, он, скорее всего, сверстает как есть, или сам додумает. Если элемент в макете стоит не по сетке, то и в итоговом варианте на сайте он также будет размещён случайным образом.
Аккуратный эстетичный дизайн
Сетка задает некие правила, с её помощью можно выровнять и упорядочить элементы в макете, создать им определённую логику, расположить так, чтобы пользователю было удобно считывать информацию.
Коллаборация
Так как сетка и дизайн-система диктуют определённые правила в проекте, над макетом смогут работать сразу несколько человек, или можно будет легко передать работу другому специалисту без потери времени и качества.
Простая адаптация
Выполнить адаптивную версию при наличии сетки гораздо проще, чем без неё. Вы сэкономите кучу времени, своего и разработчика.
Ускорение работы с макетом
Если у вас есть правила и система компонентов, работа над макетом станет проще и быстрее: достаточно соблюдать логику и применять в работе заранее созданные решения.
Придание целостности дизайну
При работе с сеткой дизайнер в макете использует сразу несколько гештальт‑принципов, создавая единый и гармоничный дизайн: схожесть, близость, замкнутость.
Пример модульной сетки в дизайне
Виды сеток в дизайне
Сеток существует огромное количество, и все они подходят под разные задачи. Рассмотрим четыре основных вида сеток:
Блочная (манускриптная) сетка
Это самая простая сетка, которую, в основном, используют для разметки страницы в типографии. По сути, это просто прямоугольник.
Пример блочной сетки в дизайне
В веб-дизайне такую сетку чаще всего используют при вёрстке простых текстовых страниц, например: Политика конфиденциальности, статьи и подобные блоки.
Пример использования блочной сетки в дизайне статьи на сайте
Коллажная сетка в дизайне
Эта сетка состоит из блоков, образованных путём пересечения вертикальных и горизонтальных линий, при этом, у сетки отсутствует межколоночный отступ.
Пример коллажной сетки в дизайне
Пример использования коллажной сетки в дизайне. Дизайн-концепт WebValley Studio, UI-дизайнер Мария Дрокина.
Колоночная сетка
Это самая популярная и привычная для дизайнеров сетка. Она состоит из колонок и межколоночных отступов. Её мы детально рассмотрим в следующих разделах статьи.
Пример колоночной сетки
Пример расположения контента в колоночной сетке, дизайн сайта IT-компании GartLight Solutions. Проект WebValley Studio.
Модульная сетка в дизайне (швейцарская сетка)
Классическая модульная сетка — это сетка, которая состоит из модулей, образованных на пересечении горизонтальных и вертикальных строк, с отступами между ними. Модуль здесь берется за основу системы дизайна.
Пример модульной сетки
Модульную сетку также называют швейцарской, поскольку, благодаря этой школе, она получила широкое распространение в графическом дизайне. Чаще всего она используется в полиграфии. В веб-дизайне её также можно встретить, но чаще в сочетании с колоночной, так как в чистом виде в модульной сетке сложно контролировать высоту элементов дизайна на динамичных экранах.
Пример использования модульной сетки в дизайне сайта. Дизайн-концепт WebValley Studio, UI-дизайнер Мария Дрокина.
Из чего состоит сетка
В основу всех модульных сеток заложена некая единица — модуль. Он образуется на пересечении горизонтальных и вертикальных колонок, образуя отправную точку, на базе которой будет выстроена вся система выравнивания в макете. Все элементы необходимо выравнивать так, чтобы они были кратны модулю.
Пример модуля в модульной сетке
Также существует такое понятие, как микромодуль — это самая малая и неделимая часть выстроенной сетки.
Пример микромодуля в модульной сетке
Модульные сетки чаще всего используются в графическом дизайне и работе с полиграфией: вёрстка журналов, буклетов, плакатов, брошюр, логотипов, визиток и прочего.
Модульная сетка в дизайне полиграфии. Проект WebValley Studio.
В дизайне логотипов не всегда нужна и важна сетка. Модульная сетка используется в основном для создания простых эмблем или симметричных композиций.
Принцип сетки в логотипе Apple
И модуль — это не обязательно квадрат или прямоугольник ;))
Вот это тоже модули:
Вот это тоже модули:
Пример «неквадратной» модульности, сетка Золотое сечение (Golden Grid).
Более сложные логотипы могут быть построены без использования сетки или с частичным ее применением.
Логотип WWF — Всемирного Фонда Дикой Природы
Логотип Lacoste — бренд мужской и женской одежды, обуви, аксессуаров
Логотип-концепт, построенный с частичным применением сетки. Концепт WebValley Studio, граф дизайнер Анастасия Лян.
То же самое касается визиток: если она простая, вполне можно обойтись без сетки, просто аккуратно расположив контент.
Визитка директора компании по проектированию медицинских клиник. Дизайн WebValley Studio.
Вернёмся к веб-дизайну. Здесь чаще используется колоночная сетка. Это связано с тем, что классическую модульную сетку сложно подстроить под динамичную веб‑страницу: при разных разрешениях высота элементов будет меняться, сохранить её в едином формате не получится.
Модульная и колоночная сетки
По сути, колоночная сетка — это тоже модульная сетка, только у неё нет ограничений по высоте. Давайте посмотрим, из чего состоит колоночная сетка.
Колонки
Их может быть любое количество. Чем больше колонок, тем гибче страница.
Пример 12-колоночной сетки
Чаще всего дизайнеры используют систему кратную четырем: 12, 8, 4 колонки. И самый распространенный формат: 12 колонок для десктопной версии, 8 — для планшета и 4 — для мобилки.
Почему именно они? Потому что такая система позволяет легко адаптировать макет под различные устройства. Например, карточка в десктопе занимает 4 колонки, значит, при 12 колоночной сетке, получается 3 карточки в ряд.
Теперь нам нужно адаптировать всё это под планшет: так как мы задали параметр ширины карточки — 4 столбца, то — магия =))) Не нужно задавать ей новые размеры, нужно всего лишь перенести третью карточку в планшете во 2й ряд. Карточки по-прежнему занимают 4 колонки. Аналогично с мобилкой: там 4 колонки, а значит, в ряду останется 1 карточка, остальные последовательно уйдут во второй и третий ряд.
Почему именно они? Потому что такая система позволяет легко адаптировать макет под различные устройства. Например, карточка в десктопе занимает 4 колонки, значит, при 12 колоночной сетке, получается 3 карточки в ряд.
Теперь нам нужно адаптировать всё это под планшет: так как мы задали параметр ширины карточки — 4 столбца, то — магия =))) Не нужно задавать ей новые размеры, нужно всего лишь перенести третью карточку в планшете во 2й ряд. Карточки по-прежнему занимают 4 колонки. Аналогично с мобилкой: там 4 колонки, а значит, в ряду останется 1 карточка, остальные последовательно уйдут во второй и третий ряд.
Пример адаптации карточки шириной в 4 колонки в 12, 8, 4-колоночной сетке. Дизайн сайта строительной компании Генезис. Проект WebValley Studio.
Ширина колонки может быть любая, но, если мы говорим о 12-колоночной сетке в десктопе, то обычно она составляет от 60 до 80 рх.
Межколоночный пробел (Gutter)
Это то расстояние, которое образуется между колонками. В среднем оно составляет 20−32 рх, при тех же исходных данных.
Межколоночный пробел в сетке (Gutter)
Это очень важная величина, так как её размер диктует параметры целостности дизайна. Если сделать слишком маленький Gutter, то контент на сайте может выглядеть кучно, прижато. Если наоборот — слишком большой, то композиция развалится.
Плохие варианты:
Плохие варианты:
Слишком большое межколоночное расстояние, потеряна целостность дизайна
Слишком маленькое межколоночное расстояние, дизайн слипся
Хороший вариант:
Оптимальное межколоночное расстояние. Композиция выглядит целостно и гармонично. Дизайн сайта компании, предоставляющей услуги стоимостного инжиниринга и нормирования в строительстве «Ценовые Системы». Проект WebValley Studio.
Также бывают случаи, когда дизайнер вовсе может отказаться от межколоночного отступа. Тогда за отступы между контентом принимается сама колонка или какой-то фиксированный размер.
Пример расположения контента на сайте при отсутствии Gutters в сетке: за отступ взята целая колонка. Дизайн сайта компании «ФинЭксперт». Проект WebValley Studio.
Пример расположения контента на сайте при отсутствии Gutters в сетке, где за основу взят фиксированный размер блока.
В примере выше — сам блок из 3х карточек размещается по ширине 12 колонок. Между карточками задаётся отступ, в нашем случае — 120 рх. Получается довольно интересный эффект. Но тут нужно быть осторожным, так как на больших размерах экрана макет уже может выглядеть не столь эстетично, поплывет строка. Также данное решение не стоит использовать, если у вас большой масштабируемый проект.
Поля Offset или смещение
Это важный параметр, про который нельзя забыть при проектировании сетки.
Поля Offset в колоночной сетке
Смещение — это отступ от края контейнера, который не даёт выпасть вашему контенту при небольших разрешениях. То есть это минимальная фиксированная ширина от края экрана.
Без учета этого параметра может получиться вот так:
Без учета этого параметра может получиться вот так:
Плохой пример с отсутствующим полем Offset — контент выпал за края экрана
С учетом полей дизайн будет выглядеть так:
Хороший пример макета с полями Offset — контент не выпадает за края экрана. Дизайн сайта производителя мебели «Ленинградский Мебельный Завод». Проект WebValley Studio.
Offset должен быть равен или больше межколонного отступа, согласно правилам внешнего и внутреннего.
Чем больше размер экрана, тем больше пустое пространство (поля) по краям от контента (если речь идёт не о резиновой вёрстке).
Чем больше размер экрана, тем больше пустое пространство (поля) по краям от контента (если речь идёт не о резиновой вёрстке).
Столбцы
Столбцы задают границы расположения контента в макете. То есть, это блоки, которые образуются из группы колонок.
Пример асимметричных столбцов в макете, дизайн шаблона статьи для компании «Тёплая вода». Проект WebValley Studio.
Столбцов может быть 2, 3, 4, 6 и так далее: дизайнер сам решает, какой вариант ему подойдет в том или ином случае. Также можно миксовать в своём макете разное количество столбцов, но лучше выбрать единую кратную величину: например, 4 столбца хорошо миксуются с 2.
Гармоничное сочетание вёрстки макета в 2 и 4 столбца. Дизайн сайта IT-компании GartLight Solutions. Проект WebValley Studio.
А вот миксовать 2 столбца и 3 — ну, так себе =))
Плохой пример комбинации 2 и 3 столбцов в макете. Создаётся эффект съехавшего контента.
Согласитесь, получилось не очень =))
Давайте ещё раз посмотрим на итог без лишнего шума:
Давайте ещё раз посмотрим на итог без лишнего шума:
Сравнение хорошего и плохого примера выравнивания контента по столбцам. Даже если вы не дизайнер, ничего не понимаете в сетках и композиции, на интуитивном уровне считывается, что в первом случае — аккуратность, гармония, уравновешенность, порядок. Во втором — не хаос, конечно, но явно закрадывается ощущение, что что-то пошло не так.
✓
Определенных правил использования тех или иных решений нет, тем не менее, подходите к выбору осознанно.
Элементы поля: правила вёрстки
Элементы поля — это содержимое вашего макета: текст, изображения, графика. Есть несколько важных правил, которые необходимо соблюдать при вёрстке макета:
1. Все элементы в макете должны занимать определённое количество колонок. Ровное количество: не 4,5 столбца, не 3,75. Это должно быть целое число, например, 4 колонки. Не оставляйте контент в межколонных желобах.
1. Все элементы в макете должны занимать определённое количество колонок. Ровное количество: не 4,5 столбца, не 3,75. Это должно быть целое число, например, 4 колонки. Не оставляйте контент в межколонных желобах.
Пример плохого и хорошего выравнивания элементов дизайна по ширине колонок
2. Начало контента и начало колонки должны совпадать. Не размещайте контент не от начала колонки.
Пример правильного и неправильного выравнивания контента
3. Не используйте столбец как внешний отступ между элементами.
Пример правильного и неправильного использования внешнего отступа
✓
По сути, все три пункта говорят об одном и том же: контент должен занимать чётко N количество колонок!
А как же быть со сложными компонентами?
Тут все просто:
4. Сам родительский компонент необходимо разместить в сетке, а уже внутри сложного компонента можно размещать элементы не по общей сетке, а создать свои собственные правила выравнивания.
Тут все просто:
4. Сам родительский компонент необходимо разместить в сетке, а уже внутри сложного компонента можно размещать элементы не по общей сетке, а создать свои собственные правила выравнивания.
Пример сложного компонента. Родительский компонент сидит строго по сетке, а у внутренних элементов — своя сетка, собственные правила выравнивания.
На примере выше, сама карточка расположена в столбце из 4 колонок, а вот элементы внутри неё уже не попадают в сетку, а имеют свои собственные отступы. Например, отступ текста от аватарки задан фиксировано, и меньше межколонного отступа. Почему так? Если бы мы задали отступ тексту до аватарки равный gutters, то карточка просто развалилась бы, так как межколонный отступ слишком большой для её размеров:
Плохой пример выравнивания внутри сложного компонента. Композиция карточки развалилась из-за того, что между текстом и аватаркой был задан отступ по общей сетке, равный gutters.
Но вот другой пример, в котором всё не так однозначно: карточка слева расположена в 6 колонках с фиксированным отступом, который меньше межколонного отступа. Справа — та же карточка, но уже с отступом равным gutters.
Пример разного выравнивания элементов внутри компонента
И тот и тот вариант имеет место быть. Но если есть возможность причесать карточку и задать отступ, равный gutter, чтобы картинка и текстовая группа заняли ровно по 3 колонки, то это будет лучшим решением.
Делать первый или второй вариант — решать дизайнеру, исходя из задач и стилистики проекта.
5. Все важные элементы полей — текст, изображения, графика, должны располагаться внутри заданной сетки. Нельзя выходить за её пределы по ширине, если вы не хотите, чтобы ваш контент выпал из экрана и обрезался при масштабировании на разных разрешениях (вспоминаем, зачем нам поля Offset).
Делать первый или второй вариант — решать дизайнеру, исходя из задач и стилистики проекта.
5. Все важные элементы полей — текст, изображения, графика, должны располагаться внутри заданной сетки. Нельзя выходить за её пределы по ширине, если вы не хотите, чтобы ваш контент выпал из экрана и обрезался при масштабировании на разных разрешениях (вспоминаем, зачем нам поля Offset).
Пример расположения контента внутри и вне контейнера с сеткой
Хотя, на самом деле, в примере текст, который выпал, не столь важный. То есть, теоретически, можно допустить, что он выпал — ну и фиг с ним, он нам не несёт какой-то смысловой нагрузки.
А что если так:
А что если так:
Пример выпавшего за сетку важного контента в макете
Упс. Тут уже критично, согласны?
Исключением может быть какой-то фоновый объект, который выходит за границы артборда, и вы смирились, что его часть может обрезаться при масштабировании.
Исключением может быть какой-то фоновый объект, который выходит за границы артборда, и вы смирились, что его часть может обрезаться при масштабировании.
Пример, как часть изображения вне сетки может обрезаться на экране при масштабировании. Дизайн сайта по проектированию медицинских учреждений «YSproject». Проект WebValley Studio.
Если фоновый объект должен занимать всё пространство экрана и не обрезаться криво в воздухе, его также нужно вынести за пределы артборда, и дать комментарии разработчику, как правильно позиционировать элемент.
Позиционирование объектов без фона на экране при масштабировании
Принципы модульности
Вернёмся к понятию модульной сетки.
Традиционно существует два разных подхода к построению системы отступов и выравнивания:
Традиционно существует два разных подхода к построению системы отступов и выравнивания:
- Нечётный пиксель;
- Чётный пиксель.
Нечётный пиксель
В основе данной системы лежит микромодуль, размером 5 рх. То есть вся система построения сетки, выравнивания элементов, отступы между ними — подчинены размерам, кратным 5.
5-пиксельный модуль
Здесь обычно идут двумя путями:
1. Расчерчивают рабочее поле как сетку, которая образует модули 5х5 рх, и располагают все элементы согласно данной сетке.
1. Расчерчивают рабочее поле как сетку, которая образует модули 5х5 рх, и располагают все элементы согласно данной сетке.
Пример элемента в модульной нечётной сетке 5х5 рх
Пример текстового контента в модульной нечетной сетке 5×5 рх
2. Более распространенный в веб-дизайне и чаще используемый приём: сетка подчиняется базовой линии, кратной 5. В основе — тот же модуль в 5 рх, но макет делится уже не на «миллиметровку», а на горизонтальные строки, на которых размещается контент.
Пример размещения контента по базовой линии в нечетной системе отступов. Дизайн-концепт WebValley Studio, UI-дизайнер Мария Дрокина.
Есть даже целые студии, которые строят свои проекты, используя нечетный модуль, например, студия Charmer.
На Behance можно посмотреть пример использования данного принципа в проекте по редизайну айдентики Rambler, в котором используют данную систему отступов.
На Behance можно посмотреть пример использования данного принципа в проекте по редизайну айдентики Rambler, в котором используют данную систему отступов.
Нечетная система отступов на примере кейса айдентики Rambler
Чётный пиксель
В основе этой системы лежит микромодуль, размером 4 рх. То есть, вся разница с предыдущей системой в том, что здесь микромодуль — чётный.
Самым ярким примером данной системы является дизайн-система Google — Material Design.
Самым ярким примером данной системы является дизайн-система Google — Material Design.
Скриншот из методологии построения интервалов 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х, то нечётный подход даст вам дробные значения пикселя, которых не должно быть в макете.
Значения с шагом в 4рх в системе отступов используются реже, при необходимости. Обычно, это какие-то маленькие элементы компонентов, где, например, отступ в 8рх — мало, а в 16рх — уже много. В таком случае используется размер 12рх.
А вот система размеров иконок, наоборот, привычней строится на 4рх системе: 16х16, 20х20, 24х24, 40х40, 60х60 и так далее.
Почему чётная система используется чаще? Потому что масштабировать чётные значения проще. Если вы будете выгружать элемент в 1,5х, то нечётный подход даст вам дробные значения пикселя, которых не должно быть в макете.
Пример изменения размеров элемента при выгрузке в 1,5х.
Распространенные варианты колоночных сеток
Так как в веб дизайне преимущественно используются колоночные сетки, рассмотрим их виды и особенности.
12 колоночная сетка
Самая удобная, гибкая и распространенная среди дизайнеров. Почему именно её чаще всего используют? Потому что её легко поделить на чётное и нечётное количество столбцов (3, 4, 6). Это позволяет делать как удобные и безопасные симметричные интерфейсы, так и более сложные по структуре макеты, делая акцент на одних элементах, и убирая на второй план другие.
Пример использования 12-колоночной сетки в макете, дизайн сайта компании «Ценовые Системы». Проект WebValley Studio.
4 колоночная сетка
Также достаточно удобная и распространённая сетка. Не такая гибкая, как 12-колоночная, более симметричная и простая. Но и более надёжная.
Пример использования 4-колоночной сетки в макете, дизайн-концепт WebValley Studio, UI-дизайнер Мария Дрокина.
4-колоночная сетка может показаться скучной, но с ней можно поэкспериментировать, добавить асимметричности, выделяя основной контент, и оставляя место для подписей и менее важной информации.
Пример использования асимметричной 4-колоночной сетки в макете, дизайн-концепт WebValley Studio, UI-дизайнер Мария Дрокина.
3 колоночная сетка
Этот вариант сетки считается сложным и требующим особого внимания к оформлению, так как является асимметричным. В каждой колонке помещается по 3 столбца, а в ряду — по 3 карточки. Требуется практика и навыки при работе с такой сеткой. Качественные макеты на основе трёх столбцов показывают мастерство дизайнера.
Дизайн, выполненный в 3-колоночной сетке. Сайт компании, предоставляющей услуги стоимостного инжиниринга и нормирования в строительстве «Ценовые Системы». Проект WebValley Studio.
6 колоночная сетка
Сетка в 6 столбцов ещё более сложная, чем 3 столбца, так как она ещё менее гибкая. С такой сеткой нужно уметь работать. Но для сложных интерфейсов с большим количеством мелких элементов, она может быть удачным вариантом.
Сайт издательства «The New York Times», выполненный в 6-колоночной сетке
Комбинации разных видов сеток
Выбранную сетку не обязательно брать за истину и строго придерживаться её рамок. Можно комбинировать разные виды: 3, 4, 6 и 12 колоночные, создавая более интересные и смелые решения в вашем интерфейсе.
Пример комбинированной сетки в дизайне сайта по проектированию медицинских учреждений «YSproject». Проект WebValley Studio.
Вложенные сетки
Если проект сложный и состоит из большого количества элементов и компонентов, дизайнеры могут использовать такой прием, как вложенные друг в друга сетки. То есть основная сетка может быть, например, с крупными колонками и отступами между ними, а внутри такой колонки может лежать элемент со своей собственной сеткой, отличной от основной, с иными отступами. Например, это может быть форма с большим количеством мелких элементов.
Ещё вложенные сетки могут образовываться при интеграции сторонних сервисов, у которых также существует своя собственная система выравнивания.
Ещё вложенные сетки могут образовываться при интеграции сторонних сервисов, у которых также существует своя собственная система выравнивания.
Пример вложенной сетки, дизайн страницы сайта для компании «Доброзайм». Проект WebValley Studio.
Принципы построения модульной сетки
При выборе сетки для проекта нужно отталкиваться от двух важных параметров:
- Содержание — тексты, изображения, графика, медиафайлы, таблицы, списки и прочее;
- Носитель — полиграфия (документы, визитки, брошюры, буклеты, журналы) или веб‑страница, а может что-то ещё.
С чего начать
Начните с простого!
Постройте обычную, например, 12-ти колоночную сетку (если мы говорим о десктопной версии сайта). Она поможет обозначить границы артборда и задать некую отправную точку. Дальше — не торопитесь. Подумайте о композиции в целом. Попробуйте поэкспериментировать с контентом, который необходимо расположить на экране, не обращая внимания на сетку. Задайте основное направление стилистике проекта. После того, как примерно определитесь с композицией, можно вернуться к сетке, и теперь скорректировать всё, с учётом её параметров.
Здесь важно соблюсти некоторые правила.
Постройте обычную, например, 12-ти колоночную сетку (если мы говорим о десктопной версии сайта). Она поможет обозначить границы артборда и задать некую отправную точку. Дальше — не торопитесь. Подумайте о композиции в целом. Попробуйте поэкспериментировать с контентом, который необходимо расположить на экране, не обращая внимания на сетку. Задайте основное направление стилистике проекта. После того, как примерно определитесь с композицией, можно вернуться к сетке, и теперь скорректировать всё, с учётом её параметров.
Здесь важно соблюсти некоторые правила.
Построение базовой сетки
Базовая сетка — это разлинованный в клеточку холст (фрейм), в основе которого лежит модуль (чётный или нечётный).
Базовая сетка 8×8px
Вертикальный ритм
Вертикальный ритм — это система равных отступов, задающих определенную логику и иерархию между элементами макета по вертикали — между заголовками и текстом, картинками, кнопками, карточками, полями формы и их метками. При этом шаг сетки строится 2 способами: на основе высоты строки или на основе базовой линии.
Вертикальный ритм на основе высоты строки или на основе базовой линии
Такой подход к работе с ритмом удобен, так как не нужно измерять расстояние между элементами. Всё укладывается в строки. Например, в примере выше — заголовок занимает 3 строки, текст — 6 строк, картинка — 7 строк и так далее.
Важно не забывать про правила внешнего и внутреннего. Все элементы должны объединяться в некие группы и подгруппы по правилу системы отступов, где все наиболее вложенные элементы имеют отступ меньше или равный наименее вложенным и внешним элементам.
Важно не забывать про правила внешнего и внутреннего. Все элементы должны объединяться в некие группы и подгруппы по правилу системы отступов, где все наиболее вложенные элементы имеют отступ меньше или равный наименее вложенным и внешним элементам.
Группировка элементов дизайна с соблюдением правил внешнего и внутреннего
Горизонтальный ритм
Колоночная сетка — и есть некая система горизонтального ритма, где задаются равные отступы между колонками и ширина самих колонок. По аналогии с вертикальным ритмом, по горизонтали также должны соблюдаться правила внешнего и внутреннего внутри сложных компонентов, и межколонного отступа среди более простых или родительских элементов.
Пример сложного компонента в системе горизонтального ритма.
Пространственная система
Отлично, с отступами решили: до заголовка будет поменьше, до кнопки — побольше. До карточки тоже сделаем большой, а вот саму карточку организуем, как более вложенный компонент ;))
А вот какие эти размеры — «побольше-поменьше», поможет определить пространственная система. Тут нужно исходить из задачи, имеющегося контента и итоговой цели.
Нужен минималистичный интерфейс с лаконичным расположением элементов или нужна страница со сложным пользовательским интерфейсом с кучей элементов?
Здесь в качестве отправной точки выступает выбранная система пикселя (например, 8-ми пиксельный формат). А далее, исходя из контента, определяется минимальное значение базового блока, количество столбцов, общая стилистика и прочее. Всё это формирует систему пространства страницы. В сложных масштабируемых проектах такая система упаковывается в дизайн-систему — логически продуманные, гибкие и масштабируемые правила построения элементов.
А вот какие эти размеры — «побольше-поменьше», поможет определить пространственная система. Тут нужно исходить из задачи, имеющегося контента и итоговой цели.
Нужен минималистичный интерфейс с лаконичным расположением элементов или нужна страница со сложным пользовательским интерфейсом с кучей элементов?
Здесь в качестве отправной точки выступает выбранная система пикселя (например, 8-ми пиксельный формат). А далее, исходя из контента, определяется минимальное значение базового блока, количество столбцов, общая стилистика и прочее. Всё это формирует систему пространства страницы. В сложных масштабируемых проектах такая система упаковывается в дизайн-систему — логически продуманные, гибкие и масштабируемые правила построения элементов.
Пример небольшой дизайн-системы для сайта IT-компании GartLight Solutions. Проект WebValley Studio.
Построение дизайнерской модульной сетки
Дизайнерская модульная сетка — это сетка, которую создал дизайнер для своего проекта. Строится модульная сетка на основе базовой и колоночной — сначала создаем первую, потом, на неё сверху, накладываем вторую. Определяем размер основного модуля — дизайнерская сетка для проекта готова =))
Сетка адаптивного дизайна
При построении сетки в проекте важно также не забыть о том, что в современном мире большое количество всевозможных гаджетов: от смартфонов до 4K-мониторов. Поэтому необходимо продумать адаптивные версии и точки перехода — breakpoints.
Расчет точки перехода — breakpoints
При создании адаптивных версий число колонок может увеличиваться или уменьшаться в определенных точках перехода. Как их рассчитать? На самом деле, нет каких-то единых значений диапазона, в которых должен происходить переход от одной версии сайта к другой. Можно в разных источниках встретить разные цифры.
Пожалуй, самыми популярными и адекватными на сегодня можно считать данные системы Bootstrap Grid 5.
Пожалуй, самыми популярными и адекватными на сегодня можно считать данные системы Bootstrap Grid 5.
Bootstrap Grid 5
WebValley Studio пользуется именно этими параметрами. Наши дизайнеры верстают макеты в таких разрешениях:
- 1400px >= Desktop (для больших разрешений)
- 1200px ≤ Desktop < 1400px
- 992px ≤ Tablet < 1200px
- 768px ≤ Tablet < 992px
- 576px ≤ Mobile < 768px
- Mobile < 576px
На заметку дизайнерам:
Размеры фреймов для макетов, которые всегда прорабатываются в любом проекте:
1600рх (grid ≈ 1140 − 1280)
1024рх (grid ≈ 960)
768рх (grid ≈ 736)
320рх (grid ≈ 296)
Остальные версии по желанию или необходимости
Размеры фреймов для макетов, которые всегда прорабатываются в любом проекте:
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)
Скачать сетки WebValley Studio →
1200рх (grid = 1160)
960рх (grid = 920)
640рх (grid = 620)
480рх (grid = 460)
320рх (grid = 300)
Скачать сетки WebValley Studio →
Правила расположения контента в адаптивном дизайне
При адаптации макета необходимо соблюдать определённую логику в расположении контента: как мы привыкли читать слева направо, сверху вниз, так и должен восприниматься контент в макете. То есть, если мы, условно, пронумеруем карточки, то получим такой результат при адаптиве:
Порядок переноса контента при адаптиве макета
Карточки последовательно переезжают в нижнюю строку согласно заданной нумерации. Нельзя просто взять и перетащить вниз то, что не поместилось сбоку, если мы говорим о разработке. А вот в Tilda, кстати, так можно. Но всё же не нужно. Приучайте себя делать сразу правильно!
Пример правильной и неправильной последовательности при переносе контента в адаптивных макетах
Оптическая компенсация
Это такой эффект, когда элементы выровнены по сетке и относительно друг друга, но визуально кажется, что что-то не так. Как будто криво. Рассмотрим на примерах.
Часто можно встретить этот эффект при разной массе объектов. Например, если разместить друг под другом квадрат и круг, то кажется, что круг немного правее, чем квадрат. Хотя по факту они выровнены по одной оси х.
Часто можно встретить этот эффект при разной массе объектов. Например, если разместить друг под другом квадрат и круг, то кажется, что круг немного правее, чем квадрат. Хотя по факту они выровнены по одной оси х.
Оптическая компенсация на примере геометрических фигур
Ещё больше этот эффект усиливается при разном размере элементов:
Оптическая компенсация на примере геометрических фигур разного размера
Также часто с оптической компенсацией можно столкнуться в работе с типографикой. Тут аналогично: при разном размере текста (особенно при большой разнице) кажется, что текст заголовка находится чуть правее.
Оптическая компенсация на примере текста
Особенно часто этот эффект можно наблюдать с такими буквами, у которых минимальное прилегание к левому краю (при выравнивании по левому краю), например «O» и «C» на примере. За счёт большого скругления букв, кажется, что буква сместилась вправо. При большем размере этот эффект увеличивается. А вот те буквы, что имеют максимальное прилегание по линии выравнивания, как «R», а также те буквы, у которых прилегание по углам, как у «X» — уже не дают такого эффекта.
Оптическая компенсация при разных символах текста
Но если увеличить размер шрифта ещё, то эффект будет даже у таких букв:
Оптическая компенсация при разных размерах текста
Происходит это потому, что текст помещён в контейнер, и чем больше размер текста, тем, соответственно, больше отступ внутри контейнера.
Оптическая компенсация при разных размерах текста
То есть, с точки зрения кода элементы выровнены по одной оси X, но визуально так не кажется.
Что делать дизайнеру в таком случае? Вспомнить, что сетка не непреложная истина, а лишь инструмент, помогающий в работе. Не нужно слепо придерживаться заданных рамок. Пользователь на сайте сетку всё равно видеть не будет, а вот кривое выравнивание заметит. Можно смело сместить нужный элемент вне сетки и надеяться, что разработчик сверстает этот фрагмент так, как вы ему показали ;))
Что делать дизайнеру в таком случае? Вспомнить, что сетка не непреложная истина, а лишь инструмент, помогающий в работе. Не нужно слепо придерживаться заданных рамок. Пользователь на сайте сетку всё равно видеть не будет, а вот кривое выравнивание заметит. Можно смело сместить нужный элемент вне сетки и надеяться, что разработчик сверстает этот фрагмент так, как вы ему показали ;))
Пример смещения контента вне сетки при оптической компенсации
Параметры сетки в макетах
Сетка в макете может быть фиксированной или резиновой. Чем они отличаются и какие есть нюансы — частый вопрос студентов нашей академии.
Фиксированная сетка — Fixed Grid
Эту сетку можно встретить как в современных сайтах, так и в старых — раньше в основном все сайты помещали в грид-контейнер, и их можно легко отличить по внешнему виду:
Пример сайта, свёрстанного в Grid контейнере
Пример сайта, свёрстанного в Grid контейнере
Fixed Grid — это некий контейнер, внутри которого размещается контент на экране. При этом существуют контрольные точки, при переходе которых пользователю показывается следующая версия, например, планшетная. Контент внутри грид-контейнера не меняется в пределах диапазона контрольных точек, то есть изображения остаются прежнего размера, текст не растягивается и не перемещается на следующую строку. Увеличивается или уменьшается лишь пустое пространство по бокам от грид-контейнера — «ушки».
Размещение контента при Fixed Grid на разных разрешениях экрана. Меняется только ширина пустого пространства по бокам от контейнера, текст и карточки остаются на месте. Дизайн сайта строительной компании Генезис. Проект WebValley Studio.
Размещение контента при Fixed Grid на разных разрешениях экрана при перестроении в планшетную версию. Дизайн сайта строительной компании Генезис. Проект WebValley Studio.
Гибкая сетка — Fluid Grid
При резиновой вёрстке напротив: весь контент динамичный и задаётся в процентах. Тут уже нет определенного контейнера, и контент равномерно распределяется при масштабировании: изображения — растягиваются, текст — переезжает на другую строку в рамках заданного диапазона. Здесь также есть контрольные точки, при которых контент будет перестраиваться в адаптивную версию, однако они носят ориентировочный характер. Поэтому при резиновой вёрстке важно сохранить размеры межколоночного расстояния и количество колонок.
Размещение контента при Fluid Grid на разных разрешениях экрана. Контент растягивается в зависимости от ширины экрана.
Гибридная сетка — Hybrid Grid
Гибридная сетка — это комбинация из двух вариантов сеток — фиксированной и резиновой. Да, так тоже можно, а иногда и нужно. Такое решение позволяет создавать более сложные и интересные интерфейсы.
Слева на примере показан пример комбинированной сетки, справа — Fixed Grid.
Слева на примере показан пример комбинированной сетки, справа — Fixed Grid.
Комбинированная сетка в сравнении с простой, дизайн сайта производителя мебели «Ленинградский Мебельный Завод». Проект WebValley Studio.
Нарушение сетки
Нарушение сетки может быть хорошим решением, если ваш макет выглядит слишком простым и скучным.
Акценты
Чтобы избежать простоты и шаблонности в макете, дизайнеры часто прибегают к такому приёму, как добавление акцентов. Их присутствие может освежить дизайн и придать ему интересный нестандартный вид.
Например, рассмотрим дизайн страницы сайта IT-компании GartLight Solutions от WebValley Studio. Сложность работы здесь заключалась в том, что на странице большое количество контентных блоков, с таким же большим объёмом текста в каждом из них, скромная палитра цветов в сине-белой гамме, полное отсутствие изображений у компании. Чтобы не скатиться в скучный шаблонный макет, дизайнеры выбрали интересную сетку со смещением контента, а в качестве акцентов добавили тонкие вертикальные линии сквозь весь сайт, аккуратную анимированную графику и крупные стрелки. В типографику решили также добавить акцент в виде подсвеченных градиентом слов. В итоге получился интересный, по-прежнему строгий и премиальный дизайн, совершенно не скучный и не шаблонный.
Например, рассмотрим дизайн страницы сайта IT-компании GartLight Solutions от WebValley Studio. Сложность работы здесь заключалась в том, что на странице большое количество контентных блоков, с таким же большим объёмом текста в каждом из них, скромная палитра цветов в сине-белой гамме, полное отсутствие изображений у компании. Чтобы не скатиться в скучный шаблонный макет, дизайнеры выбрали интересную сетку со смещением контента, а в качестве акцентов добавили тонкие вертикальные линии сквозь весь сайт, аккуратную анимированную графику и крупные стрелки. В типографику решили также добавить акцент в виде подсвеченных градиентом слов. В итоге получился интересный, по-прежнему строгий и премиальный дизайн, совершенно не скучный и не шаблонный.
Дизайн главной страницы сайта IT-компании GartLight Solutions. Проект WebValley Studio.
Но с акцентами нужно быть осторожным и не стараться запихнуть их в каждый макет в большом количестве. Акценты могут спасти макет, а могут его совершенно испортить.
Пример плохого варианта использования акцентов на сайте. Какой-то борщ из элементов.
На примере выше с акцентами явно переборщили: здесь и плашки, и разноцветные элементы, текст, тени, дополнительные цитаты, изображение зубов слева в углу и целая куча полупрозрачных улыбок на заднем фоне. Всё это создает большой шум и загрязняет макет, ухудшая читабельность в блоке.
А вот удачный пример добавления акцентов на фон в макет:
А вот удачный пример добавления акцентов на фон в макет:
Работа студентки курса PRO Web от WebValley Academy, Юлии Ивановой
Здесь векторные изображения в виде карандашных рисунков не создают грязь, а, наоборот, подчёркивают тематику лендинга и поддерживают общую стилистику дизайна.
Ассиметричные сетки
Ещё один достаточно распространенный вариант придать простому макету интересный вид и уйти от шаблонности в работе. При помощи асимметрии можно грамотно управлять вниманием пользователя на сайте и вести его по странице так, как вам необходимо. Здесь также важен баланс и умеренность. Если просто сместить весь контент в одну часть сайта и оставить пустой другую, можно добиться странного эффекта, что всё поехало. Согласитесь, так себе результат получится =))
Пример плохой асимметрии в сетке. Эффект съехавшего контента
В данном случае, симметричный вариант выглядит намного выигрышней:
Пример симметричной сетки, дизайн-концепт сайта компании «Доброзайм». Проект WebValley Studio.
А вот следующий пример асимметрии более удачный — основной контент расположен в правой части страницы, а второстепенный контент и список — в левой.
Пример асимметричной сетки, дизайн-концепт WebValley Studio, UI-дизайнер Мария Дрокина.
Способы создания сетки
Сеток существует великое множество, их можно создать самим или воспользоваться готовыми шаблонами, а ещё — позаимствовать у коллег дизайнеров.
Создание собственной сетки
Как создать собственную сетку? Можно просто поделить макет на необходимое количество столбцов и работать с ними. Такой подход может подойти для небольшого проекта с простым дизайном или, наоборот, со слишком нестандартным, а также для работы с готовыми конструкторами, такими как Tilda. Главное не забыть про адаптивность вашего макета, а также продумать всё так, чтобы разработчику не пришлось танцевать с бубном, пытаясь сверстать ваш макет.
Но что если всё серьёзней, и требуется построить сетку для крупного проекта или для проекта в долгосрочной разработке, или нужна сетка для сложного проекта с большой детализацией? Можно, конечно, попытаться высчитать сетку самостоятельно, но есть большой риск ошибиться, особенно если вы не знакомы с разработкой. Целесообразнее взять уже готовую сетку или воспользоваться конструктором, чтобы скорректировать параметры сетки под себя.
Но что если всё серьёзней, и требуется построить сетку для крупного проекта или для проекта в долгосрочной разработке, или нужна сетка для сложного проекта с большой детализацией? Можно, конечно, попытаться высчитать сетку самостоятельно, но есть большой риск ошибиться, особенно если вы не знакомы с разработкой. Целесообразнее взять уже готовую сетку или воспользоваться конструктором, чтобы скорректировать параметры сетки под себя.
Установка сетки при помощи плагина, калькуляторы сеток
В интернете можно найти сервисы и плагины на все случаи жизни, которые помогут вам быстро создать сетку для проекта. Вот некоторые из них:
Gridcalculator.dk
Простое приложение. Помогает быстро делать расчет сеток для веб-сайтов и приложений под разные разрешения экранов.
Приложение для создания сетки Gridcalculator
Gridinator.com
Удобный инструмент, позволяет генерировать сетку с параметрами pixel widths, em widths, percentage widths. Есть экспорт сетки в CSS, html, image.
Сервис Gridinator для построения сеток для веб дизайна
Grid.mindplay.dk
Инструмент для продвинутых дизайнеров. Больше подойдет разработчикам, так как приложение делает экспорт в CSS. Есть еще возможность задать набор параметров для типографики.
Продвинутый инструмент для работы с сетками Grid.mindplay
Guideguide.me
Плагин позволяет настраивать большое количество сеток, базовых линий, направляющих. Есть версии для Photoshop CS4 и CS5+. Есть пробная бесплатная версия на 14 дней.
Интерфейс плагина Guideguide.me
Gridlover.net
Приложение позволяет создавать типографскую сетку на основе модульной системы, вертикального ритма.
Gridlover — приложение, позволяющее создать и скачать модульные сетки для графического дизайна
Archetypeapp.com
Сервис позволяет быстро и легко создавать стили типографики и горизонтальный ритм в режиме онлайн.
Интерфейс приложения Archetypeapp
Скачивание готовых шаблонов сеток в интернете
Можно скачать уже готовые шаблоны сеток, так вы сэкономите кучу времени. Огромное количество сеток можно найти в комьюнити Figma.
Например, найти большую библиотеку сеток для iOS, Android и Bootstrap можно в Grid System Library от pixsellz.io. Здесь есть сетки с 6 и 12 колонками для 15 различных устройств, в файлах, совместимых с популярными графическими инструментами: Adobe XD, Photoshop, Illustrator, Sketch и Figma:
Например, найти большую библиотеку сеток для iOS, Android и Bootstrap можно в Grid System Library от pixsellz.io. Здесь есть сетки с 6 и 12 колонками для 15 различных устройств, в файлах, совместимых с популярными графическими инструментами: Adobe XD, Photoshop, Illustrator, Sketch и Figma:
Grid System Library от pixsellz. io — самая большая библиотека сеток для веб дизайна
Современные тренды использования сеток в веб дизайне
Сегодня, помимо классических, уже всем привычных сеток, на сайтах встречаются и необычные, смелые подходы. Дизайнеры всё чаще обращаются к нестандартным решениям, тем самым привлекая больше внимания к проекту.
Ломаные сетки
Популярный тренд — ломаная сетка. Можно встретить как на сайтах, так и в полиграфии.
Пример ломаной сетки можно посмотреть на сайте проекта WebValley Studio для питомника растений «Калужский Тракт».
Пример ломаной сетки можно посмотреть на сайте проекта WebValley Studio для питомника растений «Калужский Тракт».
Пример ломаной сетки, дизайн сайта питомника растений «Калужский Тракт». Проект WebValley Studio.
Диагональные сетки
Приём с размещением границ блоков по диагонали стал популярен 3−4 года назад и остается востребованным на сегодняшний день.
Дизайн пользователя Adhouse Escuela Digital на Behance
Сплит-экраны
Когда речь идёт о сплит-экранах, или разделенных экранах — обычно сразу представляется поделенный пополам экран — частое решение на сайтах в обложках, офферах и контентных блоках.
На самом деле тренд популярен уже долгое время, и его рамки намного шире. Классным решением в современном дизайне макета может стать, например, галерея фото или блок с услугами или товарами, оформленный в виде плиток, и раскрывающийся при наведении.
На самом деле тренд популярен уже долгое время, и его рамки намного шире. Классным решением в современном дизайне макета может стать, например, галерея фото или блок с услугами или товарами, оформленный в виде плиток, и раскрывающийся при наведении.
Пример сплит-экрана. Дизайн сайта производителя уходовой косметики Solok Cosmetics. Проект WebValley Studio.
Иерархическая сетка
Старая добрая иерархическая сетка была и будет в тренде ещё долгое время. Это асимметричная сетка, в которой объекты расположены в порядке значимости. Она позволяет создавать интересные, не похожие друг на друга решения в дизайне.
Пример иерархической сетки, дизайн студентки курса PRO Web от WebValley Academy, арт-дирекшн WebValley Studio.
Главное правило — не упарывайтесь. Во всем нужна логика и мера. Есть тонкая грань между «так надо» и «я так хочу» и есть ситуации, когда стоит поступить как «я хочу». Важно ответить на вопрос: почему я сделал именно так, есть ли логика в моих действиях, могу ли я привести аргументы в защиту своему решению? Если на все вопросы ответ положительный, то вы смело можете рушить систему. В противном случае — будьте проще!
Автор статьи
Мария Дрокина
UI-дизайнер
27.10.2023
Освой профессию веб‑дизайнера на студийном уровне
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.