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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

Источник

Модульные сетки в работе UX-дизайнера. Инструкция по применению

Сетка? Зачем она нужна?

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

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

Как только вы начинаете пользоваться сеткой, сложно не заметить её преимущества:

Какими бывают сетки

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

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

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

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

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

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

Принципы построения модульной сетки

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

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

Источник

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.

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика

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

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

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

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

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

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

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

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

Источник