Модульная сетка как основа хорошего дизайна. Часть 1
В этой статье рассказывается о создании 12-ти колоночной сетки для журнала.
Модульные сетки представляют собой основу для всех сфер графического дизайна, но больше всего они важны в редакционном дизайне.
Использование модульной сетки связано с одним из самых основных принципов дизайна — выравнивания. Периодическое печатное издание, созданное на базе модульной сетки, легче воспринимается человеком, так как его дизайн основывается на законах пропорции. Применение такой разметки позволяет упорядочить различные элементы страницы, придавая ее оформлению целостность и ясность. В то же время, модульная сетка позволяет быстро и правильно организовать работу над разворотами журнала, придать соразмерность графическим и текстовым блокам, контролировать поля.
Сетка представляет собой систему непечатаемых вертикальных и горизонтальных линий, разделяющих страницу. К этим линиям «привязываются» основные элементы страницы (текстовое наполнение, иллюстрации, декоративные объекты и т.д.). Сетка строится на мастер-странице (шаблон, который применяется ко всем создаваемым страницам, автоматически дублирующий все необходимые компоненты). Сначала задают поля, затем определяется размер и количество автоматических колонок. Следующий шаг: при помощи вертикальных и горизонтальных направляющих линий добавляются дополнительные линии привязки.
История, с чего все началось
Итак, рассмотрим сетку журнала Свет Евангелия, который издавался ежеквартально в течение 20 лет (с 1990 по 2010 годы) в Ровно (Украина).
Как и многие печатные издания, журнал СЕ создавался на базе модульной сетки. Но с 1990 по 1993 годы в журнале не было компьютерного макета. Сейчас даже трудно представить себе, что тогда журнал делался, в общем-то, почти вручную. Хотя в редакции уже были первые компьютеры, и даже лазерный принтер имелся. Но набирали и распечатывали только текстовые полосы. Макет журнала выклеивался вручную — с помощью бумаги, клея и ножниц — заголовки, рисунки, текстовые полосы. И все-все страницы технический редактор (т.е. я) вымеряла линейкой по миллиметрам…
В 1994 году редакция приобрела программу Adobe PageMaker 5.0. Технический редактор Вера Фесянова и дизайнер Олег Моргун разработали компьютерный макет журнала СЕ с трех-колоночной модульной сеткой.
В основу сетки журнала был положен прямоугольник текстового поля, отделенный от краев страницы полями и разделенный направляющими на 3 колонки с промежутком 5 мм между колонок.
Это очень простой макет, но его также можно разнообразить, добавив некоторые элементы. Например, растянуть заголовок или картинку на две колонки. На страницах с помощью вертикальных и горизонтальных координат размещаются текст и иллюстрации. Простота и четкость разворотов усиливается контрастом в размерах изображений.
Даже такая простая сетка позволяла формировать разные по ширине блоки — в три, две или одну колонки. Вертикальные направляющие по центру промежутка между колонками добавлены вручную, чтобы было легче выровнять информационные блоки с фотографиями.
Журнал развивался, и нам хотелось, чтобы дизайн становился лучше, более динамичным. На некоторых разворотах мы размещали разноплановые материалы, объединенные одной темой. Например, новости из разных мест. И нужно было их размещать так, чтобы текст из разных материалов визуально разделялся. Мы пробовали 6-колоночную сетку, но она не отвечала поставленной задаче.
Эврика
И тогда (в 1998 году) нашему техническому редактору Вере Фесяновой пришла мысль сделать 12 колонок на странице. И это оказалось очень удачной идеей. Мы получили гибкий макет с функциональной моделью модульной сетки для большого количества разной информации и элементов.
В этой модульной сетке легко позиционировать и выравнивать элементы дизайна:
a. колонки помогают точно расположить блоки текста, заголовки статей, иллюстрации, фотографии и другие графические и информационные объекты.
b. соблюдаются равномерные интервалы между элементами.
c. рационально используется свободное пространство, которое облегчает чтение текста и восприятие всей композиции.
Фотография на правой странице выходит за пределы центральной колонки и легко выравнивается горизонтально в сетке соседних колонок.
Затемненные участки на странице слева показывают, как с помощью этой сетки можно получить 5 типов деления на колонки. Широкие боковые поля также добавляют возможности при выборе колонок и размеров фотографий (страница справа).
Особенность 12-колоночной модели в том, страницу можно легко разделить на модули по 2, 3, 4 и 6 колонок, связанных с сеткой всего документа. Так мы можем играть с шириной и формой колонок, рассматривая текстовые блоки как отдельные модули, и смешивать количество столбцов в каждой истории. Например, если текст и изображения будут располагаться в двух узких колонках, а пояснительная информация — в широкой колонке, или наоборот.
Помещаемый на страницах материал может быть графически неоднороден, но по сетке удобно располагать как прямоугольные фотографии, так и иллюстрации неправильной формы.
Здесь материалы внизу визуально отделены от основного материала не только цветовыми фоновыми плашками, но разной шириной колонок текста.
Основной материал заверстан в 3 колонки на обеих страницах разворота.
Текстовый материал слева внизу растянут на 2 колонки,
внизу справа — текст заверстан в 2 колонки по ширине трех.
Модульная система вёрстки — метод, при помощи которого можно структурно упорядочить компоновку всего материала на журнальных страницах, придать соразмерность всем его элементам.
Главная задача, которой отвечает данная 12-колоночная модульная сетка, является нахождение естественного месторасположения для всех требуемых компонентов дизайна для того, чтобы общая композиция была гармонична и приятна по восприятию. И нет никакого противоречия со свободой в творчестве: правильная модульная сетка — это основа хорошего дизайна.
Эта модель 12-колоночной модульной сетки применялась также в других журналах. В каждом журнале модель сетки адаптировалась для конкретных целей и макетов, но принцип вёрстки оставался прежним — построение красивой и грамотной композиции по модульной сетке.
Интересно, применима ли модульная сетка в детском журнале? Об этом можно прочитать в части 2.
Заметили что-то несуразное, оставьте заметку на полях. Вопросы? Комментарии? Напишите внизу.
You can read English version here >
Спасибо. Если интересно, то здесь следующий рассказ о технике Diotone: Great Design Solutions.
И последнее.
Если понравилась статья, кликните 💚 — в пользу читателей Medium.
