Что такое модульная сетка. Как сделать модульную сетку? Модульные сетки в веб-дизайне Что такое модульная сетка в графическом дизайне

Автор Йозеф Мюллер-Брокманн (1914–1996) - графический дизайнер и преподаватель. Его работы являются образцом простоты в дизайне и тонкого использования типографики, формы, цвета. Они оказали влияние на многих современных дизайнеров.

На сайте Студии Лебедева написано, что книги нет в продаже. Советую заглянуть в один из официальных магазинов . Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.

Купил, прочитал книгу. Поделюсь впечатлениями и интересными идеями.

На каждую тему представлены примеры макетов. Так как по размерам книга чуть больше листа А4, иллюстрации большие и подробные.

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

Дизайнеру на заметку

Йозеф описывает процесс работы над вёрсткой плаката, макета страницы книги и журнала. Часть посвящена вопросам типографики, так как она влияет на восприятие. Дизайнеру необходимо уметь разбираться в этих тонкостях, чтобы успешно выполнять свою работу.

Про сетки

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

Понравилось?

Расскажи

Крайне полезная статья о правилах создания журнальной верстки! Очень рекомендую к прочтению.

Прежде чем рассказать о модульной сетке, давайте поймем, что такое модуль.

Модуль – это кратно повторяющееся изображение, размер или пропорция. – это структура (каркас, шаблон) расположения графических элементов на страницах. Основой модульной сетки является “модуль”, иначе говоря – основной шаг сетки, который визуально определяется шириной и высотой клетки (модульной единицы). Клетки строятся с помощью вертикальных колонок и горизонтальных линий.

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

Сетка создается для всего разворота, а не для каждой страницы отдельно. Это делается для того, чтобы весь журнальный разворот воспринимался бы как единое целое, а не распадался на правую и левую части, а всё издание не выглядело бы как подшивка из разнородных страниц. Сетка разворота может состоять из 2, 3, 4-х и т.д. равных и неравных по ширине колонок.

Одинаковые по ширине колонки создаются в окне создания документа, либо в панели “Поля и Колонки” (Margins and Colomns). Если нам необходимо задать 3 колонки, то мы вбиваем число 3 в соответствующее поле и т.д.

А как быть, если по нашему замыслу не все колонки должны иметь одинаковую ширину? Например, если текст и изображения будут располагаться в 2-х широких колонках, а пояснительная информация – в боковой узкой колонке?

В этом случае, наша модульная сетка будет строиться на основе разного числа автоматических колонок программы. Например, если мы зададим 8 автоматических колонок для страницы, то задуманные нами 2 широкие колонки (для текста и изображений) займут по 3 автоматические колонки, а узкая боковая колонка будет строиться на основе 2-х автоматических колонок.

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

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

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

-

Модульная сетка не обязательно строится из перпендикулярных линий. Иногда дизайнер решает наклонить сетку или вообще придать ей оригинальную форму, Если Вам хочется выйти за рамки привычного – выходите!
Только постарайтесь, чтобы в погоне за оригинальностью Ваша работа не превратилась в сизифов труд. Представьте себе, каково будет сверстать 40-50 страниц с наклонной или фигурной сеткой…

-

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

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

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

Модульная сетка - это особый шаблон, по которому и строится дизайн сайта. По сути, это система представления визуальной информации посетителю на основе отдельных блоков, называемых модулями. Сайт, разработанный с использованием такого шаблона, гораздо удобнее для восприятия и навигации.

Как применяется сетка

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

Виды модульных сеток

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

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

1. Создается колонтитул. Здесь должны быть расположены название сайта, навигационное меню, разного рода видеоматериалы.
2. Страница разбивается на три колонки. При этом две из них имеют одинаковые размеры. Третья колонка делится на две части вертикальной линией. Таким образом, получаются четыре раздела (новостной, фотогалерея, место для рекламы, последние информационные изменения на сайте).

Модульная сетка для интернет-магазинов разной специализации создается несколько по-другому. В этом случае очень важно обеспечить удобство навигации посетителям. Группируются при этом элементы стандартно и единообразно. Для каждого из объектов в сетке выделяется важная информация, характеризующая его.

Линейка в редакторе «Фотошоп»

Сайты создаются с использованием растровых или векторных Сетку в них создавать очень удобно. Рассмотрим, как это делается в популярном редакторе Photoshop. Создается модульная сетка в «Фотошопе» очень просто.

Для того чтобы по периметру рабочего окна изображения появились линейки, следует пройти в пункт главного меню «Просмотр» (View) и нажать на строку «Линейки» (Rulers). В этом редакторе можно использовать самые разные элементы - с делениями в сантиметрах, миллиметрах, дюймах или пикселях. Для того чтобы выполнить необходимую настройку, следует пройти в пункт главного меню «Редактирование» (Edit). Далее выбрать строку «Установки» (Preferences) - «Единицы измерения&Линейки» (Units&Rulers). После этого высветится окошко, в котором и можно изменить вид линейки. В верхнем выпадающем меню выбирают сантиметры, миллиметры, пиксели и т. д.

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

Сетка Photoshop

Сама модульная сетка программы «Фотошоп» станет видимой после того, как вы перейдете по пункту главного меню «Просмотр» - «Показать» (Show) - «Сетка» (Grid). Шаг между линиями сетки можно настраивать. Для этого следует выполнить команду «Редактирование» - «Установки» - «Направляющие, сетки и фрагменты» (Guides, Grid, Slices). Здесь можно изменить не только шаг между линиями, но и их цвет. Используя эту сетку, быстро и точно размещать по рабочему полю все объекты будущего сайта будет совершенно несложно.

