Поговорим о том, как лучше располагать элементы дизайна на странице.
Одна из распространенных ошибок начинающих дизайнеров состоит в том, что они перенасыщают композицию всевозможными элементами и располагают их слишком близко друг к другу.
Они пытаются разместить слишком много информации в маленьком пространстве. Запомните, что свободное пространство — ваш добрый друг
. Оно облегчает аудитории процесс чтения вашего материала. Правильно использованное пространство делает ваш проект более изящным и легким для восприятия.
.
Вот несколько примеров модульных сеток.
Обратите внимание, насколько разнообразными и уникальными они могут быть.
Для того, чтобы продемонстрировать необходимость использования модульной сетки, здесь я привожу три варианта одной и той же работы.
Два первых варианта — с четко разработанной модульной сеткой, а последний — без.
Пример 1
Пример 2
Пример 3
Посмотрите внимательно на эти примеры и, что называется, почувствуйте разницу. Там, где элементы дизайна расположены в соответствии с модульной сеткой, чувствуется порядок и осмысленность композиции. А вот в последнем варианте без модульной сетки, элементы расположены хаотично и, соответственно, нарушают принципы выравнивания, единства и соответствия.
В композиции первых двух изображений используется традиционная модульная сетка. В первом изображении линии расположены горизонтально и вертикально
с равными промежутками.
Отличие второго варианта лишь в том, что линии расположены наклонно
. Все элементы композиции привязаны к этим наклонным линиям.
А вот в последнем примере вообще нет никакой модульной сетки
. Интервалы между графическими элементами абсолютно случайны и поэтому в композиции отсутствует ощущение единства.
Мой аам совет: всегда используйте модульную сетку
для построения красивой и грамотной композиции (ну, конечно, если вы не занимаетесь искусством в чистом виде, где, как известно, нет никаких правил)!
Предвкушаю ваш вопрос: Неужели ты, Боб, каждый раз выстраиваешь модульную сетку, прежде чем приступить к работе. И не лень тебе?
Честно говоря — не всегда, хотя и стараюсь. Но на начальных этапах своей дизайнерской деятельности я не пренебрегал этим важным правилом и добросовестно выстраивал модульную сетку. По мере накопления опыта, вы научитесь работать с воображаемой сеткой без необходимости чертить её на странице, и любое отклонение от задуманной разметки будет заметно аашему взгляду.
Тем не менее, в процессе работы, при необходимости, можно и нарушить структуру модульной сетки. В конце концов, мы ведь , а не математики. Такое нарушение иногда придает работе легкости и свободы выражения. Надо лишь помнить, что эта свобода не должна разрушить общей структуры композиции.
Итак, какие преимущества дает нам модульная сетка?
1. Модульная сетка помогает нам соблюдать один из основных принципов дизайна — принцип выравнивания. Отдельные элементы могут быть ни к чему и не привязаны, но желательно, чтобы элементы находящиеся в группе, были выровнены по отношению друг к другу, а группа элементов — по отношению к другим группам.
2. Модульная сетка помогает соблюдать равномерные интервалы между элементами.
3. Модульная сетка помогает рационально использовать свободное пространство, которое облегчает чтение текста и восприятие всей композиции.
Теперь пример из практики.
Представьте, что ваш заказчик просит вас сделать брошюру из 50 страниц. Вы выполняете работу по всем правилам хорошего дизайна. Страницы брошюры имеют красивую модульную сетку, много свободного места и читать их легко и приятно.
Но заказчик, не понимая подобной эстетики, видит лишь незаполненное свободное пространство и, не желая платить за чистую бумагу, просит впихнуть туда ещё 10 страниц. Как же тогда быть?
Попробуйте объяснить заказчику, что страницы, плотно заполненные содержанием, малопривлекательны и трудны для восприятия, и вряд ли аудитория захочет тратить время на их чтение.
Если заказчик этого не понимает, то предложите ему показать оба варианта своим друзьям и спросить их мнения. Если же ни что не смогло его вразумить, то увы, вам не остается ничего другого, как удовлетворить его желание. Кстати, о подобной ситуации я уже рассуждал в своей статье « »
В завершение дам вам совет.
Не перегружайте свой дизайн!
Свободное пространство и поля на странице важны и необходимы для зрительного восприятия. Помните, что задача хорошего дизайна — быстрая передача необходимой информации, поэтому дизайн должен не препятствовать, а помогать усвоению этой информации.
Если страница перегружена информацией и нет четкого разделения элементов на группы, зрителю будет трудно сконцентрироваться на главном и, скорее всего, у него не возникнет желания разбираться во всей этой путанице.
Напротив, когда в основе дизайна лежит малое количество элементов, имеющих четкую структуру композиции, зрителю будет легко и комфортно, и он быстро усвоит необходимую информацию.
Модульная сетка - это особый шаблон, по которому и строится дизайн сайта. По сути, это система представления визуальной информации посетителю на основе отдельных блоков, называемых модулями. Сайт, разработанный с использованием такого шаблона, гораздо удобнее для восприятия и навигации.
Как применяется сетка
Модульная сетка используется при разработке дизайнов книг, визиток, товарных знаков, логотипов и т. д. Обязательно ее применение и при создании сайтов. Правильно сделанная сетка гармонично компонует среду для всех элементов ресурса - графических и текстовых. С ее использованием гораздо проще разместить их все на странице и создать между ними четкие границы. Расположив определенным образом элементы, можно сделать каждый из них заметным и при этом связать воедино всю информацию о самом сайте.
Виды модульных сеток
Самая распространенная модульная сетка в дизайне страниц - это три базовые колонки ячейки. При этом верхний и нижний колонтитулы имеют ширину, равную их размерам. Этот стандартный вариант обычно используют любители при создании сайтов. Иногда при этом ширина одной ячейки увеличивается за счет ширины другой.
Создание второго варианта модульных сеток - нестандартных - под силу только людям, занимающимся веб-дизайном профессионально. В этом случае точно определены лишь ширина колонок и расстояние между отдельными элементами. Модульная сетка в дизайне разного рода новостных ресурсов и интернет-журналов разрабатывается обычно следующим образом:
- Создается колонтитул. Здесь должны быть расположены название сайта, навигационное меню, разного рода видеоматериалы.
- Страница разбивается на три колонки. При этом две из них имеют одинаковые размеры. Третья колонка делится на две части вертикальной линией. Таким образом, получаются четыре раздела (новостной, фотогалерея, место для рекламы, последние информационные изменения на сайте).
Модульная сетка для интернет-магазинов разной специализации создается несколько по-другому. В этом случае очень важно обеспечить удобство навигации посетителям. Группируются при этом элементы стандартно и единообразно. Для каждого из объектов в сетке выделяется важная информация, характеризующая его.
Линейка в редакторе «Фотошоп»
Сайты создаются с использованием растровых или векторных Сетку в них создавать очень удобно. Рассмотрим, как это делается в популярном редакторе Photoshop. Создается модульная сетка в «Фотошопе» очень просто.
Для того чтобы по периметру рабочего окна изображения появились линейки, следует пройти в пункт главного меню «Просмотр» (View) и нажать на строку «Линейки» (Rulers). В этом редакторе можно использовать самые разные элементы - с делениями в сантиметрах, миллиметрах, дюймах или пикселях. Для того чтобы выполнить необходимую настройку, следует пройти в пункт главного меню «Редактирование» (Edit). Далее выбрать строку «Установки» (Preferences) - «Единицы измерения&Линейки» (Units&Rulers). После этого высветится окошко, в котором и можно изменить вид линейки. В верхнем выпадающем меню выбирают сантиметры, миллиметры, пиксели и т. д.
Однако обычно при работе в редакторе «Фотошоп» используют немного другой, более простой способ. Для изменения единиц измерения следует просто нажать на саму линейку в окне изображения правой кнопкой мыши. После этого в появившемся меню можно будет произвести нужное действие. Обычно при создании сайта используется сетка в пикселях.
Сетка Photoshop
Сама модульная сетка программы «Фотошоп» станет видимой после того, как вы перейдете по пункту главного меню «Просмотр» - «Показать» (Show) - «Сетка» (Grid). Шаг между линиями сетки можно настраивать. Для этого следует выполнить команду «Редактирование» - «Установки» - «Направляющие, сетки и фрагменты» (Guides, Grid, Slices). Здесь можно изменить не только шаг между линиями, но и их цвет. Используя эту сетку, быстро и точно размещать по рабочему полю все объекты будущего сайта будет совершенно несложно.
Работа с курсором
Модульная сетка сайта создается таким образом очень просто. Курсор при работе прилипает к линиям. Это может быть удобным в том случае, если необходимо сделать блоки точных, определенных размеров. Если же эта функция по каким-либо причинам окажется ненужной, ее можно отключить. По умолчанию начало координат сетки в «Фотошопе» располагается в верхнем левом углу окна. При желании его можно переместить в любое другое место холста. Для этого наводят курсор на квадратик начала координат и просто перетаскивают его, удерживая кнопку мыши. Для возврата точки отсчета на место следует дважды кликнуть на том же квадратике в углу.
Помимо всего прочего, имеются разного рода плагины для редактора «Фотошоп», позволяющие сделать создание сайта с использованием модульной сетки еще более удобным. Скачивают их в сети. С использованием этих плагинов можно создавать сетки с заданными параметрами.
Сетка в CorelDraw
Теперь посмотрим, как сделать модульную сетку в векторном редакторе CorelDraw. Здесь она создается примерно так же, как и в «Фотошопе». Иконка ее расположена на верхней панели (глаз в сетке). После нажатия на нее можно будет выполнить все необходимые настройки. Допускается выбор расстояния между линиями, изменение единицы измерения и т. д. Разграничивают рабочее поле в окне изображения в CorelDraw и с помощью направляющих. Их при необходимости можно сделать видимыми или невидимыми.
Модульная сетка в дизайне сайта - основополагающий элемент, к разработке которого стоит подходить с максимальной ответственностью. Ведь от того, насколько правильно будет структурирован ресурс, зависит удобство его посетителей, а значит и время, проведенное ими на его страницах.
Автор Йозеф Мюллер-Брокманн (1914–1996) - графический дизайнер и преподаватель. Его работы являются образцом простоты в дизайне и тонкого использования типографики, формы, цвета. Они оказали влияние на многих современных дизайнеров.
На сайте Студии Лебедева написано, что книги нет в продаже. Советую заглянуть в один из официальных магазинов .
Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.
Купил, прочитал книгу. Поделюсь впечатлениями и интересными идеями.
На каждую тему представлены примеры макетов. Так как по размерам книга чуть больше листа А4, иллюстрации большие и подробные.
Примеры страниц с использованием модульной сетки Дизайнеру на заметку
Йозеф описывает процесс работы над вёрсткой плаката, макета страницы книги и журнала. Часть посвящена вопросам типографики, так как она влияет на восприятие. Дизайнеру необходимо уметь разбираться в этих тонкостях, чтобы успешно выполнять свою работу.
Про сетки
Модульная система помогает дизайнеру рационально скомпоновать элементы на странице, но важно помнить: сначала содержание, а потом сетка.
Понравилось?
Расскажи
Что такое модульная сетка.
Модульная сетка это система построения визуальной информации на основе блоков – модулей.
(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");
Выводы.
Модульная сетка используется повсеместно. Её значение велико, а возможности нельзя недооценивать.
Хотя во многих проектах можно обойтись банальным выравниванием, этот инструмент нужно отнести к разряду обязательных в вашем арсенале, если хотите делать качественный дизайн.
О чем молчат типографии -
22 ноября 2015 Воскресенье
Модульная сетка: инструмент грамотного дизайна
Что такое модульная сетка?
Это невидимый скелет вашего дизайна - система горизонтальных и вертикальных (а порой еще диагональных и дуговых) направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции.
Какая от нее польза?
Во-первых, модульная сетка привносит в дизайн порядок, цельность и связь всех его частей. Она позволяет рационально организовать любое графическое пространство, будь то бланк, визитка, постер, книга, сайт, интерьер, сохраняя во всех его элементах единство стиля.
А во-вторых, заметно ускоряет выполнение заказа, ведь, согласитесь, работать по шаблону гораздо легче, чем всякий раз заново изобретать велосипед.
Человек издавна пытался понять природу красоты, "разложить" ее на отдельные составные части, "поверить гармонию алгеброй". Древнейший пример использования модульной сетки - средневековый канон, которым пользовались переписчики книг при разметке книжных страниц.
Разворот латинского манускрипта. 1555
Основы же современного модульного проектирования были заложены конструктивистами 1920-х годов.
Обложка журнала. Дизайн Эль Лисицкого. 1922
Постер. Дизайн Герберта Байера. 1926
Однако не сразу их абстрактные построения были осознаны как метод со своей системой правил и закономерностей. Лишь в 1940 году швейцарский дизайнер Макс Билл впервые применил в книжном оформлении модульную сетку.
Книжный переплет. Дизайн Макса Билла. 1944
Постер. Дизайн Макса Билла. 1945
В 1961 году его соотечественник Йозеф Мюллер-Брокман ввел в употребление первые термины модульного подхода к дизайну и опубликовал 28 примеров разработанных им самим сеток. Именно швейцарская школа дизайна, предельно функциональная и лапидарная, усовершенствовала и подарила миру этот инструмент - модульную сетку.
Сетка и книжные страницы. Дизайн Йозефа Мюллера-Брокмана
Постер. Дизайн Йозефа Мюллера-Брокмана. 1959
Постер. Дизайн Йозефа Мюллера-Брокмана. 1972
Надо сказать, что российские дизайнеры не намного отстали в модульном проектировании от своих западных коллег. Уже в 1960-е годы в Советском Союзе появилась группа единомышленников, использовавших принципы строгого конструирования печатных изданий (впоследствии Сергей Серов в шутку назвал эту школу "советской Швейцарией"). У истоков отечественного модульного подхода к дизайну стояли такие признанные сегодня авторитеты, как Максим Жуков, Михаил Аникст и Аркадий Троянкер.
Книжный переплет. Дизайн Максима Жукова и Аркадия Троянкера. 1970
Книжный разворот. Дизайн Михаила Аникста. 1979
Суперобложка. Дизайн Максима Жукова. 1977
Всего за пару десятилетий был накоплен уникальный опыт и созданы шедевры графического дизайна. Несмотря на это, сегодня, как и 30-40 лет назад, модульную сетку в нашей стране, похоже, по-прежнему продвигают только энтузиасты-одиночки
Обложка буклета. Дизайн Евгения Григорьева. Санкт-Петербург, 2009
Приведем несколько примеров модульного подхода к дизайну из портфолио нашего издательства.
Для каталога художника Евгения Журова был выбран классический книжный формат in quarto с соотношением сторон 3 к 4. Эти пропорции и легли в основу модульной сетки.
Для того чтобы сориентировать на развороте изображения картин, была выделена горизонтальная линия, делящая страницу по вертикали в соотношении 1 к 3. При макетировании каждое изображение располагалось так, чтобы и оно делилось этой линией по вертикали в том же соотношении.
Подобный прием позволил легко и гармонично совмещать друг с другом любые по формату картины - как панорамные, вытянутые по горизонтали, так и высокие, вытянутые по вертикали. При перелистывании каталога живописный ряд приобретает живой, пульсирующий ритм.
Надо ли говорить, что композиции титульного листа и шмуцтитулов, набор вступительной статьи и выходных данных, положение колонцифр на внешних полях страниц также выстраивались с учетом этой горизонтали.
Добавим лишь, что подписи к картинам, напротив, были намеренно сделаны статичными. Они разместились в строго определенных местах и живут как бы отдельно, ничем не отвлекая внимание зрителя от изображений.
Внешний вид нашего тематического календарного каталога был подсказан самим материалом. Этот каталог предназначается для той категории клиентов, которые хотят заказать корпоративный календарь. Каждая тема представлена 12-ю изображениями (по количеству месяцев в году) и помещается на отдельном развороте. Модульная сетка брошюры получилась настолько простая, ясная и открытая, что нет необходимости приводить ее здесь отдельно.
Дизайн открыток из набора "Династия Романовых" (Музеи Московского Кремля), несмотря на ярко выраженную асимметричную композицию, полностью был построен на последовательном делении плоскости по золотому сечению. Совмещение классических, проверенных временем принципов с современными тенденциями порой может привести к интересному результату.
Модульное конструирование просто незаменимо при оформлении серийных изданий. Единожды выстроенная, но хорошо продуманная сетка сильно облегчит работу над новыми выпусками книги, журнала, буклета, газеты. Свободно меняя текст, изображения, цвет, можно без труда получить легко узнаваемый и точно опознаваемый дизайн внутри одной серии.
Необходимо, однако, помнить, что применение модульной сетки не является стопроцентной гарантией удачного дизайна. По одному и тому же шаблону можно создать как произведение искусства, так и посредственную поделку. Каким бы точным, тонким и универсальным инструментом ни была модульная сетка, это всего лишь инструмент, который останется мертвым без фантазии и творческого подхода.
Кроме того, приступая к модульному конструированию, дизайнеру нелишне иметь хотя бы общие представления о пропорциях, форме, цвете, контрасте, ритме…
Но об этом - в следующих наших статьях.
Литература для самообразования:
1. Лаптев В. Модульные сетки: Проектирование многополосных изданий. М.: РИП-холдинг, 2007.
2. Самара Т. Создавая и ломая сетку. М.: РИП-холдинг, 2005.
3. Херлберт А. Сетка: Модульная система конструирования и производства газет, журналов и книг. М.: Книга, 1984.
4. Bosshard H. R. Der typografische Raster. Z?rich: Niggli, 2000.
5. Elam K., Elsener R. Gestaltungsraster: Ordnungssysteme f?r Schrift. New York: Princeton Architectural Press, 2006.
6. Miller-Brockmann J. Grid systems in graphic designs. Z?rich: Niggli, 1981.
