Сетки в веб-дизайне: основы, создание, преимущества и рекомендации по использованию сеток

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

Базовая информация о сетках в веб-дизайне

Что такое сетки и как они работают

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

Для простоты понимания давайте представим прописную тетрадку первоклассника. Посмотрите, как аккуратно и четко она разлинована. Эти линии помогают маленькому ученику писать аккуратно, не выступая за пределы строк. Так и сетка в веб-дизайне помогает сделать макет опрятным и избежать ситуаций, когда элементы «пляшут» на странице то вверх, то вниз, то вправо-влево. 

Основные термины

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

Колонки. Это параллельные вертикальные полосы, составляющие основу любой сетки. Посмотрите на скриншот ниже: каждая полоса — это одна колонка. Сетки могут состоять из 24, 16, 12, 9, 6, 4, 3 и даже 2 колонок. Наиболее распространена 12-колоночная сетка.

Межколонные отступы (пробелы, межколонники, средники). Это расстояние между колонками. Обозначается словом «gutter». На рисунке ниже они обозначены зелеными полосками. Отступы дают дизайну «воздух» и не позволяют элементам слиться в одну кучу. 

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

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

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

Поля. Это отступы по бокам сетки, которые отделяют контент от краев макета. 

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

Виды сеток

В веб-дизайне можно выделить 3 вида сеток:

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

• Модульная. Состоит из модулей и подходит для создания сложных дизайнов с большим количеством разных блоков. Дизайн на основе такой сетки тоже называется модульным. Этот вариант используется на большинстве современных сайтов.

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

Пример дизайна с иерархической сеткой:

Сайт сделан на конструкторе Craftum

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

• Фиксированные. Размер колонок фиксирован и не меняется на разных экранах.
• Динамические (резиновые). Размер колонок задается в процентном соотношении и автоматически меняется, подстраиваясь под ширину экрана. 

Фиксированные сетки тоже можно адаптировать под разные экраны, но обычно этим занимается верстальщик (специалист, который преобразует дизайн в код). 

Как выбрать тип сетки

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

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

Пример прототипа сайта

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

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

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

Как определиться с количеством и шириной колонок

Основа любой сетки — колонки. Поэтому сначала определимся с их количеством и шириной. 

Универсальной считается 12-колоночная сетка. Она подходит для большинства проектов, так как ее можно разбить на блоки из 6, 4, 3 и 2 колонок. Если вы планируете создать простой лендинг с парой заголовков, текстовых блоков и картинок, то хватит и 4-6 колонок. 

В качестве примера предлагаем рассмотреть стандартную 12-колоночную сетку. 

Пример 12-колоночной сетки в конструкторе сайтов Craftum

Далее определитесь с шириной колонок, отступов и полей. Самое распространенное сочетание для 12-колоночной сетки:

• ширина колонки — 64 пикселя;
• отступы — 24 пикселя;
• поля — все оставшееся пространство. 

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

Когда вы определились с количеством и хотя бы примерной шириной колонок, приступайте к созданию макета. Для этого подойдут Figma, Moqups, Adobe InDesign и даже обычный Adobe Photoshop. Можно воспользоваться и конструктором Craftum. В нем вы можете сделать не только макет, но и посмотреть, как будет выглядеть проект вживую, а также создать сайт из уже готовых блоков. 

Как создать колоночную и модульную сетку для макета

Мы рассмотрим процесс создания сетки для макета на примере Figma. Это простой и удобный инструмент, подходящий для новичков и профи. 

Давайте представим, что мы создаем макет лендинга, и пройдем все шаги:

1. Сначала создайте новый документ. Нажмите New Design File → Frame → Desktop. Выберите стандартный размер макета — 1440 на 1024 пикселя. 

2. Теперь добавьте на макет колонки. Для этого кликните на Layout Grid в боковом меню и выберите вариант Columns. По умолчанию на макете появятся 5 колонок. 

3. Изменить количество колонок можно в поле Count. Мы сделаем 12 штук. 

4. Выберите тип сетки: Left, Right, Center и Stretch. Первые два используют при создании сложных интерфейсов, поэтому их пока не берем. Stretch подойдет для резиновых сеток, а Center — для фиксированных. Давайте выберем Center, чтобы научиться вручную устанавливать размеры колонок и отступов.

5. Установите значения Width (ширина одной колонки) — 64 пикселя, и Gutter (ширина отступа) — 24 пикселя. Можете использовать свои числа. 

Готово! У вас получилась сетка из 12 одинаковых колонок, которую уже можно использовать для создания дизайна. 

Но мы предлагаем еще немного поколдовать и превратить колоночную сетку в модульную. Для этого просто добавим к колонкам строки:

1. Кликаем на плюсик рядом с Layout Grid в боковом меню и выбираем значение Rows. 

2. При необходимости меняем количество строк в поле Count. По умолчанию Figma добавит на макет 5 рядов. Мы изменим на 10. Также проверьте отступы между строками (Gutter). Они не должны быть слишком маленькими. Мы поставим значение 20 пикселей.  

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

