Привет! На этой неделе изучим важный для дизайнера инструмент организации пространства — модульные сетки. Расскажем теорию и покажем классные примеры сайтов и постеров. За помощь в подготовке недели спасибо железным дизайнерам — Сюзанне Оганесян, Насте Нечкиной, Кристине Широковой; и старшему арт-директору — Сергею Гончарову.

Начать рассказывать о сетках и умолчать о швейцарской школе графического дизайна — непростительное дело! В конце ХХ века сетки состояли из квадратов и внешне напоминали обычную таблицу с графами. В послевоенные годы типографы из Цюриха и Базеля усовершенствовали эту систему и создали отдельное течение — швейцарский стиль.

Главная идея направления заключалась в смещении фокуса с декора на содержание. То есть новые сетки должны были помогать зрителю воспринимать большой объём информации. И тут работало простое правило: чем меньше шрифтов используется, тем быстрее читается текст. Предпочтение отдавалось шрифтам без засечек — Helvetica, Futura, Frutiger.

#модульные_сетки

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

・Первым опытом применения сетки в книжном деле стала разработанная Максом Биллом система для книги Die Neue Architektur. Новшество состояло в делении страницы на девять горизонтальных модулей, которые позволяли свободно размещать иллюстрации и текст.

・В 1959 году дизайнер Вилли Флекхауз создал вариант 12-колоночной сетки по заказу журнала Twen. А чуть позже его коллега Карл Герстнер разработал радикально усложнённый макет для Capital — его сетка предоставила дизайнерам возможность выбора между двумя, тремя, четырьмя, пятью и шестью колонками.

#модульные_сетки

Переместимся в настоящее время и посмотрим на современные тренды в вёрстке.

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

・Более необычный вариант — сайт-презентация шрифта Avant с горизонтальной сеткой. Немного непривычно читать текст таким образом, но работа впечатляет.
P.S. Перелистывай страницы при помощи клавиши “Space” 🤖

#модульные_сетки

・Если в детстве ты увлекался пазлами, то тебе точно понравится сайт Urbane Künste Ruhr. Сначала может показаться, что ничего непонятно, но потом входишь во вкус и понимаешь, что каждый блок, каждая линия и каждый квадрат с детальной точностью находятся на своих местах. А ещё здесь классно реализована анимация — взаимодействие с пользователем происходит очень плавно.

・За вдохновением можно приходить на typographic.work, где собрана коллекция постеров со всего мира. Раз в месяц на сайте появляются очень разноплановые работы от дизайнеров-типографов.

#модульные_сетки