сетка мюллера брокмана параметры

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

Задача.	Перевести и издать книгу про модульные сетки.

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

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

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

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

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

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

Из главы «Для чего нужен модуль»

Источник

Основы дизайна, которые должен знать каждый креативщик

Обычный поиск в Google по запросу “образовательные онлайн-ресурсы по дизайну” даёт миллионы результатов — вовсе неудивительно, что понимание того, с чего начинать изучение, может показаться дизайнеру-новичку непосильной задачей. Чтобы стать экспертом в дизайне, как и в любом другом деле, крайне важно освоить основы.

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

Модульные сетки

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

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

Йозеф Мюллер-Брокман, известный как отец швейцарского графического дизайна, написал пособие “Модульные системы в графическом дизайне” в 1980 году. Эта книга считается обязательной к прочтению для любого начинающего дизайнера, поскольку содержит обширную базу и огромное количество примеров макетов.

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

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

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

Согласно исследованию преподавателя графического дизайна Яна В. Уайта, цветную рекламу читают на 42% чаще, чем ту же самую, но чёрно-белую. Также доказано, что присутствие цвета стимулирует память, благоприятно влияет на покупательскую способность и повышает узнаваемость бренда до 80%.

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

Большинство палитр включает от трёх до шести оттенков в зависимости от тематики. Используйте в своём дизайне универсальное правило 60%/30%/10% для доминирующего, второстепенного и акцентного цветов соответственно. Эта создаёт баланс между разными оттенками и пользуется популярностью в дизайне интерьеров. Следуя этому правилу, вы облегчите мозгу зрителя восприятие вашего дизайна.

Вот несколько онлайн-ресурсов, которые помогут вам с созданием палитры:

Как и многое другое, теорию цвета трудно понять сразу, ведь нужно время, чтобы наметать глаз. Я люблю искать вдохновение в окружающих меня цветах — в фильмах, фотографиях, иллюстрациях и т.д. Один из моих любимых каналов на YouTube — COLORS. Идея там состоит в сочетании цветов одежды музыкантов и цвета стен студии. Ещё один ресурс, к которому я часто обращаюсь — форум r/AccidentalWesAnderson, один из моих любимчиков на Reddit.

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

Типографика

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

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

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

Если нужно вдохновение, зайдите на Fonts in Use — там собрана коллекция популярных шрифтов из разных источников.

Как только определились со шрифтами, можете приступать к следующему шагу — построению модульной шкалы шрифтов. В книге Роберта Брингхёрста “Основы стиля в типографике” автор говорит, что модульная шкала, подобно музыкальной, представляет собой условленную совокупность гармоничных пропорций.

Какое отношение это имеет к шрифту? Как только вы выбрали базовый размер шрифта, вы можете рассчитать подходящие размеры для других начертаний с помощью пропорции. Я рекомендую использовать золотое сечение (1:1,618) или чистую кварту (2:3), так как именно с помощью этих пропорций создавали свои эстетичные работы математики, архитекторы и музыканты эпох Древней Греции и Ренессанса.

Вот некоторые популярные визуальные калькуляторы шрифтов:

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

Источник

nobelfaik

Блог Игоря Штанга

light gray is the new white, dark gray is the new black

Мюллер-Брокманн в книге The Graphic Artist and his Design Problems перечисляет правила «функциональной, объективной и информативной» типографики. Прелесть этих правил в том, что они не искажены чужими интерпретациями, это оригинал. Книга вышла в 1961 году.

Уже в первых двух пунктах автор оставляет дизайнера без шрифтовых средств оформления: «А набери-ка всё одним шрифтом одного начертания».

Apart from considerations of principle and practice, the rules-of-thumb briefly stated below are of importance for typography in graphic art.
a)
Never combine different type families.
b)
Never use different forms of the same family, e.g. the sans serif, in the same composition.
c)
Use few different sizes of type, but make sure those used are clearly distinguishable.
d)
Strive for tight setting.
e)
Use semi-bold and bold, not letterspacing, to emphasize a word, or isolate it.
f)
Create a relationship between image and copy, i.e. the type matter should be arranged in relation to the photograph or illustration employed so that there is a link that compels attention and is visually and aesthetically satisfying. Type and image become a harmonious composition.
g)
The leading should be chosen so that there is a space between the descenders of one line and the ascenders of the next line, without creating the impression of isolated lines. The compactness of the composition must be preserved so that the typography is easily read and remains aesthetically effective.
h)
The wordspacing should be uniform; uneven wordspacing results in unquiet text.
i)
As figures are equivalent in size to capitals, it may be necessary, so as not to disrupt the appearance of the composition, to set the figures a size smaller than the text, particularly if there is a large number of figures.

Апдейт. Мой вольный перевод:

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Кирилл Беляев

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

Система, описанная в книге, разработана в Швейцарии после Второй мировой. В её основе деление страницы (с вычетом полей) на клетки (ещё автор называет их модулями, но я так называю любой блок-прямоугольник, следуя совету о модульной вёрстке). Они «могут иметь одинаковые или разные размеры. Высота клетки соответствует определённому числу строк текста, а ширина — ширине колонки набора». Автор последовательно разбирает элементы, влияющие на размер модульной клетки. Система читается в содержании:

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

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

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

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

В-третьих, кратность и сетка избавляют от нестыкующихся элементов:

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

Мюллер-Брокманн не пишет о том, что малое число характеристик оформления легко усвоить, человек быстро разбирается в структуре и переходит к содержанию (пример — заметка Максима Ильяхова о вложенной структуре). Польза от заголовка 5-го уровня минимальна. Если структура информации сложная и не поддаётся упрощению, лучше использовать схемы и графику.

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

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

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

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

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

Модульная система — мощный инструмент, но он не спасёт слабое содержание:

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

Дополнения

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

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

Понравилось определение «иллюстрации со свободным контуром». Обычно такие иллюстрации называют так, как подсказывает контекст беседы. Определение Мюллера-Брокманна от контекста не зависит.

P. S. C ноября заметки о дизайнерском росте, типографике, подаче информации, интерфейсах, ведении проектов и городской среде читайте в блоге Кирилла Беляева (подробнее о переезде).

Источник