Теперь переходим к самому интересному — размещению контента. 

Как использовать сетку для размещения контента на странице

Попробуем нанести на сетку простейший прототип одностраничного лендинга.

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

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

На макет можно добавлять не только фигуры, но и картинки/видео с компьютера. Для этого нажмите на кнопку Place image/video.

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

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

В итоге у нас получился комбинированный макет:

1. Мы использовали один целый ряд для создания шапки сайта. 
2. Затем сделали два столбца для размещения фотографии и описания товара. 
3. Внутри модуля «Текст о товаре» добавили кнопку «Заказать», при этом выровняли ее по колонкам. 
4. Для описания преимуществ добавили 4 модуля, состоящих из двух строк и трех колонок каждый. 

Примеры сеток и их реализация на практике

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

Пример 1. Начнем с сайта Sony. На нем используется нестандартная модульная сетка из 15 колонок. Основной контент на странице — это изображения со ссылками на полные материалы. 

Пример сетки сайта Sony

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

Пример 2. Следующий сайт — IMA. На нем используется стандартная 12-колоночная сетка, также разбитая на модули. Обратите внимание, как четко выровнены на странице центральная и боковые колонки с контентом. Основной текст и изображения тоже подчиняются сетке. 

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

Пример 3. Теперь посмотрим на сложную модульную сетку с большим количеством элементов. Это дизайн сайта Ozon. Основу макета составляет сетка из 12 колонок. В нее вписаны модули шириной в две и четыре колонки. 

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

Преимущества сеток в веб-дизайне

Многие начинающие дизайнеры не пользуются сетками и делают макеты «на глаз», доверяясь своей интуиции. Так тоже можно, но увы, нет никакой гарантии, что дизайн получится аккуратным, читаемым и адаптивным. 

К тому же, у сеток есть сильные преимущества, поэтому совсем отказываться от них нет смысла. 

Улучшение визуальной иерархии и читаемости контента

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

Шаблон «Маркетинг» из конструктора сайтов Craftum

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

Ускорение процесса разработки и уменьшение количества ошибок

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

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

Лучшая адаптивность и мобильная оптимизация

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

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

Возможность создавать сложные дизайны

Это основное преимущество иерархических и модульных сеток в веб-дизайне. С их помощью вы можете создавать макеты любой сложности. Например, один блок на сайте можно подчинить модульной сетке (как в примере с Ozon), а остальной дизайн сделать по колоночной или иерархической. Главное здесь — практика, эксперименты и насмотренность.

Улучшение SEO

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

Рекомендации по созданию и использованию сеток в веб-дизайне

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

Как с помощью сетки создать удобный и привлекательный дизайн

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

В макете выделяйте самое важное — кнопки действия, УТП (уникальное торговое предложение), фотографии товаров, блоки доверия (отзывы, сертификаты, информация о компании). 

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

Блок со списком услуг из шаблона «Универсальная страница компании» в Craftum 

А теперь посмотрим на плохой пример на скриншоте ниже:

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

Как избежать распространенных ошибок в использовании сеток

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

• Сначала делайте прототип, а потом сетку. Бывает, что новички совершают ошибку: они сначала рисуют сетку, а затем придумывают к ней макет. Это неправильно. Начинать всегда нужно с разработки прототипа, а затем уже его накладывать на сетку, но не наоборот. Иначе сетка будет диктовать вам свои условия, а сам дизайн уйдет на второй план. Когда закончите работать над таким макетом и отключите сетку, вас может ждать полное разочарование в стиле «ожидание-реальность». 
• Не игнорируйте межколонные отступы. Блоки не должны слипаться друг с другом, иначе в дизайне не будет «воздуха». Экспериментируйте с шириной межколонника — для каждого проекта будет свой показатель, но не стоит делать его меньше 10 пикселей. 
• Выравнивайте элементы по сетке. Подробнее об этом можно почитать в статье «Ошибки в веб-дизайне, которые совершают все». Аккуратно расставляйте по колонкам не только кнопки или картинки, но и текст. 

Как сделать сетки более уникальными и интересными

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

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

Рекомендуем поэкспериментировать и с иерархическими сетками. Для вдохновения просматривайте макеты других сайтов и обращайте внимание на дизайн ресурсов, которые вы посещаете. Подробнее об этом читайте в статье «Тренируем насмотренность: полезные ресурсы для дизайнеров».

Заключение

Сетки помогают создать аккуратный и структурированный дизайн, поэтому при работе над макетом желательно держать их под рукой. Новичкам рекомендуем начать с простых колоночных сеток, затем плавно переходить к модульным. Экспериментируйте с разными макетами, меняйте ширину колонок, строк и отступов, тренируйте насмотренность. И вы сами не заметите, как сетки прочно войдут в арсенал ваших инструментов для создания стильных и эффектных проектов. Ну а попрактиковаться в веб-дизайне поможет конструктор Craftum. Попробуйте сейчас: первые 10 дней — бесплатно, далее — всего от 159 рублей в месяц.