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

Автор: Виктор Вязьминов

Для начала определим, что такое модуль. Это повторяемый рисунок, узор, размер или пропорция. Вспомните картинки Эшера. Ящерки, рыбки, птицы в некоторых его работах — это и есть модуль (рис. 1).
[показать]

Рис. 1. Картина Эшера «Рептилии»

Первый вариант применения модулей в дизайне — использование фонового повторяющегося рисунка. И те же иллюстрации Эшера.

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

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

Еще Фидий (создатель Акрополя) и Иктин (архитектор Парфенона) продемонстрировали знание закона золотого сечения. Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине. В художественных училищах, художественных и архитектурных институтах это как «Отче наш». Одним числом золотое сечение выражается как 1,618, алгебраически выглядит a:b = b:(a+b). Суть в том, что подобное соотношение благоприятно человеку в силу психических и физических особенностей строения глаза, рабочих частот мозга и многого другого (рис. 2).
[показать]

Рис. 2. Золотое сечение

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

[показать]
Рис. 3. Лука Пачиоли. Из алфавита, составленного с помощью Леонардо да Винчи, для трактата «О божественной пропорции»

Для сайтов модульное построение страницы может быть организовано с помощью таблиц или слоев. В качестве модуля обычно принимают соотношение сторон экрана (при 800х600 соотношение составляет 4:3). Стандартный размер листа бумаги A4 так же является модулем в черчении и типографике (рис. 4).

[показать]
Рис. 4. Модульная сетка
Подавляющее число типографских сеток строится на базе формата листа бумаги, взятого за основу издания. Рисунок сетки зависит от содержания и замысла проекта, а так же индивидуального стиля того или иного художника. А если проектирование выполняется с помощью компьютера, то процесс становится достаточно простым, особенно на стадии реализации. Большинство программ для верстки имеют встроенные опции построения модульной сетки и большой набор заготовок под вполне обычными названиями «Буклет», «Календарь» и пр.

Пример газетной модульной сетки. Газета «Вечерний КУРЬЕР»
Модульная сетка первой полосы немного отличается от общей модульной сетки верхним блоком. Для более четкого восприятия логотипа его пришлось выделить весьма значительными паузами. Но зато с его прочтением и выделением нет никаких проблем (рис. 5).
[показать]

Рис. 5. Модульная сетка первой полосы

Модульная сетка остальных полос представлена на рис. 6.

[показать]
Рис. 6. Модульная сетка остальных полос

Как видите, кроме четко определенного верхнего блока полосы имеют выраженный «подвал» — так газетчики называют нижнюю часть полосы. Подвал помогает разделить информацию на полосе на тематические зоны. Схема модулирования полосы видна на двух цветных схемах (рис. 5–6).

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

Применяя блоковый принцип построения рекламного объявления, вы волей-неволей применяете модульную сетку. И если в следующем газетном объявлении изменится текст и фотография, а принцип расположения элементов останется прежним, то зрителю будет гораздо проще «опознать» ваше объявление. Многие фирмы давно и успешно используют этот принцип для рекламы в газетных объявлениях (рис. 7).

[показать]
Рис. 7. Модульная сетка в газетных объявлениях

Модульная сетка в веб-дизайне
В веб-дизайне модульная сетка применяется гораздо чаще, чем может показаться на первый взгляд. Если вы используете таблицу для формирования элементов на странице — вы уже применяете модульную сетку, особенно если сетка повторяется на нескольких страницах. Иногда сетка может быть скрытой, иногда явной — когда вы в качестве фона блока указываете цвет, отличный от фона веб-страницы (рис. 8).

[показать]
Рис. 8. Модульная сетка на сайте

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

Принцип работы с сетками, думаю, понятен из примера с «Вечерним КУРЬЕРОМ», а заготовки сеток имеются во многих графических программах. Напоследок добавлю, что сетки должны способствовать воплощению замысла, а не довлеть над ним.Источник