Для чего нужна модульная сетка
Модульные сетки в работе UX-дизайнера. Инструкция по применению
Сетка? Зачем она нужна?
Люди всегда интуитивно пользовались чувством пропорции. Это легко подтвердить, потому что уже с самых ранних цивилизаций можно увидеть связь пропорций с измерением и конструированием, размещением предметов относительно друг друга в пространстве. Сетками, как разметкой, системой опорных линий, пользовались для составления планов строительства и разбивки территории, с помощью нее художники Возрождения увеличивали свои эскизы, а в картографии сетки были координатной основой, по которой составлялись военные планы.
В работе дизайнера, когда макеты состоят из различных элементов, сетка помогает их упорядочить. Сетка позволяет, не вычисляя каждое расстояние и размер в отдельности, заложив ключевые закономерности при её построении всего один раз, затем просто их переиспользовать. Например, сетка позволяет соблюсти правило теории близости (также вы можете найти это правило среди гештальт-принципов восприятия) и, в частности, правило внешнего и внутреннего, согласно которому внутренние расстояния должны быть меньше внешних.
Как только вы начинаете пользоваться сеткой, сложно не заметить её преимущества:
Какими бывают сетки
В зависимости от того, что берется за основу построения сетки, можно выделить следующие ее типы: блочная (в основе блок), колоночная (колонки), модульная (модуль), иерархическая (визуальный вес и расположение элементов относительно друг друга).
Блочная или манускриптная сетка — самый простой вид сетки, которая, как правило, используется в печатных изданиях. Обычно такая сетка представляет собой стандартизированный прямоугольник, который содержит контент на странице или на экране.
Колоночная сетка — сетка, имеющая колонки в своей структуре. Ширина межколонника (gutter) определяется его назначением, если он просто отделяет элементы друг от друга, то разумно сделать его ширину минимально необходимой, но он должен быть в любом случае ощутимо больше межстрочного интервала, чтобы строки в соседних колонках не выглядели продолжением друг друга.
Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: текстовые блоки, заголовки, изображения.
Иерархическая — сетка с интуитивным размещением блоков, которая фокусируется на пропорциях и визуальном весе элементов в дизайне. Этот тип сетки часто используется, когда контент не стандартизированный и не однообразный. Часто встречается для бизнес доменов, связанных с модой, фотографией, искусством.
Наиболее сложной для построения является модульная сетка, она включает в себя в том числе и построение колоночной. Поэтому давайте рассмотрим принципы её создания.
Принципы построения модульной сетки
Модульная сетка — это инструмент, но не метод, поэтому прежде чем создавать сетку, необходимо сделать черновой макет страницы, продумать элементы, которые могут использоваться, и только потом переходить к её созданию. Чтобы построить модульную сетку, необходимо последовательно построить сначала базовую, потом применить к ней колоночную и, задав размер модуля, мы получим дизайнерскую, т.е. вашу разработанную под конкретный проект сетку.
И так, начнем с базовой сетки. Она напоминает миллиметровую бумагу. Она позволит перемещать самые мелкие элементы макета, сохраняя все расстояния между ними равными и единообразными. Шаг сетки зависит от неделимых элементов (атомов) макета. Ими могут быть базовый шрифт и высота строки, радио-кнопка, чекбокс, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.
Что такое модульная сетка и для чего она нужна дизайнерам
Дизайнер — не свободный художник, который рисует с чистого листа. Обычно он начинает работу с создания сетки.
Что это такое?
Модульная сетка — основа для дизайн-макета. Она состоит из простых геометрических фигур — модулей одинакового размера, расположенных в определённой последовательности. Это значит, что всё пространство макета сначала разбивают на равные ячейки, а затем размещают объекты так, чтобы размер любого изображения или текста на макете был кратным размеру модуля.
Такая система упрощает работу дизайнеров: помогает сделать макет пропорциональным, понятным, гармоничным и не потратить при этом много времени.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
А как это выглядит?
Например, вот так. Справа вы видите сетку, в центре — надписи, наложенные на эту сетку, а справа — готовый дизайн.
Что-то непонятное. Неужели без такой сетки нельзя, например, сделать сайт?
Можно, конечно, но не так удобно. Как определить расстояние между двумя соседними блоками на сайте? Где будут располагаться баннер, заголовки, основной текст? Сколько должно быть пустого пространства? Если решать это «на глазок», дизайн, скорее всего, получится небрежным: у элементов будут разные размеры и отступы. Такой интерфейс не просто менее красив, но и неудобен: чтобы пользователь мог быстро найти всё, что ему нужно, важна предсказуемость расположения элементов.
Сетка помогает привести макет к единообразию. В ней заданы высота и ширина минимального блока — модуля. Размер любых изображений, текстов или разделов должен быть кратным этому числу. Благодаря этому все элементы на сайте расположены гармонично, понятны пользователю и приятны глазу.
Сетки используют только в веб-дизайне?
Не только. Их вообще-то придумали в газетном деле, ещё в прошлом веке. Раньше художники-оформители с нуля работали над газетами, но на это уходило много времени. А сетка позволила всё делать по шаблону, гораздо проще и быстрее.
Современные печатные газеты, журналы, каталоги непременно свёрстаны по сетке. Это зачастую актуально и для дизайна этикеток, листовок, упаковки — для всего, где есть иерархия текстовых блоков и изображений. Иногда модульная сетка входит в фирменный стиль компании: на листовках, баннерах, рекламных материалах элементы располагаются одинаково, и это работает на узнаваемость бренда.
Даже многие логотипы создают по модульным сеткам. Скажем, вот так:
Ого! Любой логотип можно сделать по модульной сетке?
Нет, не любой. По модульной сетке, состоящей из сходных элементов, можно создавать только простые лаконичные логотипы. Более сложные детализированные картинки строятся по произвольной сетке — без повторения размеров элементов. А иногда и вовсе никакой сетки не используется. Посмотрите на логотип ниже — слово «рынок» было написано от руки тушью. Естественно, ни в какую сетку оно не вписывается.
Значит, модульная сетка — не универсальный инструмент?
Это очень популярный инструмент, но, конечно, не универсальный. Бывает, что сетка не нужна вовсе. Особенно это касается творческих задач: например, разработки логотипов или иллюстраций. А случается, что сетка нужна, но не модульная.
Например, в дизайне полиграфии и сайтов иногда используют колоночные сетки — в них задана ширина колонок и отступов между ними, но высота блоков может быть произвольной. Есть ещё иерархическая сетка — она подразумевает размещение элементов без жёсткой структуры исходя из визуальной привлекательности макета. Так что у дизайнеров уйма вариантов организации работы. Но модульные сетки экономят время и силы: достаточно один раз подобрать оптимальные размеры модуля, а затем просто заполнять контентом получившиеся ячейки.
А как делают модульные сетки?
Зависит от того, что за дизайн нужен: сетки для сайта и для логотипа, естественно, будут совсем разными. Когда речь идёт об оформлении текста — например, в рекламной листовке, журнале или на сайте, сетки обычно составляют из прямоугольников или квадратов. Так элементы дизайна будут легко укладываться на прямоугольный монитор или на печатную страницу.
Размеры модулей тоже различны. Страницу журнала легко можно разделить на 12 колонок, а вот в мобильной версии сайта такие мелкие модули вряд ли понадобятся.
С логотипами ситуация другая: в качестве модуля могут брать любую простую фигуру: квадрат, многоугольник, овал или треугольник. Когда дизайнер продумывает логотип или набрасывает эскизы от руки, он уже примерно понимает, на основе каких фигур можно нарисовать знак.
Дизайнеры чертят сетки сами с нуля?
Сетки для логотипов неизбежно нужно делать вручную, потому что они сложные. Если же речь о сетке для печати или для веб-дизайна, в Google можно найти много онлайн-генераторов: они выдают расчерченные колонки и клеточки по заданным размерам. Но и вручную делать сетки технически совсем не сложно — например, в Photoshop, Illustrator, InDesign, Figma или других редакторах. Основная работа состоит в том, чтобы придумать оптимальные размеры и число модулей для реализации конкретной идеи.
Спроси эксперта: всегда ли нужна модульная сетка?
Короткий совет Игоря Штанга о том, зачем на самом деле нужны модульные сетки и в каких случаях лучше работать без них.
Dana Moskvina / Skillbox Media
Вопрос от читателя
Все твердят про модульную сетку. Так ли она нужна? Когда можно обойтись без неё?
Никита Егоров, Новокузнецк
На этот вопрос ответил Игорь Штанг.
Графический и информационный дизайнер. Автор курса «Типографика и вёрстка».
Сетка не самоцель, а один из способов наведения порядка.
Если вы делаете многоразовый макет (шаблон), полезно задать правила, по которым он будет функционировать. Намного удобнее определиться с размерами один раз, чем придумывать их снова и снова. Это актуально для сайтов, многостраничников и серийных макетов.
С другой стороны, если макет одноразовый, то иногда проще и быстрее всё расставить на глаз. Вместо расчёта сетки вы просто выравниваете элементы друг с другом и не думаете о масштабировании системы. Без сетки можно сверстать, например, объявление, визитку или плакат.
Больше о способах применения сетки читайте в моей статье «Сначала конструкция, потом сетка».
Что такое модульные сетки и зачем они нужны вам, если вы запускаете свое медиа
Как сделать материалы, которые вы публикуете, удобными для восприятия? Один из главных дизайн-инструментов для достижения этой цели — сетки. Рассказываем, как они появились, каково их значение и какими они бывают.
Что это вообще такое?
Модульная сетка — это система организации объектов в пространстве, основанная на рядах и колонках определенного, строго заданного размера. В ячейках можно располагать единицы контента: текстовые блоки, заголовки, врезки и изображения.
Сетки можно встретить не только в информационном дизайне, но и в архитектуре, в интерьерах и в градостроительстве. Во всех этих областях сетки строятся по схожим принципам, связанным со стремлением привнести в расчерчиваемое пространство порядок и гармонию.
Обратите внимание на один из эскизов развития Манхэттена 1807 года, который подчиняется строгой сетке улиц, проходящих с запада на восток и с севера на юг
Изначально сетка применялась в газетном деле в целях повышения эффективности. Макетные листы позволяли снизить издержки на содержание штатных типографов, стандартизируя вид страниц и экономя время самих «художников-оформителей». Вскоре на смену макетным листам пришли более гибкие модульные сетки.
Следуя новым веянием, в начале 1960-х художник-оформитель Питер Палаццо обновил дизайн газеты New York Herald Tribune. В 1966-м художественный редактор Джанет Коллинз ввела новую верстку в лондонской Times. Оба этих преобразования показали работникам индустрии, что единый стиль оформления повышает качество взаимодействия читателей с изданием. Газетчики и редакции журналов быстро поняли необходимость сеток и начали применять их в своей практике.
Как и во времена газет, в digital-эпоху правильно примененные сетки помогают удерживать внимание читателя, повышают качество восприятия текста и вообще улучшают опыт его взаимодействия с материалом. Сегодня в дизайне медиа сетка придает информации упорядоченность и согласованность. Она ответственна за структурирование содержимого отдельных статей и издания в целом.
«Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя».
Какими бывают сетки?
Существует множество видов и конфигураций сеток: от примитивных «клеточек», как в школьной тетради, до сложносочиненных структур с разными расстояниями между горизонталями и вертикалями.
Мы собрали наиболее распространенные и ставшие уже «классическими» образцы, знакомство с которыми поможет лучше понять модульное проектирование.
Простейшая сетка, которая легла в основу модульной системы, состояла из квадратов и была похожа на обычную разграфленную таблицу. Она начала использоваться уже в конце первой четверти ХХ века. Дизайнеры-типографы из Цюриха и Базеля усовершенствовали ее в послевоенные годы, что совпало со скачком интереса к Гельветике и подобным ей шрифтам, породив школу «швейцарской типографики».
Первым опытом применения сетки в книжном деле была разработанная Максом Биллом система для книги «Die Neue Architektur». В этой книге, вышедшей в 1940 году, Альфред Рот применил деление страницы на девять горизонтальных модулей. Они позволили свободно располагать иллюстрации и размещать на них текст на трех языках. Несколькими годами ранее, опираясь на идеи «новой типографики» Баухауса, Билл использовал шестимодульную сетку в своем знаменитом плакате «Negerkunst», созданном для выставки южноафриканской наскальной живописи в 1931 году.
12-колоночная сетка Вилли Флекхауза
В 1959 году дизайнер Вилли Флекхауз создал свой вариант сетки, приспособленной для страниц большого формата. Изначально созданная по заказу журнала Twen, она в последующие годы не раз применялась Флекхаузом при макетировании других изданий.
Многослойная сетка Карла Герстнера
Примером радикального усложнения может служить сетка Карла Герстнера, разработанная для журнала Capital. Аллен Херлберт описывает ее так: «Фактически она представляет собой шестиколонник с наложенным на него четырехколонником. Эта сетка также дает возможность выбрать шесть, четыре, три или две колонки, но в придачу предусматривает еще и возможность оригинального пятиколонного макета. Такая сетка требует тщательного изучения, и художнику-оформителю придется немало потрудиться, прежде чем он сможет свободно и творчески ею пользоваться».
Есть ли какие-то альтернативы сеткам?
Сетки — лишь один из методов, которые графический дизайнер может применять при разработке макетов. Он основывается на более ранних техниках размещения информации, которыми тоже не следует пренебрегать, тем более что именно благодаря им возникли модульные системы.
Современные технологии дают дизайнерам много возможностей: в начале 1990-х, на заре Интернета, сайты верстались c помощью HTML-таблицы, и при этом дизайнеры могли использовать сетки, а могли игнорировать их. Кроме того, с помощью кода HTML можно было сделать так, чтобы текст на странице обтекал картинку (за это отвечает свойство стиля float). Однако это не всегда хорошо выглядело: свойством легко пользоваться, но без сеток результат выглядел непрофессионально, потому что у дизайнера не было внутренней структуры, которая позволяет ему упорядочить информацию.
С распространением мобильных устройств многие приемы пришлось пересмотреть. Дизайнеры поняли, что сложная верстка плохо смотрится на экране смартфона, а броские баннеры с анимацией могут раздражать пользователя, который не может рассмотреть их в маленьком масштабе. Кроме того, от некоторых элементов пришлось отказаться из-за медленной скорости загрузки. Для создания адаптивных веб-сайтов, которые легко отображаются не только на компьютерах, но и на планшетах и смартфонах, многие стали использовать колоночные сетки (они используются и в Setka Editor). По-прежнему есть дизайнеры, которые не используют этот метод. Они считают, что сетки сильно ограничивают возможности, но мы советуем все равно разобраться в сетках — лучше понимать правила, прежде чем нарушать их.
Чтобы грамотно пользоваться сетками, старайтесь узнавать больше о теории и практике графического дизайна, а также анализировать сетки, которые используют ваши любимые медиа. Такое упражнение поможет лучше понять современный веб-дизайн, распознавать полезные приемы и копить интересные референсы. Все это инвестиции в будущее, которые позволят вашему изданию выглядеть лучше и привлекать новую аудиторию.
«Модульные системы в графическом дизайне»: основы швейцарской вёрстки
Рассказываем, как рассчитать модульную сетку для макета и как её можно применить в трёхмерном пространстве.
Иллюстрация: Rawpixel / Freepic / Josef Müller-Brockmann / medium / Meery Mary для Skillbox Media
Модульная система — одна из основ швейцарского дизайна, который стал популярен во второй половине 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.
Модульная конструкция
Йозеф советует начинать работу над макетом не с сетки, а с определения базовых параметров и проработки эскиза. При этом дизайнеру необходимо представлять в голове, сколько в итоге у него получится колонок, какие между ними должны быть отступы, какой кегль должен быть у шрифта:
Любая работа начинается с изучения проблемы. Должны быть определены формат, текстовый и иллюстративный материалы, подписи, гарнитура шрифта, способ печати и качество бумаги. Потом дизайнер в поисках решения задачи начинает делать маленькие эскизы. Эскизы должны быть точно пропорциональны окончательному формату, чтобы избежать ненужных осложнений при перенесении их в формат оригинала.
Чтобы у дизайнера оставалась вариативность в дизайне, Йозеф советует использовать в макете две колонки. При необходимости их можно легко увеличить до четырёх, шести или двенадцати и добиться интересной композиции:
Две колонки для текста и иллюстраций создают много возможностей: в одной колонке помещается текст, во второй — иллюстрации. Текст и иллюстрации могут печататься в одной и той же колонке, друг под другом. Кроме того, две колонки ничто не мешает ещё раз разделить и получить четыре.
В модульной сетке есть базовые линии, по которым выравниваются строки. Верхняя граница должна проходить по верхней линии прописных, а нижняя — по нижней линии выносных элементов строчных. По ним же определяется высота одной строки:
В модульной вёрстке важно соблюдать аккуратность и знать, сколько строк текста может поместиться в колонке. Йозеф советует рассчитывать это значение по алгоритму — проще всего его объяснить на примере:
При модульном расположении элементов можно использовать интересные выразительные приёмы. Например, здесь на первой странице большой отступ от заголовка подчёркивает его важность. А на второй — демонстрация приёма, когда текст и иллюстрации не имеют отношения друг к другу, но выглядят связанно:
Иллюстрации в модульной системе
Модульная сетка помогает расположить иллюстрации на макете быстро, аккуратно и логично. Чтобы результат получился хороший, дизайнеру важно иметь чувство ритма и композиции. Йозеф предупреждает, что сетка — лишь инструмент и не гарантирует композиционного успеха.
Иллюстрации, рисунки, статистические данные, таблицы и тому подобное, так же как и фотографии, могут быть соразмерны модульным клеткам. Иллюстрации со свободным контуром возможно удачно расположить на странице таким образом, чтобы их фон совпадал с модульной клеткой. Часто удачный результат даёт подложка светло-серого тона, на которой печатается иллюстрация, в результате иллюстрация сохраняет самостоятельность, но благодаря светлому фону строже соответствует модульному порядку.
На примерах красными диагоналями указано, как можно расположить иллюстрации в сетках из 8 и 20 модульных клеток. Красными линиями указаны диагонали иллюстраций, которые можно расположить в модулях:
Аналогично можно рассчитать положение для макетов и из большего количества клеток.
Если вы хотите поставить иллюстрацию без чётких границ вразрез, макет может выглядеть неустойчиво. В этом случае Йозеф советует использовать серую или цветную плашку под картинкой — её размер должен вмещаться в модуль, чтобы вся конструкция страницы оставалась крепкой.
Интересных выразительных эффектов можно добиваться и простейшими приёмами. Например, на этом макете кажется, что свободное пространство в левой колонке — часть композиционного оформления. Но Йозеф предупреждает, что хорошее впечатление от материала создаётся в первую очередь за счёт содержания текста и иллюстраций:
Фотограф не всегда сможет самостоятельно понять контекст, как и для чего его фотографии будут использованы. Поэтому Йозеф рекомендует дизайнерам участвовать в съёмках и обсуждать свои композиционные идеи с фотографом. Это правило работает во всех проектах, а не только в продуктах с модульной системой.
Только если фотограф и дизайнер работают в тесном сотрудничестве, у фотографа появляется возможность компоновать свои снимки с помощью модуля, разработанного графическим дизайнером. Тогда фотограф может нанести модульную сетку на матовое стекло своей камеры и располагать объекты съёмки в соответствии с модулем или сделать себе модульную сетку в виде металлической либо деревянной конструкции, ставить её перед объектами и фотографировать их вместе с сеткой.
Модульная система в фирменном стиле
Фирменный стиль — это не просто логотип и пара похожих паттернов. Клиенту придётся использовать его для своих текущих и будущих задач. Дизайнеру необходимо это учитывать, чтобы итоговую концепцию можно было применять в любых форматах без ущерба для эстетики.
Для соблюдения единства в дизайне печатного издания внешнее оформление (сторонки обложки) должно делаться по той же модульной системе и шрифтами тех же размеров, что и внутреннее оформление. Такая форма последовательного, логичного оформления требует, чтобы концепция дизайна обложки с самого начала разрабатывалась вместе с внутренним оформлением. Для этого должна быть найдена такая модульная структура, с помощью которой можно сделать красивую и броскую обложку и в то же время объективно и функционально представить внутренние материалы издания. Такая задача ставит перед дизайнером множество вопросов, которые он должен как следует обдумать, чтобы найти функциональное и эстетически убедительное решение.
Чтобы фирменный стиль был гибким, важно на старте соблюдать единообразие. Вот некоторые критерии, о которых Йозеф советует не забывать:
Посмотрите, как выполнена вёрстка этого рекламного проспекта. И обложка, и развороты оформлены в едином стиле по одной и той же модульной сетке:
Йозеф отмечает, что внутреннее и внешнее оформление должны быть в едином стиле, чтобы подчеркнуть целостность продукта. Добиться этого сложно, так как дизайн разворотов и обложки приходится разрабатывать одновременно.
Модульная система в оформлении трёхмерных пространств
Никто не мешает дизайнерам применять модульную структуру и в дизайне зданий и общественных пространств. Она помогает эффективнее организовать визуальную коммуникацию и экономит время за счёт систематизации.
Задача по оформлению трёхмерного пространства при помощи модульной структуры теоретически не отличается от работы по оформлению двухмерной плоскости. На примере с кубом легко объяснить принципы модульного оформления. Если нужно оформить внешние и внутренние плоскости, они покрываются модульной сеткой, спроектированной для данного оформления. Тексты и изображения, а также мебель будут размещаться по модульной структуре. Отверстия в стенах, двери, окна и светильники — расположение всего этого определяется размером модуля.
Куб в развёртке поможет вам представить, как то же пространство будет выглядеть на плоскости. На этом макете дизайнер подбирает поля и размер модульной ячейки.
Но несмотря на визуальное упрощение, подобрать оптимальные пропорции для трёхмерного пространства очень сложно, так как дизайнер не может изменить площадь помещения.
Посмотрите на этот макет — информационные стенды висят на уровне глаз человека, а двери и светильники подчиняются общей модульной структуре комнаты. Добиться такой точности трудно:
Если помещение слишком большое, Йозеф советует делить каждую стену на несколько. Это не только позволит быстро собрать стенд, но и сделает его долговечным — одинаковые стенды легко упаковывать и хранить, а обновлять придётся лишь информационное наполнение.
Это — модель выставочного пространства с соразмерностью 1:20. Павильоны уже практически готовы, остаётся только разместить необходимые для выставки предметы. Йозеф отмечает, что этот приём очень хорошо выручает на переговорах, так как любые замечания можно снять сразу на встрече — достаточно только поменять расположение модульных стен.
Стенды передвижной выставки «Швейцария» сделаны так, чтобы их можно было быстро установить и в помещении, и на улице. Все графики, изображения и тексты создают впечатление единства благодаря модульной структуре.