Модульная сетка. От слов к делу
Автор Йозеф Мюллер-Брокманн (1914–1996) - графический дизайнер и преподаватель. Его работы являются образцом простоты в дизайне и тонкого использования типографики, формы, цвета. Они оказали влияние на многих современных дизайнеров.
На сайте Студии Лебедева написано, что книги нет в продаже. Советую заглянуть в один из официальных магазинов .
Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.
Купил, прочитал книгу. Поделюсь впечатлениями и интересными идеями.
На каждую тему представлены примеры макетов. Так как по размерам книга чуть больше листа А4, иллюстрации большие и подробные.
Примеры страниц с использованием модульной сетки Дизайнеру на заметку
Йозеф описывает процесс работы над вёрсткой плаката, макета страницы книги и журнала. Часть посвящена вопросам типографики, так как она влияет на восприятие. Дизайнеру необходимо уметь разбираться в этих тонкостях, чтобы успешно выполнять свою работу.
Про сетки
Модульная система помогает дизайнеру рационально скомпоновать элементы на странице, но важно помнить: сначала содержание, а потом сетка.
Понравилось?
Расскажи
Представьте, что к вам должны прийти гости, а у вас по квартире разбросаны вещи. Как вы думаете, каким образом можно быстро «прибраться», если времени на уборку нет? Ответ прост: нужно разложить вещи небольшими кучками. Это сразу создаст ощущение порядка, квартира будет выглядеть убранной.
Модульная сетка, которая представляет собой набор направляющих, работает аналогичным образом. Направляющие (обычно вертикальные и горизонтальные) образуют некий каркас. Допустим, такой:
Да, правил нет, но есть здравый смысл. Говоря иначе, сначала нужно подумать, для чего нужна сетка, и только потом уже ее строить. Например, нарисованный выше каркас может послужить отличным полем для игры в крестики-нолики;)
Кстати, результатом использования сетки может быть... сама сетка. В качестве примера можно привести картины Пита Мондриана, который строил композиции на основе свободно сконструированной и заполнявшей холст пространственной сетки.
Ярким примером промежуточного варианта, когда сетка одновременно является частью дизайна и решает конкретную задачу, служит интерфейс мобильной операционной системы Windows Phone.
Итак, на что же можно и нужно опираться при создании модульной сетки?
Построение модульной сетки
Достаточно часто в статьях про модульные сетки можно встретить предложение, которое звучит следующим образом:
Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.
На первый взгляд, вроде бы все верно: сетка — это, прежде всего, рабочий инструмент, который не имеет смысла без инструкции по использованию, описывающей расположение основных элементов (текста, изображений и т. д.).
Однако, как показывает практика, возможны и имеют место быть оба варианта:
- Дизайн вписывается в сетку;
- Сетка создается под дизайн.
Рассмотрим каждый из них по отдельности.
Пример первый: нужно создать дизайн сайта для научного журнала. При этом клиент хочет, чтобы журнал был «лицом» сайта и просит поместить его на главной странице. Обложка выглядит, мягко говоря, не очень хорошо:
Не будем обсуждать художественную ценность данной обложки. Сосредоточимся лучше на исполнении — оно явно хромает:
- Ощущение, что элементы «набросаны» на плоскость страницы наспех, их позиции ничем не обоснованы;
- Размеры в макете несоизмеримы и непропорциональны, непонятно, чем обусловлен тот или иной размер;
- Акцентов нет, поля узкие, объекты конфликтуют друг с другом, взгляд блуждает по обложке;
- Неграмотная работа с текстом, как в плане шрифтов (автор насчитал минимум 5), так и в плане типографики (в списке ключевых статей «дыры» между отдельными пунктами);
- «Грязные» цвета.
Очевидно, что какой бы хороший дизайн сайта мы не придумали, такая обложка сведет его на «нет». Её нужно довести до ума и в этом нам поможет сетка. Возьмем за основу высоту бордовой полосы (7 мм) и нарисуем сетку с аналогичным шагом по вертикали и горизонтали. Кстати, верхняя и нижняя полосы удивительным образом в нее «попадают».
Сетка наглядно демонстрирует всю плачевность ситуации: объекты не выровнены относительно друг друга, имеют непонятные размеры, в общем, «кто в лес, кто по дрова».
Для наведения порядка впишем дизайн в сетку, только учтем один небольшой нюанс. Отдельно взятые элементы (название журнала, логотип APEL, номер) имеют избыточный размер, из-за них обложка получается тяжеловесной. Уменьшим шаг сетки на 1 мм, это даст нам в итоге легкий и цельный в восприятии дизайн:
Обложка с сеткой
или без сетки
- Элементы расположены по сетке и соразмерны друг другу, появились хорошие широкие поля;
- Основной акцент выведен на название журнала;
- Поправлены шрифты и типографика, что вкупе с сеткой дает нам законченное решение.
В итоге мы получаем такую вот замечательную картинку для главной страницы сайта:
Двигаемся дальше. В одной из предыдущих статей автор подробно разобрал этапы создания сайта-визитки . Прочитайте ее, если еще не читали, и обратите внимание, как идет построение дизайна: объекты на странице размещаются последовательно — от общего к частному, от главных элементов к второстепенным.
При таком подходе, когда компоновка определяется задачей, элементы обычно располагаются на странице «на глаз», они, пусть и не сильно, но «пляшут» относительно друг друга. Опять-таки непонятно, на что ориентироваться при выборе размера картинок, блоков текста и т. д. В такой ситуации нам вновь поможет вписывание дизайна в сетку.
Модульная
сетка - э
то
кратно повторяемый рисунок, узор, размер
или пропорция. Вспомните картинки Эшера.
Ящерки, рыбки, птицы в некоторых работах
- это и есть модуль. Каждый интернетчик
наблюдает модули в виде бэкграундов.
Первый вариант
применения модулей в дизайне - такой ж
как в инете, то есть фоновый рисунок. В
самых различных формах, как самостоятельный,
так и в различных комбинация. И те же
иллюстрации Эшера.
Второй вариант,
размерный, очень близок к третьему,
пропорциональному. В основном это
модульные сетки для различных типографских
видов печатной продукции.
Третий вариант
более сложен для восприятия, но именно
он и лежит в основе всего дизайна,
архитектуры и прочего, прочего, творимого
природой и человеком. Человек всегда
формировал окружающую среду, интуитивно
руководствуясь чувством пропорции, то
есть соотношений.
Еще
Фидий (создатель Акрополя) и Иктин
(Парфенон) продемонстрировали знание
закона золотого сечения. Суть этого
закона в том, что меньший отрезок
относится к большему, как больший ко
всей длине. Я не помню, изучают ли этот
закон в школе, но в художественных
училищах, художественннных и архитектурных
институтах это как "Отче наш..."
Одним числом это значение выражается
как 1,618..... алгебраически выглядит
a:b=b:(a+b). Суть в том, что подобное соотношение
благоприятно глазу в силу психических
и физических особенностей строения
глаза, рабочих частот мозга и много,
много...(Рисунок 4.2.)
Вторым активным
элементом построениея каких-то зрительно
благоприятных соотношений является
квадрат. Путем построений из него легко
получать соотношения 1:2, 2:3, 3:4.
Рисунок 4.2.
Рисунок 4.3.
Для
веба модульное построение страницы
может быть организовано с помощью
таблиц. В качестве модуля можно принимать
соотношение сторон экрана (при 800х600 это
составляет 4:3) (Рисунок 4.3.). Стандартный
размер листа бумаги A4 так же является
модулем в черчении и типографике
Подавляющее число
типографских сеток строится на базе
формата листа бумаги, взятого за основу
издания. Рисунок сетки зависит от
содержания и замысла проекта, а так же
индивидуального стиля того или иного
художника. А если проектирование
выполняется с помощью компьютера, то
процесс становится достаточно быстрым,
особенно в стадии реализации. Большинство
графических (в основном - паблишерных)
программ имеет встроенные опции
построения модульной сетки, и почти все
они же имеют достаточно большой набор
заготовок модульных сеток под вполне
обычными фамилиями "Буклет",
"Календарь" и пр.
На
рисунке 4.4. представлена
модульная сетка первой полосы. Она
немного отличается от общей модульной
сетки верхним блоком. Для более четкого
восприятия логотипа его пришлось
выделить весьма значительными паузами.
Но зато с его прочтением и выделением
нет никаких проблем.
Рисунок 4.4.
Рисунок
4.5. Модульная сетка остальных полос
Как
видим, кроме четко определенного верхнего
блока полосы имеют четко выраженный
"подвал" - так газетчики называют
нижнюю часть полосы. Он помогает разделить
информацию на полосе на тематические
зоны. Схема модулирования полосы видна
на двух цветных схемах.
Не всегда модульная
сетка такая уж равномерная и симметричная.
Она может быть и абсолютно абстрактной,
с произвольным размещением элементов,
но в любом случае ее задача - обеспечить
преемственность подачи материала.
Модули
используют и архитекторы, и
дизайнеры-мебельщики, и разработчики
автомобилей, у них модуль привязан к
пропорциям и размерам тела человека.
Рисунок 4.6.
В
веб-дизайне модульная сетка применяется
гораздо чаще, чем может показаться на
первый взгляд. Если вы используете
для формирования элементов на
странице - вы уже используете модульную
сетку, особенно если вы повторяете эту
сетку не на одной странице, а на нескольких.
Иногда сетка может быть скрытой, иногда
явной (когда вы в качестве фона ячейки
используете другой цвет, отличный от
основного фона) (Рисунок 4.6.)Следует добавить,
что суть сетки та же, за исключением
того, что в вебовской сетке могут
присутствовать динамические (изменяемые)
параметры ячеек. Страница может быть
разной по высоте, что зависит от количества
текста и картинок на ней, и автоматически
раздвигаться (или не раздвигаться) в
зависимости от используемого разрешения
монитора.
Размеры экрана
С
Ширина
канвы
ледует избегать жестко заданных
размеров экрана, но если вы все же задали
жестко, необходимо учитывать, что задание
жестких параметров определяется
размерами канвы.
Разрешение
экрана
|
|
|
|
|
Размеры
канвы
|
|
|
|
|
Размер экрана
можно определить с помощью простых
программ (см. лабораторный практикум).
Рассмотрим пример
модульной сетки и задания размеров,
организованных с помощью таблицы
В
HTML
можно все содержание таблицы обозначить
тегом
.
Тогда заголовок таблицы обозначается
тегом
а заключение тегом .Все
три тега закрывающееся и имеют атрибуты.
Для ячеек заголовка таблицы используется
тег .заготовка
страницы
заголовок | меню | модуль1 | модуль2 | модуль3 | модуль4 |
заключение | Тем не менее, самый
простой способ не зависеть от размеров
канвы – применять относительные размеры,
то есть задавать размеры в %.
Модульная сетка
- это система организации объектов в пространстве, основанная на рядах и колонках определенного, строго заданного размера. В ячейках можно располагать единицы контента: текстовые блоки, заголовки, врезки и изображения. Сетки можно встретить не только в информационном дизайне, но и в архитектуре, в интерьерах и в градостроительстве. Во всех этих областях сетки строятся по схожим принципам, связанным со стремлением привнести в расчерчиваемое пространство порядок и гармонию. Обратите внимание на один из эскизов развития Манхэттена 1807 года, который подчиняется строгой сетке улиц, проходящих с запада на восток и с севера на юг Зачем нужны сетки?
Изначально сетка применялась в газетном деле в целях повышения эффективности. Макетные листы позволяли снизить издержки на содержание штатных типографов, стандартизируя вид страниц и экономя время самих «художников-оформителей». Вскоре на смену макетным листам пришли более гибкие модульные сетки. Следуя новым веянием, в начале 1960-х художник-оформитель Питер Палаццо обновил дизайн газеты New York Herald Tribune. В 1966-м художественный редактор Джанет Коллинз ввела новую верстку в лондонской Times. Оба этих преобразования показали работникам индустрии, что единый стиль оформления повышает качество взаимодействия читателей с изданием. Газетчики и редакции журналов быстро поняли необходимость сеток и начали применять их в своей практике. Как и во времена газет, в digital-эпоху правильно примененные сетки помогают удерживать внимание читателя, повышают качество восприятия текста и вообще улучшают опыт его взаимодействия с материалом. Сегодня в дизайне медиа сетка придает информации упорядоченность и согласованность. Она ответственна за структурирование содержимого отдельных статей и издания в целом. Йозеф Мюллер-Брокманн
в своем пособии «Модульные системы в графическом дизайне » пишет о сетках так: «Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. <…> Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».
Какими бывают сетки?
Существует множество видов и конфигураций сеток: от примитивных «клеточек», как в школьной тетради, до сложносочиненных структур с разными расстояниями между горизонталями и вертикалями. Мы собрали наиболее распространенные и ставшие уже «классическими» образцы, знакомство с которыми поможет лучше понять модульное проектирование: Квадратная сеткаПростейшая сетка, которая легла в основу модульной системы, состояла из квадратов и была похожа на обычную разграфленную таблицу. Она начала использоваться уже в конце первой четверти ХХ века. Дизайнеры-типографы из Цюриха и Базеля усовершенствовали ее в послевоенные годы, что совпало со скачком интереса к Гельветике и подобным ей шрифтам, породив школу «швейцарской типографики ». На примере:
Роберт Бюхлер, 1914 г. Источник: Thinking Form Cетки Макса БиллаПервым опытом применения сетки в книжном деле была разработанная Максом Биллом система для книги «Die Neue Architektur». В этой книге, вышедшей в 1940 году, Альфред Рот применил деление страницы на девять горизонтальных модулей. Они позволили свободно располагать иллюстрации и размещать на них текст на трех языках. Несколькими годами ранее, опираясь на идеи «новой типографики» Баухауса, Билл использовал шестимодульную сетку в своем знаменитом плакате «Negerkunst », созданном для выставки южноафриканской наскальной живописи в 1931 году.
Что такое модульная сетка.
Модульная сетка это система построения визуальной информации на основе блоков – модулей.
(function(w, d, n, s, t) {
w[n] = w[n] || ;
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-269783-9",
renderTo: "yandex_rtb_R-A-269783-9",
async: true
});
});
t = d.getElementsByTagName("script");
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks"); Модуль.
Основой модульной сетки является модуль. Модуль происходит от латинского слова modulus – “маленькая мера”. Модулем может выступать любая мера длины, площади или объёма взятая за единицу модульной сетки. Из истории.
Римский зодчий, Витрувий, в Iвеке до н.э. писал о важности пропорций при построении целого. Стоит ли говорить о возрасте модульной сетки? Она в буквальном смысле стара как мир. Мы можем видеть пропорциональное модульное деление в древнегреческой архитектуре, когда за основу брался радиус или диаметр колонны и на основе этого деления возводились храмы и сооружения, некоторые из которых сохранились и по сей день. Для чего нужна модульная сетка.
Модульная сетка позволяет логически структурировать информацию, облегчая тем самым её восприятие. Правильно построенная сетка позволяет легко справиться с вёрсткой как многостраничных изданий так и небольших одностраничных рекламных макетов. Как правило, ясный и собранный макет оставляет правильное, положительное впечатление. Чёткое и законченное композиционное изложение информации, эстетически более логичное, чем хаотичное. Использование модульной сетки позволяет целиком сосредоточится на информации. Построение модульной сетки.
Модуль может быть размером в 2 квадратных метра, 3 на 3 миллиметра или 12 на 12 пикселей. Всё зависит от той системы измерений в которой мы его используем. В веб-дизайне в основном используются модули размером 12, 16 или 24 px. Некоторые рекомендуют брать за основу межстрочное расстояние, что в принципе тоже логично. Модульные сетки могут быть абсолютно разными. Наиболее примитивной будет сетка состоящая из одинаковых квадратов выстроенных вплотную. Более сложные модульные сетки используют большее количество элементов. К примеру мы берём за основу модуль Х и получаем сетку с шагом 3Х по горизонтали и 4Х по вертикали. При этом как вертикальные так и горизонтальные блоки разделяются между собой модулем Х. Нетрудно угадать какой вариант вам понравился, мне лично нравиться первый, тот что слева. У него более явная и чёткая структура. Его найдут более интересным и правильным большая часть людей. Несмотря на то что информация содержится одна и та же, подана она по-разному, а поэтому впечатления после увиденного остаются совершенно разные. Модульная сетка в айдентике.
Использование модульной сетки в айдентике давно уже стало стандартом. Модульное построение используют начиная с разработки визиток и заканчивают разрабатывая билборды. Использование одной и той же модульной сетки в различных рекламных продуктах создаёт ощущение целостности и единства для всего бренда. Типографская сетка в журналах и газетах
(function(w, d, n, s, t) {
w[n] = w[n] || ;
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-269783-10",
renderTo: "yandex_rtb_R-A-269783-10",
async: true
});
});
t = d.getElementsByTagName("script");
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks"); Типографская сетка является скорее разновидностью модульной сетки из-за специфических особенностей типографского дела. Журналы просто не могут обойтись без сетки. Чёткая и лаконичная структура притягивает взгляд и облегчает чтение больших объёмов информации. Модульная сетка не является чем-то обязательным и её использование также дело личных предпочтений и вкусов. Использовать её можно по-разному. На рисунке 5 вы видите отличный пример использования модульной сетки и сознательное нарушение её границ, что в свою очередь смотрится довольно интересно и заметно оживляет весь разворот. Редакторы газет одни из первых оценили все прелести модульной вёрстки и на протяжении длительного времени облик газеты незначительно изменился. Мы можем взять в руки газету вековой давности и сравнить её с современной, я думаю что общие черты не претерпели сильных изменений. Построение модульной сетки в
Corel
Draw
.
Есть несколько вариантов использования сетки в кореле. Первый это при помощи стандартной сетки. Она отмечена иконкой под номером 1. Нажимая на эту иконку мы активируем сетку. Вы также можете поставить привязку к этой сетке или настроить её по своему желанию. Второй способ это построение сетки при помощи направляющих. Мы можем сделать направляющие видимыми или невидимыми с помощью иконки под номером 2. Пример модульной сетки на основе направляющих в кореле на рисунке 4. Здесь модуль размером 5 миллиметров. С помощью него мы построили более сложную сетку. Вы можете придумать свой способ, главное чтобы он помогал вам в упорядочивании информации. Использование модульной сетки в
Adobe
Photoshop
.
Аналогично сетка строиться и в фотошопе. Но здесь дизайнеры пошли дальше и сейчас можно скачать различные плагины для построения модульной сетки с заданными параметрами. Это значительно облегчает и упрощает создание лаконичных дизайн-макетов.
(function(w, d, n, s, t) {
w[n] = w[n] || ;
w[n].push(function() {
Ya.Context.AdvManager.render({
blockId: "R-A-269783-11",
renderTo: "yandex_rtb_R-A-269783-11",
async: true
});
});
t = d.getElementsByTagName("script");
s = d.createElement("script");
s.type = "text/javascript";
s.src = "//an.yandex.ru/system/context.js";
s.async = true;
t.parentNode.insertBefore(s, t);
})(this, this.document, "yandexContextAsyncCallbacks"); Выводы.
Модульная сетка используется повсеместно. Её значение велико, а возможности нельзя недооценивать. Хотя во многих проектах можно обойтись банальным выравниванием, этот инструмент нужно отнести к разряду обязательных в вашем арсенале, если хотите делать качественный дизайн.
|