Как использовать сетки: простые правила для начинающих

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

Олег Уппит

автор

Мы сформулировали несколько общих правил, которые будут полезны, если вы только начинаете использовать сетки:

Учитывайте отличия онлайн-медиа от «бумаги». В Интернете дизайнеру следует учитывать множество труднопредсказуемых факторов. Например, никогда неизвестно, какая часть лонгрида будет находиться на экране у пользователя в тот или иной момент времени, поскольку вертикальная перемотка зависит только от него. Именно поэтому на первое место в проектировании модулей для web-среды выходит работа с вертикальными линиями сетки, а горизонтали играют заметную роль лишь в верхних и нижних частях сайта и на страницах списков.

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

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

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

По­лез­ные
не­оче­вид­но­сти

 Соблюдайте пропорции. Или не соблюдайте, но очень сознательно и там, где это уместно.

 Выбирая ширину полосы набора, ориентируйтесь на кегль (размер высоты букв) шрифта, который используется на странице чаще всего. Выберите такую ширину текста, чтобы в строке почти всегда было 7–10 слов. Ради этого можно переносить заголовок, разбивая его на строки, а вставки, набранные меньшим кеглем, пускать в несколько колонок. Интерлиньяж (расстояние между строками по вертикали) тоже нужно выбирать в соответствии с кеглем шрифта.

Кегль и интерлиньяж так же важны, как и правильно построенные поля. Йозеф Мюллер-Брокманн пишет об этом:

«Поле набора может сливаться в темный ком, если верхняя и нижняя строчки оптически сливаются и читаются вместе, но и большой разброс превращает поле в набор строк, а не текст».

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

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

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

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

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

 Помните о совете Ле Корбюзье. Великий архитектор писал: «Я всегда оставляю за собой право сомневаться в бесспорности решений, подсказываемых мне „модулором“, сохраняя полную свободу действий, подчиняя их моему чувству вещей, но отнюдь не моему рассудку».

Работа с сетками
в Setka Editor

В Setka Editor мы используем колоночные сетки — это базовые сетки во всем графическом дизайне. К ним часто добавляются горизонтальные ряды, которые рассчитываются, исходя из величины кегля. Их конфигурация зависит от числа колонок, отступов от края макета (margins) и отступов колонок друг от друга (gutters).

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

В разделе Grid Systems вы можете настроить базовые сетки для выбранной темы, а потом в редакторе работать в одной из них. По умолчанию в Setka Editor подключено несколько видов сетки: шестиколоночные, восьмиколоночные, десятиколоночные и двенадцатиколоночные. Кроме того, вы можете загрузить собственную сетку.

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

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

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