Модульные сетки: как они работают

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

Я прошел этот путь. У меня был крутой экспириенс: начинал с собственного журнала, где создавал сетки с нуля. Набил шишки, не сразу получалось. Сейчас я готов поделиться опытом в том, как модульные сетки помогут новичку в веб-дизайне.

Начнем с крутой матчасти.
Что такое модульные сетки

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

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

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

↧ Пример модульной сетки Сетка решает следующие задачи:

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

Какие бывают сетки

Сетки делятся на простые и сложные. Простейшую сетку ты можешь встретить в Ворде. Именно благодаря ей текст не рассыпается по странице, выравнен по краю и имеет строгое начало и конец.

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

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

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

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

↧ Расположение элементов на афише концертного зала органной и камерной музыки Боль журналов — много рубрик, в которых нужно сохранить единый стиль. Чтобы не запихивать в каждую рубрику одинаковый набор элементов «абы как» сетка позволяет структурировать их, объединить, но по-разному оформить.

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

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

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

↧ Книга Йозефа Мюллера-Брокманна «Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок». Чтобы разобраться в тонкостях работы над сеткой, возьми любимые журналы, например, Kinfolk. Открывай журнал, бери линейку, карандаш и безжалостно расчерчивай страницы в поисках сетки, которую задумывали авторы. Обязательно делай пометки и переводи в пункты. Так ты поймешь не только как соотносятся поля, размер блоков сетки и формат, но и как они связаны с размером шрифта.

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