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

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

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

Они пытаются разместить слишком много информации в маленьком пространстве. Запомните, что свободное пространство — ваш добрый друг . Оно облегчает аудитории процесс чтения вашего материала. Правильно использованное пространство делает ваш проект более изящным и легким для восприятия.

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

.

Вот несколько примеров модульных сеток.
Обратите внимание, насколько разнообразными и уникальными они могут быть.

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

Пример 1

Пример 2

Пример 3

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

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

Отличие второго варианта лишь в том, что линии расположены наклонно . Все элементы композиции привязаны к этим наклонным линиям.

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

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

Предвкушаю ваш вопрос: Неужели ты, Боб, каждый раз выстраиваешь модульную сетку, прежде чем приступить к работе. И не лень тебе?

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

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

Итак, какие преимущества дает нам модульная сетка?

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

2. Модульная сетка помогает соблюдать равномерные интервалы между элементами.

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

Теперь пример из практики.

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

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

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

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

В завершение дам вам совет.

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

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

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

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

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

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

Зачем нужны сетки?

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

Следуя новым веянием, в начале 1960-х художник-оформитель Питер Палаццо обновил дизайн газеты New York Herald Tribune. В 1966-м художественный редактор Джанет Коллинз ввела новую верстку в лондонской Times. Оба этих преобразования показали работникам индустрии, что единый стиль оформления повышает качество взаимодействия читателей с изданием. Газетчики и редакции журналов быстро поняли необходимость сеток и начали применять их в своей практике.

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

Йозеф Мюллер-Брокманн в своем пособии «Модульные системы в графическом дизайне » пишет о сетках так:

«Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. <…> Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».

Какими бывают сетки?

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

Мы собрали наиболее распространенные и ставшие уже «классическими» образцы, знакомство с которыми поможет лучше понять модульное проектирование:

Квадратная сетка

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

На примере: Роберт Бюхлер, 1914 г.
Источник: Thinking Form

Cетки Макса Билла

Первым опытом применения сетки в книжном деле была разработанная Максом Биллом система для книги «Die Neue Architektur». В этой книге, вышедшей в 1940 году, Альфред Рот применил деление страницы на девять горизонтальных модулей. Они позволили свободно располагать иллюстрации и размещать на них текст на трех языках. Несколькими годами ранее, опираясь на идеи «новой типографики» Баухауса, Билл использовал шестимодульную сетку в своем знаменитом плакате «Negerkunst », созданном для выставки южноафриканской наскальной живописи в 1931 году.

Не так давно, работая над очередным уроком для курса «Графический дизайн. Основы» (выпуск запланирован на начало января), я поняла, что тема использования и построения модульных сеток мало где раскрывается.

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

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

Сетка может как помогать нам решать поставленные задачи, так и являться частью решения. Наиболее ярким примером может послужить интерфейс 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) — это включить сетку самого графического редактора и, ориентируясь по ней, выставить направляющие. Также есть возможность любую фигуру сделать направляющей, что поможет в организации наклонной сетки.
• Скачать готовые шаблоны сеток. Где — подскажет поиск. В интернете их можно найти массу.

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

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

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

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

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

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

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

Что такое модульная сетка.

Модульная сетка это система построения визуальной информации на основе блоков – модулей.

(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");

Выводы.

Модульная сетка используется повсеместно. Её значение велико, а возможности нельзя недооценивать.

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

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