Для чего нужна модульная сетка. Свободное пространство и модульная сетка

О чем молчат типографии -

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

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

Какая от нее польза?

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

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

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

Разворот латинского манускрипта. 1555

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

Обложка журнала. Дизайн Эль Лисицкого. 1922

Постер. Дизайн Герберта Байера. 1926

Однако не сразу их абстрактные построения были осознаны как метод со своей системой правил и закономерностей. Лишь в 1940 году швейцарский дизайнер Макс Билл впервые применил в книжном оформлении модульную сетку.

Книжный переплет. Дизайн Макса Билла. 1944

Постер. Дизайн Макса Билла. 1945

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

Сетка и книжные страницы. Дизайн Йозефа Мюллера-Брокмана

Постер. Дизайн Йозефа Мюллера-Брокмана. 1959

Постер. Дизайн Йозефа Мюллера-Брокмана. 1972

Надо сказать, что российские дизайнеры не намного отстали в модульном проектировании от своих западных коллег. Уже в 1960-е годы в Советском Союзе появилась группа единомышленников, использовавших принципы строгого конструирования печатных изданий (впоследствии Сергей Серов в шутку назвал эту школу "советской Швейцарией"). У истоков отечественного модульного подхода к дизайну стояли такие признанные сегодня авторитеты, как Максим Жуков, Михаил Аникст и Аркадий Троянкер.

Книжный переплет. Дизайн Максима Жукова и Аркадия Троянкера. 1970

Книжный разворот. Дизайн Михаила Аникста. 1979

Суперобложка. Дизайн Максима Жукова. 1977

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

Обложка буклета. Дизайн Евгения Григорьева. Санкт-Петербург, 2009

Приведем несколько примеров модульного подхода к дизайну из портфолио нашего издательства.

Для каталога художника Евгения Журова был выбран классический книжный формат in quarto с соотношением сторон 3 к 4. Эти пропорции и легли в основу модульной сетки.

Для того чтобы сориентировать на развороте изображения картин, была выделена горизонтальная линия, делящая страницу по вертикали в соотношении 1 к 3. При макетировании каждое изображение располагалось так, чтобы и оно делилось этой линией по вертикали в том же соотношении.

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

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

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

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

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

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

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

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

Но об этом - в следующих наших статьях.

Литература для самообразования:
1. Лаптев В. Модульные сетки: Проектирование многополосных изданий. М.: РИП-холдинг, 2007.
2. Самара Т. Создавая и ломая сетку. М.: РИП-холдинг, 2005.
3. Херлберт А. Сетка: Модульная система конструирования и производства газет, журналов и книг. М.: Книга, 1984.
4. Bosshard H. R. Der typografische Raster. Z?rich: Niggli, 2000.
5. Elam K., Elsener R. Gestaltungsraster: Ordnungssysteme f?r Schrift. New York: Princeton Architectural Press, 2006.
6. Miller-Brockmann J. Grid systems in graphic designs. Z?rich: Niggli, 1981.

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

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

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

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

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

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

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

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

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

С чего начинается создание логотипа? С продумывания идеи графического знака? Или подбора шрифта? А, может, с модульной сетки? Сложно сказать, так как в разных случаях нужны разные подходы. Однако многие дизайнеры, которые уже примерно представляют, как должен выглядеть логотип, начинают работу с создания модульной сетки. Использование сетки позволяет создать гармоничный, геометрически выверенный и правильно организованный логотип, который впоследствии можно будет воспроизводить в любых размерах.

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

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

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

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

ПРЕИМУЩЕСТВА МОДУЛЬНОЙ СЕТКИ

Какой тип сетки выбрать, зависит от многих причин – имеет значение лишь конкретный случай. При этом важно не забывать, что дизайнеру должно быть комфортно работать в этой среде. Если использование сетки вызывает дискомфорт и не идет на пользу логотипу, то ее структуру нужно пересмотреть. Невидимые рамки действительно могут мешать, поэтому нужно достаточно спокойно относиться к тому, что некоторые элементы будут нарушать строгую организацию. И это совершенно нормально – ведь символы, которыми набран логотип, имеют разную ширину. В логотипах, в которые используется кириллица, очень сложно придерживаться геометрических принципов. В кириллическом алфавите есть буквы, которые могут привести в дизайнера в отчаяние. Если посмотреть на ту же букву Ю, то становится ясно что мы видим совершенно нелепую конструкцию, которая плохо гармонирует с начертанием других букв, взятых из латинского алфавита. А насекомоподобная Ж? Это вообще страшный сон для любого логотипщика. Но приходится работать с тем, что есть и тут уж не до модульной сетки. Такие символы все равно будут выходить за границы направляющих и с этим нужно смириться.

ПОЧЕМУ СТОИТ ИСПОЛЬЗОВАТЬ СЕТКУ

Логотип можно создать и без использования модульной сетки. Берется готовый шрифт, им набирается название бренда и все. Для графического знака часто тоже не нужно работать с направляющими. Таких логотипов великое множество и это зачастую никак не отражается на узнаваемости бренда. К примеру, логотип Google набран шрифтом Catull. Дизайнер Рут Кедар лишь раскрасила буквы в разные цвета и добавила тени.

Но если логотип создается с нуля, то использование направляющих может стать очень серьезным подспорьем для дизайнера. Сетка помогает сосредоточиться и обратить больше внимания на организационную структуру логотипа. Использование модульной сетки позволяет сфокусироваться и создать логотип, который будет простым и в то же время постоянно актуальным. Если взглянуть на логотипы таких компаний, как Apple, Shell или Nike, то станет ясно, что при их создании использовались простые, классические формы.

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