Работа с курсором

Модульная сетка сайта создается таким образом очень просто. Курсор при работе прилипает к линиям. Это может быть удобным в том случае, если необходимо сделать блоки точных, определенных размеров. Если же эта функция по каким-либо причинам окажется ненужной, ее можно отключить. По умолчанию начало координат сетки в «Фотошопе» располагается в верхнем левом углу окна. При желании его можно переместить в любое другое место холста. Для этого наводят курсор на квадратик начала координат и просто перетаскивают его, удерживая кнопку мыши. Для возврата точки отсчета на место следует дважды кликнуть на том же квадратике в углу.

Помимо всего прочего, имеются разного рода плагины для редактора «Фотошоп», позволяющие сделать создание сайта с использованием модульной сетки еще более удобным. Скачивают их в сети. С использованием этих плагинов можно создавать сетки с заданными параметрами.

Сетка в CorelDraw

Теперь посмотрим, как сделать модульную сетку в векторном редакторе CorelDraw. Здесь она создается примерно так же, как и в «Фотошопе». Иконка ее расположена на верхней панели (глаз в сетке). После нажатия на нее можно будет выполнить все необходимые настройки. Допускается выбор расстояния между линиями, изменение единицы измерения и т. д. Разграничивают рабочее поле в окне изображения в CorelDraw и с помощью направляющих. Их при необходимости можно сделать видимыми или невидимыми.

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

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

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

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

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

Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине. Я не помню, изучают ли этот закон в школе, но в художественных училищах, художественннных и архитектурных институтах это как "Отче наш..." Одним числом это значение выражается как 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 можно все содержание таблицы обозначить тегом . Тогда заголовок таблицы обозначается тегом а заключение тегом .Все три тега закрывающееся и имеют атрибуты. Для ячеек заголовка таблицы используется тег .

Тем не менее, самый простой способ не зависеть от размеров канвы – применять относительные размеры, то есть задавать размеры в %.

Представьте, что к вам должны прийти гости, а у вас по квартире разбросаны вещи. Как вы думаете, каким образом можно быстро «прибраться», если времени на уборку нет? Ответ прост: нужно разложить вещи небольшими кучками. Это сразу создаст ощущение порядка, квартира будет выглядеть убранной.

Модульная сетка, которая представляет собой набор направляющих, работает аналогичным образом. Направляющие (обычно вертикальные и горизонтальные) образуют некий каркас. Допустим, такой:

Да, правил нет, но есть здравый смысл. Говоря иначе, сначала нужно подумать, для чего нужна сетка, и только потом уже ее строить. Например, нарисованный выше каркас может послужить отличным полем для игры в крестики-нолики;)

Кстати, результатом использования сетки может быть... сама сетка. В качестве примера можно привести картины Пита Мондриана, который строил композиции на основе свободно сконструированной и заполнявшей холст пространственной сетки.

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

Итак, на что же можно и нужно опираться при создании модульной сетки?

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

Достаточно часто в статьях про модульные сетки можно встретить предложение, которое звучит следующим образом:

Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.

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

Однако, как показывает практика, возможны и имеют место быть оба варианта:

• Дизайн вписывается в сетку;
• Сетка создается под дизайн.

Рассмотрим каждый из них по отдельности.

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

Не будем обсуждать художественную ценность данной обложки. Сосредоточимся лучше на исполнении — оно явно хромает:

• Ощущение, что элементы «набросаны» на плоскость страницы наспех, их позиции ничем не обоснованы;
• Размеры в макете несоизмеримы и непропорциональны, непонятно, чем обусловлен тот или иной размер;
• Акцентов нет, поля узкие, объекты конфликтуют друг с другом, взгляд блуждает по обложке;
• Неграмотная работа с текстом, как в плане шрифтов (автор насчитал минимум 5), так и в плане типографики (в списке ключевых статей «дыры» между отдельными пунктами);
• «Грязные» цвета.

Очевидно, что какой бы хороший дизайн сайта мы не придумали, такая обложка сведет его на «нет». Её нужно довести до ума и в этом нам поможет сетка. Возьмем за основу высоту бордовой полосы (7 мм) и нарисуем сетку с аналогичным шагом по вертикали и горизонтали. Кстати, верхняя и нижняя полосы удивительным образом в нее «попадают».

Сетка наглядно демонстрирует всю плачевность ситуации: объекты не выровнены относительно друг друга, имеют непонятные размеры, в общем, «кто в лес, кто по дрова».

Для наведения порядка впишем дизайн в сетку, только учтем один небольшой нюанс. Отдельно взятые элементы (название журнала, логотип APEL, номер) имеют избыточный размер, из-за них обложка получается тяжеловесной. Уменьшим шаг сетки на 1 мм, это даст нам в итоге легкий и цельный в восприятии дизайн:

Обложка с сеткой или без сетки

• Элементы расположены по сетке и соразмерны друг другу, появились хорошие широкие поля;
• Основной акцент выведен на название журнала;
• Поправлены шрифты и типографика, что вкупе с сеткой дает нам законченное решение.

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

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

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

заголовок
меню	модуль1		модуль2	модуль3	модуль4
	заключение