«Модульные системы в графическом дизайне»: основы швейцарской вёрстки

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

В своей книге «Модульные системы в графическом дизайне» Йозеф Мюллер‑Брокманн на реальных примерах объяснил, как они могут помочь дизайнеру систематизировать пространство макета, оформить журнал, плакат, создать фирменный стиль или даже выставочный стенд.

Издательство — «Студия Артемия Лебедева».

Йозеф Мюллер‑Брокманн — графический дизайнер и один из ведущих практиков печатного искусства Швейцарии. Три года преподавал в Школе прикладного искусства, а затем — в немецкой Высшей школе образного творчества. Сотрудничал с крупными европейскими корпорациями, среди которых были IBM Europa, Olivetti и госкомпания «Швейцарские железные дороги».

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

Из материала вы узнаете:

• как строится модульная конструкция;
• как добиться разнообразия вёрстки с помощью иллюстраций;
• как применить принцип модульности в создании фирменного стиля;
• как модульная система помогает оформить трёхмерное пространство.

Типографика

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

Вот некоторые из шрифтов, с которых советует начинать Йозеф. Используйте их в тренировочных макетах, чтобы научиться составлять из них красивые текстовые блоки:

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

Также длина строки зависит от формата и объёма — например, для сноски с кеглем в 8 пунктов (≈ 11 пикселей) строка из семи слов будет выглядеть длинновато.

На этом примере текст набран гротеском с кеглем в 7 пунктов (≈ 10 пикселей) и с интерлиньяжем в 1 пункт (≈ 1 пиксель). Слишком широкая полоса для такого текста не подходит, так как глаз очень быстро теряет начало следующей строки. Такое решение сработает лучше для небольших пояснений и коротких выносок — варианты 3 и 4:

Здесь текст набран кеглем в 10 пунктов (≈ 13 пикселей) и с интерлиньяжем в 2 пункта (≈ 3 пикселя). Слишком длинная полоса для него не подходит, как и слишком короткая. Но зато его удобно использовать в качестве основного текста — варианты 2 и 3:

Текст большого кегля, например 20 пунктов (≈ 26 пикселей), и с интерлиньяжем в 4 пункта (≈ 5 пикселей) хорошо читается на широкой полосе, но на более узких — уже нет. Такой размер удобно использовать в заголовках.

Если вам нужно уместить на одной полосе текст разного кегля, ширина полосы должна быть подобрана под наименьший. Например, если кегль заголовка 26 пикселей, а основного текста — 14, то ширину полосы подбирать нужно под 14.

Интерлиньяж. Слишком мелкий интерлиньяж, как и слишком большой, снижает темп чтения, так как читателю приходится постоянно искать начало следующей строки.

Также стоит учитывать и то, что чем больше интерлиньяж, тем меньше строк может уместиться на странице.

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

Модульная конструкция

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

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

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

В модульной вёрстке важно соблюдать аккуратность и знать, сколько строк текста может поместиться в колонке. Йозеф советует рассчитывать это значение по алгоритму — проще всего его объяснить на примере:

1. Предположим, высота полосы на макете — 57 строк, а одна колонка должна занимать четыре модульных клетки по вертикали. Размеры отступов между ними равны одной строке текста. Высота строки зависит от выбранного вами кегля.
2. Из 57 строк нужно вычесть три — они нужны для отступов между четырьмя модулями. Оставшиеся 54 будут заполнять колонки. Чем больше в колонке модулей, тем больше нужно выделять пустых строк.
3. Теперь нужно разделить количество строк под модули на количество самих модулей: 54 / 4 = 13,5.
4. Получилось дробное число, а в типографике не бывает половины строки. Значит, нужно брать следующее наименьшее число, которое можно разделить на 4 без остатка, — это 52.
5. В итоге получается колонка из 13 строк с тремя слепыми — 4 × 13 + 3 = 55.

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

Иллюстрации в модульной системе

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

На примерах красными диагоналями указано, как можно расположить иллюстрации в сетках из 8 и 20 модульных клеток. Красными линиями указаны диагонали иллюстраций, которые можно расположить в модулях:

Аналогично можно рассчитать положение для макетов и из большего количества клеток.

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

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

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

Модульная система в фирменном стиле

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

Чтобы фирменный стиль был гибким, важно на старте соблюдать единообразие. Вот некоторые критерии, о которых Йозеф советует не забывать:

1. Заголовки, подписи и текст всегда печатаются с одним и тем же кеглем, интерлиньяжем, отступами.
2. Выделения и сноски всегда должны оформляться одинаково.
3. Фотографии и иллюстрации должны сохранять стилистическое единство и соответствовать модулям.
4. На каждой странице — одна и та же модульная структура.

Посмотрите, как выполнена вёрстка этого рекламного проспекта. И обложка, и развороты оформлены в едином стиле по одной и той же модульной сетке:

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

Модульная система в оформлении трёхмерных пространств

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

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

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

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

Если помещение слишком большое, Йозеф советует делить каждую стену на несколько. Это не только позволит быстро собрать стенд, но и сделает его долговечным — одинаковые стенды легко упаковывать и хранить, а обновлять придётся лишь информационное наполнение.

Это — модель выставочного пространства с соразмерностью 1:20. Павильоны уже практически готовы, остаётся только разместить необходимые для выставки предметы. Йозеф отмечает, что этот приём очень хорошо выручает на переговорах, так как любые замечания можно снять сразу на встрече — достаточно только поменять расположение модульных стен.

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