Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Кубок конфедераций 2017
Веб дизайн

Статьи о дизайне   Портфолио дизайнера
Дизайн Форум


Про дизайн и web дизайн




Главная     Форум     Галереи




  Статьи о дизайне





  Галереи дизайна

Промышленный дизайн, графический дизайн, гламурные картинки, иконки, аватары.



  Помощь Дизайнеру!

Советы по дизайну. Философия, психология и трудовые будни дизайнера.



  Модульная сетка





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

Тема сегодняшнего разговора - модульные сетки

Для чего, кому и с какой целью... Для начала - что такое модуль?

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

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

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

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

Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине. Я не помню, изучают ли этот закон в школе, но в художественных училищах, художественннных и архитектурных институтах это как "Отче наш..."

Одним числом это значение выражается как 1,618, алгебраически выглядит a:b=b:(a+b). Суть в том, что подобное соотношение благоприятно глазу в силу психических и физических особенностей строения глаза, рабочих частот мозга и много, много...

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

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

Подавляющее число типографских сеток строится на базе формата листа бумаги, взятого за основу издания. Рисунок сетки зависит от содержания и замысла проекта, а так же индивидуального стиля того или иного художника. А если проектирование выполняется с помощью компьютера, то процесс становится достаточно быстрым, особенно в стадии реализации. Большинство графических (в основном - паблишерных) программ имеет встроенные опции построения модульной сетки, и почти все они же имеют достаточно большой набор заготовок модульных сеток под вполне обычными фамилиями "Буклет", "Календарь" и пр.

Пример газетной модульной сетки. Газета "Вечерний КУРЬЕР"

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


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

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

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

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

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

Модульная сетка в веб-дизайне

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

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

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

Виктор Вязьминов (MrDeSign) 1999 г.


Другие статьи Виктора Вязьминова о дизайне, цвете и композиции:
Стиль на веб сайте
Создание логотипов
Физиологические основы восприятия
Психология восприятия пространства
Цвет и тон в среде
Как работать с цветом
Беседы о тоне и цвете
Тон и цвет в рекламе
Модульная сетка







Электронные книги о дизайнеЧМ 2018Гламурные картинкиГраффити галереяЯпония фотографииО путешествиях и странах, дешевые авиабилеты и отелиДизайн форум



    Rambler's Top100     Яндекс.Метрика  


Web дизайн и создание сайтов


Карта сайта       Наверх