![](https://bbbl.dev/storage/images/73/95/98/33/derived/4c912efc7c3e0791afb33467a83c6a25.jpg)
Йозеф Мюллер-Брокманн полжизни использовал один единственный шрифт, отказывал заказчикам из табачных компаний и прославился книгой о модульных сетках. Чему у него поучиться — рассказываем в статье.
Отец-основатель швейцарского стиля, амбассадор модульных сеток и прадедушка современного UX-дизайна Йозеф Мюллер-Брокманн родился в 1914 году. Он известен своими лаконичными плакатами, преподавал студентам, работал консультантом в IBM и написал несколько книг по истории дизайна и технике создания плаката.
![](https://bbbl.dev/storage/images/85/83/79/58/derived/2ec9a339ed17e0f2d0a546c847661dbd.jpg)
В интервью мэтр рассказывал, что стал графическим дизайнером случайно — потому что много рисовал в тетрадках во время школьных уроков. С 16 лет он начал работать иллюстратором и учиться в школе искусств в Цюрихе.
Свой минималистичный стиль Мюллер-Брокманн выработал постепенно. В конце 1930-х стал востребованным в рекламе и открыл студию, с конца 1950-х — начал преподавать и путешествовать с лекциями по Америке и Европе.
Наряду с Яном Чихольдом, Йозеф Мюллер-Брокманн стал одним из основоположников швейцарского стиля. Это направление дизайна отличалось строгим применением модульных сеток, простой типографикой и лаконичными упрощенными иллюстрациями.
В основе швейцарского стиля лежит функциональность — именно то, что требуется от современного сайта. Реклама середины прошлого века — отличный источник идей, и никто не обвинит вас в плагиате. Посмотрим, какие принципы работы Мюллера-Брокманна остаются актуальными сейчас.
🎯 самые полезные лайфхаки в мини-формате обитают в нашем telegram. постим раз в день, коротко и по делу.
1. Грамототно использовать сетки
Мюллер-Брокманн знаменит в первую очередь благодаря книге «Модульные системы в графическом дизайне». В ней он описывает свою работу над плакатами: разбирает, с помощью каких сеток выравнивал иллюстрации и тексты, как выбирал шрифты, рассчитывал размеры интервалов и полей. В начале XX века сетки мало использовались в рекламе, зато уже активно применялись в газетной верстке. Плакаты швейцарского дизайнера совсем не были похожи на скучные газетные листы: он умудрялся делать очень разнообразные работы.
![](https://bbbl.dev/storage/images/48/53/42/65/derived/76b75eec16848c3dc7758ab731716c37.jpg)
![](https://bbbl.dev/storage/images/88/76/37/73/derived/4f6f6201d49eee234811eeb5a905101c.jpg)
![](https://bbbl.dev/storage/images/25/23/92/07/derived/cdb0f109d6d2cd092fe8a903d83001f0.jpg)
В книге Мюллер-Брокманн рекомендует начинать работу с эскиза, а не с сетки. Определившись с композицией, можно выбрать модульную систему, которая поможет реализовать задумку: сделать всё ровным и аккуратным. А если начинать сразу с сетки, она будет мешать и создавать ненужные рамки. Это правило актуально и для веб-дизайна: если заведомо ограничивать себя какой-то сеткой, есть риск сделать шаблонный сайт.
Мюллер-Брокманн «подгонял» сетки под композицию, а не наоборот. И, соблюдая общее расположение элементов, не боялся экспериментировать в мелочах.
100+ курсов по веб-дизайну на Udemy по цене от $10 — с практическими кейсами и примерами
![](https://bbbl.dev/storage/images/48/24/19/27/derived/6256b9f2002bd7b65d7ae081e43c292d.jpg)
«Плакат „Музыка Вива“ оформлен с помощью модульной сетки из четырёх с половиной клеток в ширину и четырёх — в высоту. Два слова musica viva расположены крестообразно, буквы в слове musica набраны с неравномерными пробелами, это создаёт ритм. Мелко набранные строки программы совпадают с буквами musica viva. Так создаётся впечатление строгой, но изысканной архитектоники.»
Мюллер-Брокманн писал свое пособие для полиграфистов. Но модульные сетки — это то, что веб-дизайнеры позаимствовали у печатников почти без изменений. Так что плакатами мастера вполне можно вдохновляться. Интересная верстка сайтов — которая при этом не хаотична, а выверена по сетке — привлекает внимание и заставляет задержаться на странице.
![](https://bbbl.dev/storage/images/34/40/04/45/derived/161134f33e4530c094d358b24e0c7f79.jpg)
![](https://bbbl.dev/storage/images/44/84/02/28/derived/9049d1f369e1836303d5eed85cff7155.jpg)
2. Следить за разборчивостью
Даже в книге, посвящённой сеткам, Йозеф Мюллер-Брокманн много внимания уделяет шрифтам. Сам дизайнер отдавал предпочтение исключительно гротескам, а во второй половине жизни и вовсе полностью перешёл на Akzidenz-Grotesk. Такая аскеза была свойственна модернистам: Массимо Виньелли, например, ограничивался всего пятью шрифтами. Но у представителей швейцарской школы, и Мюллера-Брокманна в частности, к тексту было особенно трепетное отношение. Для них на первом месте была практичность, а в случае с рекламой — лёгкость чтения сообщения.
Мюллер-Брокманн рекомендовал использовать не более 7-8 слов в одной строке и внимательно относиться к интерлиньяжу. Он считал, что слишком большие расстояния между строками вредят читаемости не меньше, чем маленькие. Оптимальные интервалы в каждом конкретном случае лучше подбирать на глаз, уже имея достаточный опыт.
![](https://bbbl.dev/storage/images/44/65/60/37/derived/c2e314f8b66f8ae1282a7b32390d3232.jpg)
Во многих плакатах швейцарской школы именно тексту отводится центральное место в композиции. Современная реклама не так лаконична, но в дизайне сайтов типографика всё ещё играет ключевое значение. И хотя в тренд вошли контрастные антиквы, интерфейсные шрифты остаются консервативными. А грамотно выверенные пустоты между надписями напрямую влияют на то, сможет ли пользователь быстро разобраться в информации на сайте или сбежит к конкурентам.
![](https://bbbl.dev/storage/images/92/53/21/30/derived/a4fa91b6c6f841fb986d5e9ce4727e26.jpg)
Где прокачать СКИЛЛЫ
Изучить основы типографики можно на курсе Skillbox, а на Domestica есть узкий курс по работе со шрифтами для экранов.
3. Делать асимметричные композиции
Выравнивание элементов по сетке и легко читаемые надписи — то, что в хорошем дизайне должно быть по умолчанию. Плакаты Мюллера-Брокманна висят в музеях не потому, что на них все ровно и разборчиво: они, помимо этого, живые и динамичные. В большинстве работ картинки и тексты размещены асимметрично — это делает их интересными. Вот один из самых известных его плакатов:
![](https://bbbl.dev/storage/images/89/19/50/70/derived/bdd06c62d604904e62d7662be81e9121.jpg)
Когда на постере больше двух строк текста и модульный принцип становится очевиден зрителю, асимметрия помогает «разрядить обстановку»: делает строго выверенный дизайн не слишком строгим. Так работают и асимметрично расположенные иллюстрации, и надписи.
![](https://bbbl.dev/storage/images/76/85/79/05/derived/ee71543538816a283c64dc3ab1f9a2c3.jpg)
ГдЕ ПРОКАЧАТЬ СКИЛЛЫ
Асимметрия — несложный приём, который помогает вдохнуть жизнь в дизайн, не перегружая его лишними деталями. Освоить азы композиции можно на курсе Domestika.
![](https://bbbl.dev/storage/images/20/26/02/78/derived/a08a146ffd09421ca60fdaf407d3ecbf.jpg)
![](https://bbbl.dev/storage/images/61/59/22/46/derived/1f278ef03a0bf09ad8ccf28ef73ef8ac.jpg)
4. Выбирать простые формы
Йозеф Мюллер-Брокманн, как и его последователи, представители швейцарской школы, любил незамысловатые круги, квадраты и треугольники с однотонной заливкой. Из простых фигур он собирал не только абстрактные композиции, но и минималистичные иллюстрации, изображающие вполне конкретные предметы. Если бы мэтр был современным веб-дизайнером, он точно предпочел плоские векторные картинки трехмерным.
![](https://bbbl.dev/storage/images/35/42/53/50/derived/76d1727ae72fb9cca5b612bf58ceff05.jpg)
Из фигур дизайнер складывал целые буквы — опять же с помощью модульных сеток.
![](https://bbbl.dev/storage/images/35/42/57/25/derived/18c691d4f3acb9cd3b9b5f571bf609a5.jpg)
![](https://bbbl.dev/storage/images/45/39/05/09/derived/e7025a78b91fa513448d4e5f8f586b0f.jpg)
Лаконичная графика — беспроигрышный вариант для сайта. Трехмерные картинки зачастую долго загружаются, фотографии может быть трудно разглядывать с маленького экрана, так что векторные иллюстрации остаются дизайнерскими фаворитами. Они могут быть разной детализации, но пример Мюллера-Брокманна показывает: двух-трех цветов, кругов, прямоугольников и треугольников вполне достаточно. Многие сайты это подтверждают.
![](https://bbbl.dev/storage/images/16/23/23/68/derived/0fdda989ac99e1cfae7f100062c98b44.jpg)
Буквы и цифры, построенные на основе из фигур — тоже рабочее решение:
![](https://bbbl.dev/storage/images/28/50/44/07/derived/07a1134c027998e81ea333725b864f97.jpg)
5. Не изменять своим принципам
Мюллер-Брокманн считал, что дизайнер рекламы обладает большим влиянием на общество и должен ответственно подходить к своей работе. Правда, отказывать «неэтичным» клиентам дизайнер начал уже во второй половине жизни.
![](https://bbbl.dev/storage/images/47/41/14/47/derived/8d4bdcbf068235d922a4c4d09424eab5.jpg)
По версии биографа Барбары Джунод, Мюллер-Брокманн мало знал о вреде курения — эта информация не была так распространена, как сейчас. Когда дизайнер услышал, что сигареты провоцируют рак, он прекратил сотрудничество с фабрикой Turmac. Этот случай сподвиг его составить список продуктов, с которыми он не будет работать. В него вошли алкогольные напитки, оружие и заказы от любых политических партий.
TL;DR
Йозеф Мюллер-Брокманн известен своей книгой про модульные сетки, но и помимо неё он сделал много интересного. Плакаты, выверенные строго по сетке, не были бы так хороши без его композиционных приёмов и тонкой работы с типографикой. А решение наложить бан на неугодных заказчиков — хоть и дискуссионная тема, но точно вызывает уважение.
У дизайнера можно поучиться творчески работать с модульными сетками, внимательно относиться к типографике, добавлять асимметрию в макеты, не сбрасывать со счетов простые формы и помнить об этике в работе.
Материал может содержать партнерские ссылки. Это не отражается на стоимости сервисов или товаров. Партнеры не влияют на наши рекомендации и содержание текста.
Почитать bubble в микро- и даже наноформате можно в instagram. подключайтесь 🤳