КОГДА НЕ НУЖНО ИСПОЛЬЗОВАТЬ СЕТКУ

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

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

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

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

ВЫВОД

Все дизайнеры логотипов работают по-разному. Кто-то предпочитает сначала сделать наброски на бумаге, другие сразу же начинают отрисовывать лого на компьютере. Некоторые начинают работу с построения модульной сетки, а другие предпочитают сначала сгенерировать образ и лишь затем сделать его более цельным. Так что нельзя однозначно сказать, что модульная сетка обязательна при создании логотипа. Однако разработку лого можно сравнить со строительством здания. Правильно спроектированный дом простоит дольше, ведь в его основе лежит хорошо продуманный чертеж. То же касается и логотипа: если это корпоративная айдентика, лицо бренда, то лучше всего использовать модульную сетку – ведь логотип будет использоваться компанией на протяжении многих лет. И будет очень хорошо, если он будет композиционно правильным. Ну а для какого-нибудь сайта, который создается, что называется, для души, вполне подойдет логотип, набранный любым красивым шрифтом. И модульная сетка в этом случае не понадобится.

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

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

Модульная сетка (МС) — это набор направляющих, которые образуют «каркас» будущего логотипа. Минимальная единица сетки — «модуль» — может быть совершенно разной формы и размера. Так, логотип Twitter образован окружностями разных диаметров:

Логотип Twitter и его модульная сетка

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

• малый - образует клюв, голову и перья;
• средний - на его основе создана спина, линии клюва и верхняя часть крыла;
• большой - определяет форму груди птички.

Благодаря модульной сетке, логотип сайта Twitter выглядит аккуратным, правильным, гармоничным.

Почему модульная сетка — это круто

Если взглянуть на запоминающиеся , можно заметить, что у них есть определенная структура. Внешний вид логотипа Volkswagen хоть и не имеет «кирпичиков»-модулей, но зато подчиняется геометрическим правилам:

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

Страница, в которой нет никакой модульной сетки

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

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

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

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

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

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

Логотип «Газпром»

Какие существуют модульные сетки

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

• квадратными или прямоугольными;
• на основе окружностей;
• комбинированные (воздушные).

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

Логотип Nudge создан на основе прямоугольной МС с применением персонального математического подхода. Так, ширина внутренней части равна межбуквенному интервалу. «Хвостики» у символов d и g срезаны под углом 45°.

Логотип nudge на основе прямоугольной сетки

Логотип Toyota основан на прямоугольниках со сторонами a и b. В эту сетку вписаны 3 овала. Пересечение линий овалов совпадает с пересечением прямоугольников — они образуют зрительные центры, то есть те места, в которые в первую очередь будет смотреть человек.

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

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

Такая модульная сетка позволяет создавать запоминающиеся логотипы в стиле «минимализм».

«Енот»

Apple также использовала для дизайна своего логотипа модульную сетку на основе кругов. Логотип выглядит идеальным благодаря построению его с использованием кругов Фибоначчи.

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

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

Комбинированные (или воздушные) модульные сетки обычно не заметны глазу. Логотипы на их основе очень легки, красивы и универсальны. Сетка в них играет второстепенную роль. Она определяет расстояние и пробелы между различными элементами, иногда — высоту логотипа, но форма лого не привязана к МС. Прекрасный пример — работа дизайнера Davit Chanadiri, который создает логотипы из пересечения окружностей.

Эффектно в комбинированных модульных сетках выглядит пропорция Фибоначчи и грамотное использование «негативного пространства».

Симметрия и асимметрия в модульных сетках

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

Симметричное и асимме тричное расположение элементов

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

Симметричный и асимме тричный логотип

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

В каких случаях модульная сетка будет излишней

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

Логотип состоит из элементов, не связанных между собой

Не нужно создавать «сетку ради сетки» и пытаться наложить на нее любые логотипы. На примерах ниже видно, где МС уместна, а где — смысла в ней нет.

Логотипы, в которых модульная сетка нужна и не нужна

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

«Демонстрация любых схем лишена смысла, когда итоговый эмоциональный образ логотипа заслоняет собой всю геометрию. В примере ниже в первую очередь считывается медведь на велосипеде. Именно он имеет эмоциональное значение. Зритель не станет заморачиваться, насколько совершенно попа медведя круглая и чему равен её диаметр» — Иван Богданов, «Бюро Горбунова».

Случай, когда геометричность — вторична

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

7 причин использовать модульную сетку при разработке логотипа

1. Сетка помогает организовать рабочий процесс.
2. Ускоряет .
3. Позволяет создать симметричный или асимметричный дизайн.
4. Полезна для установки расстояния между буквами.
5. Позволяет обозначить «безопасную зону» — расстояние от логотипа до других элементов.
6. Акцентирует внимание на определенной части логотипа.
7. Помогает достичь визуальной гармонии.

Заключение

Модульная сетка — полезный инструмент при разработке логотипа сайта. С момента выхода в 1981 году книги Йозефа Мюллера-Брокмана «Модульные системы в графическом дизайне» интерес к сеткам то угасает, то вновь разгорается. Они применяются везде: для разработки дизайна интернет-магазина, для определения расположения различных элементов оформления сайта, в логотипах, даже при проектировании интерфейсов. И хотя многие классные логотипы начинаются с наброска на листочке, самый верный способ получить эффектный логотип — обратиться .