Не так давно, работая над очередным уроком для курса «Графический дизайн. Основы» (выпуск запланирован на начало января), я поняла, что тема использования и построения модульных сеток мало где раскрывается.
Есть достаточно много информации о том, что такое модульная сетка и для чего она нужна, но совсем мало о том, каким образом ее строить и какими правилами руководствоваться при этом. Поэтому я решила, что сегодняшняя запись будет иметь практическую направленность и пытаться как можно понятнее осветить данную тему.
Итак, модульная сетка – это разметка вашей работы, способ систематизации и выравнивания элементов. Она является остовом композиционного решения и служит средством организации не только составных частей работы, но и свободного пространства.
Сетка может как помогать нам решать поставленные задачи, так и являться частью решения. Наиболее ярким примером может послужить интерфейс windows phone:
Для тех, кто нуждается в более подробной теоретической части вопроса, есть возможность воспользоваться поиском либо подписаться на курс и получить соответствующее письмо, где об этом достаточно подробно рассказано, а мы переходим непосредственно к практике.
Сначала мы должны определиться, — для чего нам нужна модульная сетка. Делаем мы сайт или верстаем журнал, или обложку для книги, или что-то другое? В зависимости от вида деятельности следует выделить основные структурные элементы. Часто размер модуля определяется одним из этих элементов, например логотипом, позицией меню на сайте и т.д. В верстке минимальный размер определяется удобочитаемым в конкретной ситуации кеглем.
Для наглядности приведу пример модульной сетки печатного периодического издания. Если мы верстаем журнал, то структурными элементами могут быть заголовок, подзаголовок, текст, иллюстрации. Обычно в журналах присутствуют разные типы статей, где роль текстовой части может меняться. В таких случаях, чтобы сделать сетку более гибкой, я использую 5-7 модулей (по горизонтали):
Объединение модулей может осуществляться практически в любом удобном для вас формате:
В действительности, чем меньше модуль сетки, тем более гибкой она будет, не потеряв при этом пропорциональности. Но многим бывает неудобно работать с сетками, если размер их модуля стремится к размеру расстояния между модулями. От такой сетки рябит в глазах и в ней легко запутаться, особенно начинающему:
Вариантов построения модульной сетки может быть масса, здесь вы ограничены только пожеланиями заказчика и своим воображением. Не забывайте, что модульные сетки не обязательно должны быть вертикальными, они могут также строиться и по диагонали, под определенным углом наклона и т.д.
В случае с сайтами оптимальным количеством колонок считается 12, 16 и 24, что связано с особенностями верстки сайтов и использования возможностей фреймворка. Минимальной высотой модуля для web я считаю 20px, что связано с оптимальным размером шрифта (12-14pt) и его читаемостью.
Теперь пришло время поговорить о технической стороне вопроса.
Создание модульной сетки в
- Первый и самый простой способ — это включить сетку самого графического редактора (Ctrl+’) и, ориентируясь по ней, выставить направляющие. Получится долго и с большой вероятностью ошибок.
- Установить специальные плагины для Photoshop (GuideGuide , Modular Grid Pattern , GridMaker 2 ).
- Скачать готовый шаблон с одного из бесплатных генераторов сеток, таких как 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Установите нужные параметры и нажмите «GENERATE».
В действительности существует достаточно большое количество сервисов для создания сеток, в том числе и для «резиновых» сайтов. Их очень легко можно найти, воспользовавшись поиском, поэтому не вижу смысла перечислять их всех в статье. Такие сервисы являются отличными помощниками для начинающих.
Создание модульной сетки в
В отличие от Photoshop, InDesign обладает собственными средствами создания модульной сетки. В меню Layout необходимо выбрать пункт Create Guides и в диалогом окне ввести нужные вам параметры:
Данный инструмент имеет достаточно гибкие настройки, поэтому сделать нужную структуру не составит большого труда. Создание сетки лучше всего осуществлять на Master Page , чтобы не повторять процедуру для каждой страницы.
Создание модульной сетки в
- Первый способ (аналогично Photoshop) — это включить сетку самого графического редактора и, ориентируясь по ней, выставить направляющие. Также есть возможность любую фигуру сделать направляющей, что поможет в организации наклонной сетки.
- Скачать готовые шаблоны сеток. Где — подскажет поиск. В интернете их можно найти массу.
Надеюсь, тема модульных сеток стала для вас ближе и яснее. Обязательно упражняйтесь в их построении. Я прекрасно понимаю, что занятие это очень нудное, но оно того стоит. Построение сеток развивает ваше чувство пропорции, позволяет лучше видеть в дальнейшем все неточности выравнивания.
Представьте, что к вам должны прийти гости, а у вас по квартире разбросаны вещи. Как вы думаете, каким образом можно быстро «прибраться», если времени на уборку нет? Ответ прост: нужно разложить вещи небольшими кучками. Это сразу создаст ощущение порядка, квартира будет выглядеть убранной.
Модульная сетка, которая представляет собой набор направляющих, работает аналогичным образом. Направляющие (обычно вертикальные и горизонтальные) образуют некий каркас. Допустим, такой:
Да, правил нет, но есть здравый смысл. Говоря иначе, сначала нужно подумать, для чего нужна сетка, и только потом уже ее строить. Например, нарисованный выше каркас может послужить отличным полем для игры в крестики-нолики;)
Кстати, результатом использования сетки может быть... сама сетка. В качестве примера можно привести картины Пита Мондриана, который строил композиции на основе свободно сконструированной и заполнявшей холст пространственной сетки.
Ярким примером промежуточного варианта, когда сетка одновременно является частью дизайна и решает конкретную задачу, служит интерфейс мобильной операционной системы Windows Phone.
Итак, на что же можно и нужно опираться при создании модульной сетки?
Построение модульной сетки
Достаточно часто в статьях про модульные сетки можно встретить предложение, которое звучит следующим образом:
Не вписывайте дизайн в сетку, наоборот, создавайте сетку под дизайн.
На первый взгляд, вроде бы все верно: сетка — это, прежде всего, рабочий инструмент, который не имеет смысла без инструкции по использованию, описывающей расположение основных элементов (текста, изображений и т. д.).
Однако, как показывает практика, возможны и имеют место быть оба варианта:
- Дизайн вписывается в сетку;
- Сетка создается под дизайн.
Рассмотрим каждый из них по отдельности.
Пример первый: нужно создать дизайн сайта для научного журнала. При этом клиент хочет, чтобы журнал был «лицом» сайта и просит поместить его на главной странице. Обложка выглядит, мягко говоря, не очень хорошо:
Не будем обсуждать художественную ценность данной обложки. Сосредоточимся лучше на исполнении — оно явно хромает:
- Ощущение, что элементы «набросаны» на плоскость страницы наспех, их позиции ничем не обоснованы;
- Размеры в макете несоизмеримы и непропорциональны, непонятно, чем обусловлен тот или иной размер;
- Акцентов нет, поля узкие, объекты конфликтуют друг с другом, взгляд блуждает по обложке;
- Неграмотная работа с текстом, как в плане шрифтов (автор насчитал минимум 5), так и в плане типографики (в списке ключевых статей «дыры» между отдельными пунктами);
- «Грязные» цвета.
Очевидно, что какой бы хороший дизайн сайта мы не придумали, такая обложка сведет его на «нет». Её нужно довести до ума и в этом нам поможет сетка. Возьмем за основу высоту бордовой полосы (7 мм) и нарисуем сетку с аналогичным шагом по вертикали и горизонтали. Кстати, верхняя и нижняя полосы удивительным образом в нее «попадают».
Сетка наглядно демонстрирует всю плачевность ситуации: объекты не выровнены относительно друг друга, имеют непонятные размеры, в общем, «кто в лес, кто по дрова».
Для наведения порядка впишем дизайн в сетку, только учтем один небольшой нюанс. Отдельно взятые элементы (название журнала, логотип APEL, номер) имеют избыточный размер, из-за них обложка получается тяжеловесной. Уменьшим шаг сетки на 1 мм, это даст нам в итоге легкий и цельный в восприятии дизайн:
Обложка с сеткой или без сетки
- Элементы расположены по сетке и соразмерны друг другу, появились хорошие широкие поля;
- Основной акцент выведен на название журнала;
- Поправлены шрифты и типографика, что вкупе с сеткой дает нам законченное решение.
В итоге мы получаем такую вот замечательную картинку для главной страницы сайта:
Двигаемся дальше. В одной из предыдущих статей автор подробно разобрал этапы создания сайта-визитки . Прочитайте ее, если еще не читали, и обратите внимание, как идет построение дизайна: объекты на странице размещаются последовательно — от общего к частному, от главных элементов к второстепенным.
При таком подходе, когда компоновка определяется задачей, элементы обычно располагаются на странице «на глаз», они, пусть и не сильно, но «пляшут» относительно друг друга. Опять-таки непонятно, на что ориентироваться при выборе размера картинок, блоков текста и т. д. В такой ситуации нам вновь поможет вписывание дизайна в сетку.
Автор Йозеф Мюллер-Брокманн (1914–1996) - графический дизайнер и преподаватель. Его работы являются образцом простоты в дизайне и тонкого использования типографики, формы, цвета. Они оказали влияние на многих современных дизайнеров.
На сайте Студии Лебедева написано, что книги нет в продаже. Советую заглянуть в один из официальных магазинов . Давно хотел прочитать «Модульные системы в графическом дизайне». Считал, что её уже не продают. После защиты семестровых работ в БВШД наткнулся на магазин студии Лебедева. Оказывается, они её печатают и продают.
Купил, прочитал книгу. Поделюсь впечатлениями и интересными идеями.
На каждую тему представлены примеры макетов. Так как по размерам книга чуть больше листа А4, иллюстрации большие и подробные.
Примеры страниц с использованием модульной сетки Дизайнеру на заметку
Йозеф описывает процесс работы над вёрсткой плаката, макета страницы книги и журнала. Часть посвящена вопросам типографики, так как она влияет на восприятие. Дизайнеру необходимо уметь разбираться в этих тонкостях, чтобы успешно выполнять свою работу.
Про сетки
Модульная система помогает дизайнеру рационально скомпоновать элементы на странице, но важно помнить: сначала содержание, а потом сетка.
Понравилось?
Расскажи
Модульная сетка - э то кратно повторяемый рисунок, узор, размер или пропорция. Вспомните картинки Эшера. Ящерки, рыбки, птицы в некоторых работах - это и есть модуль. Каждый интернетчик наблюдает модули в виде бэкграундов.
Первый вариант применения модулей в дизайне - такой ж как в инете, то есть фоновый рисунок. В самых различных формах, как самостоятельный, так и в различных комбинация. И те же иллюстрации Эшера.
Второй вариант, размерный, очень близок к третьему, пропорциональному. В основном это модульные сетки для различных типографских видов печатной продукции.
Третий вариант более сложен для восприятия, но именно он и лежит в основе всего дизайна, архитектуры и прочего, прочего, творимого природой и человеком. Человек всегда формировал окружающую среду, интуитивно руководствуясь чувством пропорции, то есть соотношений.
Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине. Я не помню, изучают ли этот закон в школе, но в художественных училищах, художественннных и архитектурных институтах это как "Отче наш..." Одним числом это значение выражается как 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.
В веб-дизайне модульная сетка применяется гораздо чаще, чем может показаться на первый взгляд. Если вы используете
|
Разрешение экрана | ||||
|
Размеры канвы |
Размер экрана можно определить с помощью простых программ (см. лабораторный практикум).
Рассмотрим пример модульной сетки и задания размеров, организованных с помощью таблицы
В HTML можно все содержание таблицы обозначить тегом
. Тогда заголовок таблицы обозначается тегом а заключение тегом .Все три тега закрывающееся и имеют атрибуты. Для ячеек заголовка таблицы используется тег| заголовок | меню | модуль1 | модуль2 | модуль3 | модуль4 |
|---|---|---|
| заключение |
