Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>9 дек 2021</li>

3 <li>0</li>

4 </ul><h2>"Модульные системы в графическом дизайне": основы швейцарской вёрстки</h2>

5 Рассказываем, как рассчитать модульную сетку для макета и как её можно применить в трёхмерном пространстве.

6 Иллюстрация: Rawpixel / Freepic / Josef Müller-Brockmann / medium / Meery Mary для Skillbox Media

7 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

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

10 Издательство - "<a>Студия Артемия Лебедева</a>".

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

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

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

14 <ul><li>как строится<a>модульная конструкция</a>;</li>

15 <li>как добиться разнообразия вёрстки<a>с помощью иллюстраций</a>;</li>

16 <li>как применить принцип модульности<a>в создании фирменного стиля</a>;</li>

17 <li>как модульная система помогает<a>оформить трёхмерное пространство</a>.</li>

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

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

20 Изображение: Издательство Студии Артемия ЛебедеваИзображение: Издательство Студии Артемия ЛебедеваИзображение: Издательство Студии Артемия ЛебедеваИзображение: Издательство Студии Артемия ЛебедеваАвторы перечисленных гарнитур были необычайно талантливыми и интеллектуальными художниками. Это подтверждается тем, что на протяжении четырёх с лишним столетий великое множество гравёров и словолитчиков создавали новые шрифты и лишь немногие из них сохранились. Шрифт Гарамона, например, являет собой произведение искусства высочайшего уровня. Форма каждой буквы неповторима и своеобразна, и строчные и прописные буквы совершенны и оригинальны. Характер каждой буквы индивидуален и очень убедителен.

21 Йозеф Мюллер‑БрокманН

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

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

24 Всякое затруднение при чтении приводит к потере в качестве восприятия и запоминания прочитанного текста. Утомляют и слишком длинные, и слишком короткие строки. Глаз воспринимает длинные строки с напряжением, потому что на то, чтобы удерживать взгляд слишком долго на горизонтальной линии, уходит много сил; при короткой строке чтению мешает частый переход от строки к строке.

25 Йозеф Мюллер‑БрокманН

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

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

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

29 Изображение: Издательство Студии Артемия ЛебедеваЕсли вам нужно уместить на одной полосе текст разного кегля, ширина полосы должна быть подобрана под наименьший. Например, если кегль заголовка 26 пикселей, а основного текста - 14, то ширину полосы подбирать нужно под 14.

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

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

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

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

34 Йозеф Мюллер‑Брокманн

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

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

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

38 Йозеф Мюллер‑Брокманн

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

40 Изображение: Издательство Студии Артемия ЛебедеваДве колонки для текста и иллюстраций создают много возможностей: в одной колонке помещается текст, во второй - иллюстрации. Текст и иллюстрации могут печататься в одной и той же колонке, друг под другом. Кроме того, две колонки ничто не мешает ещё раз разделить и получить четыре.

41 Йозеф Мюллер‑Брокманн

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

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

44 <ol><li>Предположим, высота полосы на макете - 57 строк, а одна колонка должна занимать четыре модульных клетки по вертикали. Размеры отступов между ними равны одной строке текста. Высота строки зависит от выбранного вами кегля.</li>

45 <li>Из 57 строк нужно вычесть три - они нужны для отступов между четырьмя модулями. Оставшиеся 54 будут заполнять колонки. Чем больше в колонке модулей, тем больше нужно выделять пустых строк.</li>

46 <li>Теперь нужно разделить количество строк под модули на количество самих модулей: 54 / 4 = 13,5.</li>

47 <li>Получилось дробное число, а в типографике не бывает половины строки. Значит, нужно брать следующее наименьшее число, которое можно разделить на 4 без остатка, - это 52.</li>

48 <li>В итоге получается колонка из 13 строк с тремя слепыми - 4 × 13 + 3 = 55.</li>

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

50 Изображение: издательство "Студии Артемия Лебедева"Модульная сетка помогает расположить иллюстрации на макете быстро, аккуратно и логично. Чтобы результат получился хороший, дизайнеру важно иметь чувство ритма и композиции. Йозеф предупреждает, что сетка - лишь инструмент и не гарантирует композиционного успеха.

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

52 Йозеф Мюллер‑Брокманн

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

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

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

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

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

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

59 Йозеф Мюллер‑Брокманн

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

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

62 Йозеф Мюллер‑Брокманн

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

64 <ol><li>Заголовки, подписи и текст всегда печатаются с одним и тем же кеглем, интерлиньяжем, отступами.</li>

65 <li>Выделения и сноски всегда должны оформляться одинаково.</li>

66 <li>Фотографии и иллюстрации должны сохранять стилистическое единство и соответствовать модулям.</li>

67 <li>На каждой странице - одна и та же модульная структура.</li>

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

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

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

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

72 Йозеф Мюллер‑Брокманн

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

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

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

76 Изображение: издательство "Студии Артемия Лебедева"Если помещение слишком большое, Йозеф советует делить каждую стену на несколько. Это не только позволит быстро собрать стенд, но и сделает его долговечным - одинаковые стенды легко упаковывать и хранить, а обновлять придётся лишь информационное наполнение.

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

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

79 Изображение: Издательство Студии Артемия Лебедева<a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>