Сетка, которую мы перестали замечать

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

Сетка настолько привычна, что почти перестала восприниматься как дизайнерская идея. Мы открываем Figma, задаём двенадцать колонок, определяем margins и gutters и начинаем работать. Даже если визуальная сетка отключена, её логика остаётся внутри компонентов, auto layout, дизайн-системы и кода. Но сетка не возникла вместе с интерфейсами, и даже знаменитые швейцарские дизайнеры не изобрели её с нуля. Интереснее другое: в XX веке технический приём организации страницы постепенно превратился в способ мышления о дизайне как системе. Именно это наследует современный digital.

До сетки была страница

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

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

Новая типографика изменила сам вопрос

В 1920-е дизайнеры европейского авангарда начали сознательно разрушать симметрию традиционной печатной страницы. Конструктивисты, De Stijl, Баухаус экспериментировали с геометрией, фотографией, асимметрией, масштабом и пустым пространством. Ян Чихольд систематизировал многие из этих идей в книге Die Neue Typographie 1928 года. MoMA отмечает, что «Новая типографика» отвергала традиционное симметричное расположение текста и рассматривала страницу как свободное поле, внутри которого блоки информации можно организовать в ясную асимметричную композицию. MoMA

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

Швейцарцы превратили эксперимент в систему

После Второй мировой войны идеи модернистской типографики получили особенно последовательное развитие в Швейцарии. То, что позже стало известно как Swiss Style или International Typographic Style, строилось на асимметрии, гротескной типографике, фотографии и систематическом использовании сетки. Cooper Hewitt описывает эти признаки как характерные для направления 1940–50-х годов. Cooper Hewitt

Особенно важен здесь Йозеф Мюллер-Брокманн. Для него сетка была не декоративным стилем и не способом сделать все плакаты одинаковыми, а инструментом, позволяющим организовывать множество элементов по общей логике. В 1981 году вышла его книга Grid Systems in Graphic Design, систематизировавшая использование модульных сеток для книг, плакатов, каталогов, выставочных конструкций и других форм коммуникации. Издательство Niggli до сих пор характеризует её как практическое руководство по построению структурированных и воспроизводимых визуальных решений. Niggli

Здесь появляется принцип, который гораздо важнее характерного «швейцарского вида»: дизайнер определяет не положение каждого элемента отдельно, а систему отношений, внутри которой элементы находят своё место. Это уже почти определение современного дизайн-системного мышления.

Сетка оказалась противоположностью ограничения

На первый взгляд сетка должна уменьшать свободу: вот колонки, вот модули, вот линии — придерживайся их. Но некоторые модернисты видели её прямо противоположным образом. Вим Краувел, получивший прозвище Gridnik, использовал сетку как генеративную систему. Cooper Hewitt подчёркивает, что для него структура должна была не подавлять творчество, а освобождать дизайнера от необходимости каждый раз заново принимать одни и те же базовые решения. Cooper Hewitt

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

Экран сначала попытался притвориться страницей

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

Проблема заключалась в самом материале. Бумага имеет размер, браузер — нет. Разные мониторы, окна, устройства, системные настройки и позднее смартфоны постепенно сделали попытку сохранять фиксированный макет всё менее жизнеспособной. В 2010 году Итан Маркотт сформулировал подход Responsive Web Design: вместо отдельных фиксированных версий использовать fluid grids, гибкие изображения и media queries, позволяя одной системе адаптироваться к различным условиям просмотра. A List Apart

Сетка пережила важную трансформацию. Она перестала определять, где именно находится объект, и стала определять, как объект должен менять своё положение при изменении пространства.

От композиции к поведению

Печатная сетка существует внутри известной поверхности, цифровая должна работать с неизвестной. Поэтому современная сетка — уже не просто набор вертикальных линий. В неё входят breakpoints, минимальные и максимальные размеры, правила переноса, пропорции и приоритеты контента.

Google Material Design позже формализовал подобную модель через адаптивные сетки, в которых количество колонок и размеры полей меняются в зависимости от доступного пространства. Material Design CSS Grid перенёс эту логику непосредственно в технологию веба: спецификация W3C определяет Grid как двумерную систему размещения, оптимизированную в том числе для пользовательских интерфейсов, а сама история спецификации прямо связывает идею с сетками, традиционно используемыми в книгах и газетах. W3C

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

Затем сетка исчезла внутрь компонентов

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

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

Почему швейцарский дизайн сегодня иногда выглядит одинаковым

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

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

Это различие особенно важно сейчас. Если дизайнер начинает с двенадцати колонок просто потому, что «так принято», сетка превращается в декоративный ритуал. Метод начинается только с вопроса: что именно должна организовать эта структура?

Сегодня мы снова стоим перед тем же переходом

Generative UI, адаптивные компоненты и агентные системы постепенно делают даже responsive layout недостаточно динамичным. Если интерфейс начинает формироваться в зависимости не только от размера экрана, но и от задачи, контекста и пользователя, дизайнер снова сталкивается с уже знакомой исторической проблемой: невозможно заранее определить положение каждого элемента, поэтому приходится определять систему.

Путь от печатной страницы к AI-интерфейсу оказывается не таким длинным, как кажется. Чихольд учил видеть страницу как отношения между информационными элементами. Швейцарские модернисты превращали эти отношения в воспроизводимую структуру. Responsive design сделал структуру изменяемой, а дизайн-системы перенесли её внутрь компонентов. Следующий этап, вероятно, заставит проектировать уже не конкретную композицию, а диапазон допустимых композиций.

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

Сетка никогда не была линиями

Главная историческая ошибка — воспринимать сетку как визуальный приём прошлого. Линии были только способом показать структуру. Настоящее наследие сетки — идея о том, что дизайнеру необязательно контролировать каждый объект отдельно. Он может создать систему отношений, которая сохранит порядок при изменении содержания, масштаба и среды.

Именно поэтому сетка пережила бумагу, монитор, смартфон и responsive web. Она постепенно становилась всё менее заметной — и всё более фундаментальной.

Источники

MoMA — The New Typography. Материалы о движении 1920–30-х годов и роли Яна Чихольда в систематизации новой типографики.
https://www.moma.org/calendar/exhibitions/1013

Cooper Hewitt — A Harmony of Contrasts. История Swiss Style и работы Армина Хофманна.
https://www.cooperhewitt.org/2018/08/05/aharmonyofcontrasts/

Josef Müller-Brockmann — Grid Systems in Graphic Design. Первое издание книги — 1981 год; издательство Niggli.
https://niggli.ch/en/products/rastersysteme-fur-die-visuelle-gestaltung

Cooper Hewitt — Remembering Wim Crouwel. О сетке как генеративной системе и инструменте структурного мышления.
https://www.cooperhewitt.org/2019/09/20/remembering-wim-crouwel-1928-2019/

Ethan Marcotte — Responsive Web Design. A List Apart, 25 мая 2010 года.
https://alistapart.com/article/responsive-web-design/

W3C — CSS Grid Layout. Спецификация двумерной сеточной модели для веба и пользовательских интерфейсов.
https://www.w3.org/TR/css-grid/

Google Material Design — Responsive UI. Пример превращения сетки в адаптивную систему колонок, gutters, margins и breakpoints.
https://m1.material.io/layout/responsive-ui.html