Веб-дизайн: от печати к сети

Сегодня уже никого не удивить минималистичными и, говоря современным языком, «эстетичными» сайтами. Конечно, в первую очередь, связано это с развитием инструментов разработки, но откуда же веб-дизайнеры взяли ту базу насмотренности, которая легла в основу веба нашего десятилетия?

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

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

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

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

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

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

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

Главным открытием Герстнера стала «мобильная сетка» для журнала Capital (1962). Её особенность заключалась в ширине полосы, составляющей 58 единиц, что позволяло разделить пространство на 2, 3, 4, 5 или 6 колонок, сохраняя при этом неизменный межколоночный интервал. Эта бумажная сетка работала в точности как современное свойство gap в CSS Grid, автоматически распределяя контент по заданному алгоритму.

Прямым наследником логики Герстнера в цифровой среде стала знаменитая система 960 Grid System, созданная Натаном Смитом. Сетка шириной в 960 пикселей стала стандартом веб-дизайна именно потому, что это число делится на 3, 4, 5, 6, 8, 10, 12, 16 и 20 колонок. Как и сетка для Capital, 960 Grid System предоставила дизайнерам строгую архитектуру, способную вместить любую комбинацию элементов. Развитие технологий веб-разработки позволило окончательно разделить форму и содержание: дизайнер пишет код-шаблон, в который затем динамически заливается любой текст или изображение.

Пиком эволюции «мобильной сетки» стало появление адаптивного веб-дизайна. Статичная бумага ограничивала «мобильность» макета физическими размерами листа. Экран же позволил сетке стать живой: 12-колоночный макет для десктопа теперь способен динамически сжиматься и перестраиваться в одну колонку на экране смартфона.

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

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

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