Содержание
Тема есть, и вы примерно понимаете, что хотите рассказать. Теперь вопрос: как это должно выглядеть? Именно выразительный стиль делает плакат узнаваемым и цельным. Разберём несколько подходов к тому, как можно его найти.
Печатный плакат
Звучит парадоксально для учебника про веб, но лучший способ найти стиль для веб-плаката — обратиться к традиции печатного плакатного дизайна. За полтора века существования жанра там накоплен огромный арсенал визуальных решений, которые работают. И большинство из них прекрасно переносятся в браузер.
Начните с простого упражнения. Возьмите три-пять плакатов, которые вам нравятся, и попробуйте разобрать их на составные части. Сколько уровней типографики вы видите? Как правило, в хорошем плакате их два-три: крупный заголовок, средний подзаголовок и мелкий вспомогательный текст. Как устроена иерархия? Что вы замечаете первым, что вторым, что третьим? Из чего состоит палитра? Один-два цвета или много, контрастная она или тональная? Много ли в макете воздуха?
Обратите внимание на типографические плакаты швейцарской школы, где шрифт сам становится главным объектом плаката. Посмотрите на работы польской плакатной школы, где экспрессия иллюстрации создаёт эмоциональный удар. Загляните в японский графический дизайн, где баланс между пустотой и деталью доведён до совершенства. Все эти традиции являются источниками визуальных идей, которые вы можете переосмыслить в контексте экрана.
Попробуйте выделить из понравившегося плаката три константы и перенести их в свой проект. Например, из работы Мюллера-Брокманна можно взять сетку, ограниченную палитру и контраст масштаба типографики. Сам плакат при этом будет вашим, но внутренняя структура будет опираться на проверенное решение.
Смотрите на художников
Параллельно с классикой стоит обратиться к тем, кто уже работает с браузером как со средой для визуального высказывания. Веб-художники решают ту же задачу, что и вы, создавая визуальный опыт внутри окна браузера и их работы могут стать источником стилистических идей.
Рафаэль Розендаль создаёт одностраничные сайты, каждый из которых существует на собственном домене. Его палитра минималистична, часто ограничена двумя-тремя цветами, а взаимодействие сведено к одному жесту вроде клика или наведения. При этом каждая работа обладает отчётливым характером. Обратите внимание, как мало средств ему нужно для создания завершённого впечатления.
Олия Лялина работает с эстетикой раннего веба, где пиксельная графика, мерцающие GIF-анимации и сырой HTML становятся выразительным языком. Её подход напоминает о том, что стиль может возникнуть из ограничений, а не вопреки им. Когда у вас только базовый HTML и CSS, визуальная грубость может стать осознанным художественным решением.
Группа JODI создаёт сайты, которые выглядят так, будто компьютер сломался. Хаотичный код, глитч-эстетика, разрушенные интерфейсы. Это крайний полюс, но он хорошо показывает, что стиль в том числе осознанное нарушение ожиданий.
Более современные примеры можно найти на платформе Rhizome, которая архивирует и курирует сетевое искусство. А галерея OpenProcessing собирает работы, сделанные с помощью creative coding — генеративные визуальные эксперименты, многие из которых стилистически близки к тому, что можно реализовать в формате веб-плаката.
Розендаль описывает свой подход к стилю как поиск одной визуальной идеи в каждой работе, которую он затем доводит до предела. Цвет переливается. Форма складывается. Страница переворачивается. Один жест, одно ощущение, ничего лишнего. Для веб-плаката, который тоже ограничен одной страницей, это удивительно точная стратегия.
Соберите мудборд
Мудборд — это коллаж из визуальных референсов, собранных в одном месте. Идея не нова и хорошо знакома любому дизайнеру, но для веб-плаката у мудборда есть специфика. Помимо статичных изображений, в него стоит включить ссылки на сайты с интересным движением, ритмом, взаимодействием. Стиль веб-плаката подразумевает не только как он выглядит в статичном состоянии, но и как он себя ведёт в движении.
Соберите в мудборде несколько слоёв. Цвет и палитра — скриншоты, фотографии, фрагменты интерфейсов, которые задают нужное настроение. Типографика — примеры шрифтовых пар, характер набора, масштабные решения. Движение — ссылки на сайты или записи экрана, где вам нравится характер анимации. Текстура — грубая или гладкая, пиксельная или векторная, иллюстративная или фотографическая.
Хорошей практикой является ограничить себя на этапе мудборда. Вместо того чтобы собирать всё, что нравится, попробуйте задать рамку: одно слово, которое описывает настроение вашего плаката. Это слово станет фильтром, через который вы отбираете референсы.
Стиль через ограничения
Один из самых продуктивных способов найти стиль — сознательно ввести ограничения. Это может казаться контринтуитивным, ведь веб-плакат — свободный формат, где вроде бы можно всё. Но именно «можно всё» часто парализует.
Попробуйте ограничить палитру двумя цветами. Или запретить себе использовать изображения и работать только с типографикой и геометрическими формами. Или наоборот — отказаться от текста полностью и построить всю коммуникацию на иллюстрации. Или использовать только один шрифт, но в пяти разных размерах.
Ограничения заставляют изобретать. Когда у вас всего два цвета, вы начинаете виртуозно работать с контрастом. Когда нет изображений, типографика сама становится визуальным элементом, и вы обращаете внимание на letter-spacing, line-height и расстояние между блоками. Стиль проявляется именно там, где вы находите неожиданные решения внутри заданных рамок.
В каталоге веб-плакатов вы можете найти работы, построенные на жёстких ограничениях. Отфильтруйте по тегу «типографика» и посмотрите, сколько выразительности можно вытянуть из одного шрифта и нескольких div-ов. Или поставьте «геометрия» и изучите, как простые формы — круги, прямоугольники, линии — создают плотные и убедительные композиции.
Попробуйте сформулировать стилистическое правило для своего плаката в одном предложении. «Только чёрный и красный, шрифт один, всё движение — через rotate». Или «Пастельная палитра, мягкий blur на фоне, медленные transition по три секунды». Такое правило работает как компас — когда вы сомневаетесь, добавлять ли новый элемент, проверяйте его на соответствие правилу.
Анимации и движение
В печатном плакате стиль определяется статичными свойствами. В веб-плакате к этому добавляется ещё одно измерение — характер движения. И часто именно движение задаёт стилистический тон всей работе.
Быстрые, резкие анимации с коротким animation-duration в диапазоне от 0.1 до 0.3 секунды создают ощущение нервозности, энергии, сбоя. Медленные, плавные transition от двух до пяти секунд — ощущение спокойствия, созерцания, погружения. Циклические @keyframes с animation-iteration-count: infinite формируют пульсирующий ритм, похожий на дыхание. Ступенчатая анимация через steps() вместо плавного перехода создаёт покадровый, почти кинематографический эффект.
Подумайте о движении как о тоне голоса. Один и тот же текст на плакате будет восприниматься совершенно по-разному, если буквы мягко покачиваются, дрожат на месте или стремительно пролетают мимо. Движение — это настроение, и его стоит проектировать так же осознанно, как выбор цвета.
Когда вы будете листать каталог в поисках стилистических референсов, обращайте внимание именно на это. Какой характер движения у работы, которая вам нравится? Быстрый или медленный? Хаотичный или ритмичный? Реагирующий на вас или живущий своей жизнью? Эти наблюдения помогут вам сформировать свой собственный визуальный почерк.
