Модульная сетка. Использование шаблонов при создании макетов книг

Содержание:

Что такое модульная сетка?

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

Модулем можно назвать единицу измерения, создаваемую для придания соразмерности и пропорциональности.

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

Плитка в ванной комнате, тоже, вся стена модульная сетка (при условии, что вся плитка одного размера), а одна плитка — это модуль или единица измерения как в нашем случае.

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

Для чего нужна сетка, и какие задачи она выполняет?

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

• Ускоряет процесс разработки. Нам требуется гораздо меньше времени на подборку места для блоков в макете.
• Помогает в позиционирование. Все элементы выравниваются относительно друг друга по сетке, и позиционирование занимает минимум времени.
• Позволяет шаблонизировать. Разработав модульную сетку, мы создаем шаблонную основу для всего проекта, как при разработке, так и для решений на будущее. А также предоставляем возможности быстрой модификации.
• Исключает ошибки. Сетка позволяет избежать ряда самых обычных ошибок с позиционированием, структурированием, размерами и отступами между блоков.
• Является единой системой пропорций. Благодаря модулям все элементы в макете пропорциональны и соизмеримы между собой.
• Структурирует и упорядочивает. Благодаря модульной сетке макет становится более структурированный и упорядоченный, дизайн воспринимается более комфортным.
• Приводит к более эстетичному виду. Четкая и логическая структура получаемого сайта придает более эстетичный вид.
• Помогает в дальнейшей разработке другим участникам проекта. Дизайн, построенный посредством модульной системы верстки, верстать значительно легче, нежели макет, построенный без сетки. Сетка дает верстальщику стандартизацию решений, ускоряет процесс верстки. Позволяет легче работать большой команде над масштабными проектами. А также позволяет гораздо быстрее разобраться в макете новым разработчикам участникам проекта. Что в свою очередь приводит к получению более целостного результата работы.

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

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

Минимальным разрешением чаще всего принимаются разрешения монитора в 1024х768 и 1280х720 пикселей. Конечно, могут быть выбраны и другие разрешения, все как всегда зависит от стоящей перед Вами задачи. Исходя из этих параметров, нам и придется создавать размеры макета сайта. Из них нам наиболее важна ширина, так как она зачастую фиксирована у сайтов, а высота наоборот варьирует из-за наполнения сайта.

В данном случае я создам холст с шириной в 1000 пикселей под минимальное разрешение в 1024х768 пикселей. Контентную часть сделаю в 960 пикселей, по 20 пикселей отступы по краям (ширина наших полей).

Создаем шрифтовую сетку.

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

Межстрочный интервал ( в css line‑height) можно рассчитать двумя способами:

1. Размер основного шрифта для контента (16пт.) / 2 + размер основного шрифта для контента (16пт.) = 24пт.
2. Размер основного шрифта для контента (16пт.) x 1.5 = 24пт.

Строим вертикальное членение или колоночную сетку

Теперь самое интересное, нам необходимо создать колоночную сетку. Ширина колонки определяет ширину нашего модуля. Итак, нам необходимо определить эту самую ширину, как это можно сделать.

1. Если на сайте планируется присутствие блока с постоянной величиной (баннера, видео, иллюстрации и т.д.). Эти блоки имеют фиксированные размеры и зачастую включают в себя несколько модулей. Таким образом, зная их размер, мы можем с легкостью определить ширину модуля, достаточно понимать, что блок должен находиться в пределах ширины модулей.
2. Второй способ — это когда у Вас есть конкретные задачи, на которые можно опираться. Например, по задаче стоит расположить в линию на всю ширину тела сайта определенное количество блоков, скажем 6. Тогда, зная этот параметр, мы можем прикинуть, что один такой блок включает в себя два модуля по ширине. Соответственно нам подойдет 12 колоночная сетка.

Дополнительно нам необходимо определить расстояние между модулями или колонками. Я в основном использую размер строки шрифтовой сетки, в данном случае это 18 пикселей.

Таким образом, у нас получается ширина модуля равная 63,5 округлим до 63 пикселей. У нас остается по 0,5 пикселей на каждый модуль их у нас 12 итого 6 пикселей, раскидаем их на поля по 3 пикселя, тем самым наши поля увеличатся и станут равные 23 пикселям, а не 20, соответственно и контентная часть станет равная 954 пикселей.

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

Делаем горизонтальное членение

Тут все просто берем несколько строк и объединяем их в одну линию, далее пропускаем одну строчку и снова объединяем несколько строк. В нашем случае я буду объединять по три. Все линии создаются в полупрозрачном виде, тем самым в местах их пересечения образуются квадраты, которые и будут нашими модулями. Вот в принципе и все модульная сетка создана.

Создаем прототип макета.

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

Оформляем, детализируем, прорабатываем.

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

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

Появление модульной сетки

Итак, рассмотрим сетку журнала Свет Евангелия, который издавался ежеквартально в течение 20 лет (с 1990 по 2010 годы) в Ровно (Украина).

Как и многие печатные издания, журнал СЕ создавался на базе модульной сетки. Но с 1990 по 1993 годы в журнале не было компьютерного макета. Сейчас даже трудно представить себе, что тогда журнал делался, в общем-то, почти вручную. Хотя в редакции уже были первые компьютеры, и даже лазерный принтер имелся. Но набирали и распечатывали только текстовые полосы. Макет журнала выклеивался вручную — с помощью бумаги, клея и ножниц — заголовки, рисунки, текстовые полосы. И все-все страницы технический редактор (т.е. я) вымеряла линейкой по миллиметрам…

В 1994 году редакция приобрела программу Adobe PageMaker 5.0. Технический редактор Вера Фесянова и дизайнер Олег Моргун разработали компьютерный макет журнала СЕ с трех-колоночной модульной сеткой.

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

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

Журнал развивался, и нам хотелось, чтобы дизайн становился лучше, более динамичным. На некоторых разворотах мы размещали разноплановые материалы, объединенные одной темой. Например, новости из разных мест. И нужно было их размещать так, чтобы текст из разных материалов визуально разделялся. Мы пробовали 6-колоночную сетку, но она не отвечала поставленной задаче.

Эврика

И тогда (в 1998 году) нашему техническому редактору Вере Фесяновой пришла мысль сделать 12 колонок на странице. И это оказалось очень удачной идеей. Мы получили гибкий макет с функциональной моделью модульной сетки для большого количества разной информации и элементов.

В этой модульной сетке легко позиционировать и выравнивать элементы дизайна:

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

b. соблюдаются равномерные интервалы между элементами.

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

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

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

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

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

Эта модель 12-колоночной модульной сетки применялась также в других журналах. В каждом журнале модель сетки адаптировалась для конкретных целей и макетов, но принцип вёрстки оставался прежним — построение красивой и грамотной композиции по модульной сетке.

Теперь давайте посмотрим, как 12-колоночная модульная сетка была адаптирована для детского журнала Ноев ковчег (Noah’s Ark), который издается в Ровно (Украина).

Ноев Ковчег — детский журнал, полный историй — сказки, стихи, рассказы и многое другое. Все красиво написано и проиллюстрировано. Есть и головоломки, поделки, эксперименты, игры и приключения!
Начиная журнал для детей, мы спросили себя: нужно ли использовать модульную сетку в журнале или полностью отказаться от нее? Это ведь детский журнал! Но ответ был: да, сетка очень важна. Макет страницы, как правило, включает в себя много элементов для размещения, упорядочевания и форматирования. И риск того, что использование методики свободного дизайна, без четкой сетки, может привести к отсутствию визуального баланса на страницах издания, очень велик.

В 1990 году журнал НК выходил 6 раз в год на русском языке, в черно-белом варианте формата А5. С 1990 по 1993 у Ноева ковчега также не было компьютерного макета, и журнал делался почти вручную. Набирали и распечатывали только текстовые полосы, которые, как и рисунки, наклеивали на бумажный макет журнала… В 1994 году дизайн издания был пересмотрен, и журнал был стал выходить ежеквартально в полноцвете, объемом 48 страниц, формат 20 х 28 см.

В 1994 году технический редактор Вера Фесянова создала в программе QuarkXPress первый компьютерный макет Ноева ковчега, в котором в зависимости от материала использовалась 2-х или 3-х колоночная сетка.

Начиная с 1999 года, технический редактор Вера Фесянова также стала применять 12-колоночную модульную сетку в журнале Ноев ковчег. Верстка выполнялась в программе QuarkXPress, а с 2011 года — в программе Adobe InDesign CS5.

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

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