Дизайнер Стас Поляков рассказывает, как «Гоголь-центр» и шрифт Stratos нашли друг друга.
О задаче
Моя любимая задача, от которой каждый раз волосы встают дыбом: нужно сделать удобный сайт, но с характером. Нюанс в том, что из характера есть только логотип и афиша. В афишах единого языка не было, потому что каждый спектакль — это самостоятельное высказывание и своё настроение.
На чём же тогда делать сайт, опираясь на что? Первый рывок: давайте попробуем взяться за логотип, возьмём линии и круги. У «Гоголь-центра» уже была такая попытка: им делали плюс-минус классический сайт для театра, где пробовали обыгрывать уголки, а-ля Баухаус. Они использовали это много лет назад, не хотелось повторяться. Мы быстро сделали два варианта, но всем стало понятно, что идти надо не туда.
А-ля Баухаус
Начались долгие поиски. У меня было несколько интервью с ребятами, которые ходят в театр — часто или редко. Выяснилось, что заметная часть людей воспринимает театр не как потоковый жанр, а скорее как набор концертов. Ты не выбираешь концерт так: «Сегодня вечером я свободен, поэтому хочу куда-то пойти». Ты действуешь наоборот: что есть интересного, что меня может зацепить, для чего я готов выделить вечер. Судя по моей небольшой выборке, не так много людей пользуются агрегаторами. Как правило, есть какой-то пул театров, который им заранее интересен, — они заходят на сайты, открывают кучу вкладок и начинают выбирать, что нравится.
Проблема в том, что на таких сайтах есть устоявшаяся архитектура — развесистая, с кучей неожиданных разделов и подразделов. В основном она обслуживает то, что важно театру: как можно больше рассказать о своей концепции и истории, подсветить нужных актёров и режиссёров и, конечно, будто бы самое главное — новости на сайте. Есть гипотеза, что значительная часть посетителей не разбираются в таких тонкостях и подавать эту информацию нужно умеренно и поступательно. От первостепенного к лирике. Нужно больше того, что поможет им сделать выбор.
Дальше накладываем на это главную концепцию «Гоголь-центра»: свобода и авангард. Ну вот представьте себе, что мы берём главные театры и раскладываем их в матрице. Есть совсем серьёзные, академические, есть те, что когда-то были новой школой и теперь уже такие кэжуал, а есть максимально странные, вычурные. Где-то рядом с последними и стоит «Гоголь-центр». Авангард, но умеренно-странный, модный и свежий, входит в троицу тех, кто задаёт тон. Так давайте сломаем традиционную архитектуру сайта и сделаем так, как должно быть в современном мире. Не в минус театру, но в пользу посетителю.
Нам захотелось вычленить три самых важных штуки, которые нужны людям. Тебе нужна афиша — это то, зачем девяносто процентов ходят на сайт. Ты хочешь узнать, что идёт в ближайшее время, насколько оно тебе интересно, насколько оно тебя может зацепить, видел ты это или не видел. Бывают люди, которые ходят чуть ли не в один-единственный театр и хотят узнать, когда будет их любимый спектакль и, может, появилось ли что-то новое.
Второй момент — это всё, что касается удобства зрителей. Начиная от рассказа о театре, продолжая какими-то специальными удобствами: можно ли зарядить телефон, есть ли кофейня, до скольких всё работает, как добраться, как устроен возврат билетов и так далее. Такой большой хелп, который позволяет тебе решить набор вопросов. Почему-то очень часто это размазано по сайту и нужно долго искать.
Третий — про «мы», это интересно обеим сторонам. Одной стороне очень важно выгодно рассказать про свой состав, а с другой стороны есть люди, которые сходят на спектакль и думают: «Оу, вот это очень крутой актёр! А он играет где-нибудь ещё? А кто он вообще такой? Хочу про него что-то узнать». И они могут даже не помнить, как его зовут, могут запомнить только образ.
Меню на финальной версии сайта
Пока я всё это исследовал, понял, что есть очевидный паттерн взаимодействия, который никак не закрывается большинством театров, — мобильный опыт. Оказалось, что довольно много людей — так же как на сервисах с авиабилетами — до сих пор не покупают с телефонов. Мобильная доля уже ощутима, но всё ещё не сто процентов. Люди могут подбирать билет с телефона, но потом садятся за компьютер и всё делают с него, потому что это ответственный, большой процесс. Плюс неудобно быстро перебирать разные спектакли, быстро их сравнивать и понимать, куда ты хочешь.
Ещё одна задача здесь же — проработать страницу спектакля так, чтобы она была самостоятельной страницей, чуть ли не лендингом. Она должна быть настолько краткой, чтобы ты мог быстро всё сравнить, но настолько богатой, чтобы ты такой — «вау, хочу!».
Дальше мы начали играть в мою любимую игру — поиск баланса.
О характере
Как я уже говорил, главные идеи «Центра» — свобода и авангард. Усиливалось это ещё и ситуацией с Кириллом. Потому что это драма для всего театра и потому что сложно попасть в ожидания человека, с которым нет прямой связи. Так что мы могли часами обсуждать с ребятами, что такое свобода и как это передать на образном уровне. Ребята — это Ника Груздева, PR-директор «Гоголь-центра», и Валентин Андриенко, креативный продюсер. Мы вывели три мысли.
Базовая мысль: «Гоголь-центр» — не театр в привычном понимании. Это дом, который является территорией свободы. Свободы как оппозиции к несвободе — ограниченности и линейности мышления в умах, культуре, быте и всём остальном. Это не про детский инфантилизм или анархию, это про «Ого! А так можно было?».
Ближайшая метафора к такому дому (как бы это ни звучало) — Бергхайн. Пространство, в котором тебя не учат, но показывают, как можно. Это как раз та самая территория, где соблюдаются все правила твоей личной зоны, есть уважение к личности, но при этом тебе показывают, что такое свобода, как она возможна и доступна. Так и здесь: каждая постановка — это иллюстрация того, как ещё можно думать и делать.
Вторая мысль: это управляемый процесс. Ты смотришь спектакль и в какой-то момент тебе начинает казаться, что актёры импровизируют, где-то случайно падает какая-то штука, кто-то в чём-то запутывается или кто-то в чём-то оговаривается. Актёр выбегает в зал, начинает кричать, взаимодействовать с людьми, тебе начинает казаться, что это всё импровизация, случайность. А потом ты узнаёшь, что всё выверено вплоть до шага, до случайно падающего стула, до взрывающейся лампы, до вспыхивающего огня, — всё это оказывается выверенным хаосом.
И заключительная, третья: Кирилл Семёнович не старается быть удобным в процессе рассказа. Иногда это похоже на пощёчину, чтобы отрезвить тебя и вывести на осмысленный диалог у тебя в голове. Но без эпатажа ради эпатажа. Bold, but sharp.
Не в смысле «давайте сделаем странно и прикольно», а в смысле «давайте освободимся от устаревших решений, сделаем понятно и добавим напряжения». Сделаем графическую основу как металлические фермы на сцене, куда можно повесить любой нужный свет и задать тон. Отсюда лёгкий брутализм, работа со всем пространством экрана, напряжённая композиция и контрастная типографика.
О поиске шрифта
Метафора для лейаута сразу нашлась в логотипе, где есть три явные вертикали: две буквы Г и одна Л. Отсюда появилась конструкция в три явные колонки. Сайт должен быть огромный, такой bold move, должно быть ощущение, что смотришь какой-то огромный плакат или афишу. При этом всё должно быть современным и должно восприниматься как интерактивное. По сути, бумага и плоская типографика, которые оживают во взаимодействии с пользователем. Для этого нужен был идеальный плакатно-цифровой шрифт.
Вертикали и колонки
Кроме того, у каждого театра есть сайт-клон. Это перекупщики, которые продают вам те же билеты на не очень выгодных условиях, а иногда и вовсе воздух. Поэтому шрифт работает ещё и на создание «зоны доверия». Некоторый образ, который можно распознать, даже не осознавая этого.
Мы начали искать шрифт как характер, через который сможем передать эти самые ощущения. И здесь я застрял на месяц. Мы перебрали очень много вариантов, хотя по сути их было два: набирать чем-то суперклассическим либо свежим, но тоже классическим.
Что мне было нужно? Шрифт либо два шрифта, которые можно сочетать — как на сайте, так и на других носителях. Мощная акциденция, у которой есть характер и которая рифмуется с логотипом, плюс какой-то наборный шрифт. Характер можно вытащить либо через основной набор, либо через заголовки. И тот и другой вариант подходил.
Сначала основой был Graphik. Но к тому моменту он уже взорвался — его стали использовать налево-направо, даже у меня это был бы четвёртый проект на Graphik. Я уже не мог, я чувствовал, что у меня деформация. Хотелось чего-то неочевидного, у чего очень хорошая кириллица, что очень хорошо продумано, но пока не очень используется в среде. При этом хотелось чего-то с очень явным характером.
Эскиз с использованием шрифта Graphik
Поиск начинался с The Temporary State. Потом был Gosha Sans, был Editorial Grotesk. Стало понятно, что нужен геометрический гротеск, потому что это диктует логотип: круглые o и идеально если ещё и круглые a. И хочется, чтобы он был самую малость странным. Попробовали Formular, но он давал очень техническое ощущение. Был Firs, Commons, Fellaz, Stolzl.
Эскизы с разными шрифтами
Какое-то неклассное всё было. Не шарп. Каждый раз, выбирая странные шрифты с геометрией, мы уходили либо в Советский Союз, либо в завод, либо в хипстерскую историю, за что нас бы возненавидела старшая аудитория. Нужно было что-то нормальное, но странное.
В сотый раз вернулся на сайт type.today и вдруг обнаруживаю, что есть шрифт Stratos, который вроде давно лежит — на тот момент ему было полгода. И до меня доходит, что у него абсолютно идеальная рифма с логотипом, в котором вытянутые Г и Л и абсолютно геометричная, круглая О. А у Stratos как раз вытянутые заглавные и геометричные круглые строчные! Набрали ГОГОЛЬ — и это практически тот же логотип.
Надо сказать, команда «Гоголь-центра» нам дико доверяла, говорили: «Покажите, во что верите и что взорвёт нас». Поэтому мы в основном сверялись не с клиентом, а с театральной аудиторией, спрашивали, какие у них ощущения. И каждый раз, когда мы пробовали включать сериф — может быть, конечно, мы так подавали, не знаю до конца, — у аудитории было ощущение, что это заискивающее и временное либо слишком академическое, старое и покрытое пылью.
Интересно, что люди сначала не реагировали на базовые «правильные» шрифты типа Гельветики или Graphik. «Набрано обычным шрифтом». Потом мы стали выкручивать эту кислотность с Gosha, Stolzl, Fellaz и всем остальным. Они: «Классно! Это прикольно!»
Потом показывали спокойные наборы. Потом снова кислотные. В итоге они стали просить нормализовать. Это была аудитория, но и клиент, по сути, реагировал точно так же.
А когда мы показывали Stratos, им сначала казалось, что это из линейки обычных шрифтов, а потом они замечали рифму с логотипом и у них взрывался мозг: «В смысле?! Он же похож на логотип!» Они считывали это за пару минут, пока пользовались прототипом.
В какой-то момент, пока не был найден Stratos, я настолько отчаялся в поиске, что был уже готов заказывать шрифт, а пока набирать Гельветикой. Но как только его поставили в макет, стало видно, что шрифт будто для «Гоголя» и создавали — идеальное и абсолютно логичное продолжение айдентики.
Самое обидное было, когда мы всё собрали, увидеть, что Stratos — это фирменный шрифт Wheely. И мы такие: «Блин! Он вам не подходит. Перестаньте его использовать». Забавно видеть его в других продуктах, всё равно есть ощущение, что у нас он лежит как влитой, а там он скорее декоративный, дополнительный, заигрывающий.
О кайфе в Stratos
У Stratos довольно плотный Regular, на грани с Medium. Я не могу это объяснить, но он даёт очень классный рисунок — плотный, технический и при этом довольно странный. Ты начинаешь читать, и он читается как обычный шрифт — даже не как геометрический, а просто неогротеск. И кайф от шрифта в том, что ты только в процессе начинаешь понимать, в чём его фишка.
В какой-то момент мы поняли, что Stratos одинаково хорошо работает на разных крупностях. Меняя размерность и подбирая разный контраст, ты будто крутишь ручку громкости. Так что мы сразу отказались от дополнительного шрифта в пару, минимизировали количество стилей и убрали лишний цвет. Всё просто: декорации и интерактив Medium + капс, информация — Regular. И в общей вёрстке сразу видно что есть что, в том числе и за счёт узких заглавных.
Финальная версия: gogolcenter.com
Ещё есть известная проблема с тем контрастом, который задумывался в швейцарской типографике: всё очень классно работает, когда слова короткие, например в английском языке. А у нас размерный контраст каждый раз ломался, когда мы хотели увеличивать кегль. Всё время вскрывались проблемы вроде: «Вот есть две актрисы, у которых безумно длинные имена. Переносить или нет?» И когда мы перешли на Stratos, оказалось: «О! Мы можем сделать шрифт ещё крупнее, потому что в заглавных он ýже».
Лично для меня самый кайф в том, что я могу настраивать шрифт абсолютно точно: я работаю с микромодулями в 5 и 10 пикселей, а у Stratos идеально бьётся кегль с пиксельной сеткой, не скачет даже в силу выносных элементов. Это дико важно даже не для макетов, а на вёрстке. Кажется, это первый раз, когда мне не прилетает за выбор шрифта от моих любимых разработчиков из Prominado. Работать с ним — огромное удовольствие — собран идеально.
Есть такая русская история — люди боятся показаться слишком простыми. Особенно сильно это работает на уровне бренда. Когда ты упрощаешь, делаешь понятно и суперлегко, аудитория всегда пищит «Блин! Так же и должно быть!». А тот, кто владеет брендом, всё время переживает, что люди не поймут, что будет слишком просто. «Нам нужно как-то зацепить этих людей, нужна какая-то изюминка!» И на эту тему Гурович в своё время дал очень крутой совет: когда мы делали сайт Пермского музея, он объяснял, что очень важно работать с контентом, не трогая его. Есть, например, кадр из фильма, просто представь, какое количество людей над ним работало, — а ты его берёшь для сайта и делаешь вертикальный кроп или набираешь текст поверх. Зачастую так работать нельзя, у тебя есть важное ограничение: сервисное не может орать громче, чем контент. Это одна из причин, по которой мы ушли от сложных шрифтов, — нужно было что-то, что интересно, создаёт характер и высказывание, но при этом не орёт громче, чем фотография.
Изображение и шрифт
У Stratos это есть. Это как условная Жиль Зандер или Dior. Ты, обычный человек, можешь не увидеть, почему именно так работает, но ты это чувствуешь.
P. S.
С момента запуска прошёл уже год — мы тестировали первую версию и собирали статистику. Если что-то не работает или у вас есть идеи, как сделать лучше, — смело пишите мне.
Еще про шрифты type.today в работе:
