Московская дизайн-студия «Салливан» вела наш инстаграм в октябре. Мы поговорили с ребятами о том, как наладить ежедневное производство анимации, стало ли в веб-дизайне меньше гротесков и почему они с оптимизмом смотрят на будущее кириллической типографики.
Дмитрий Салливан: Привет! Меня зовут Дима Салливан, я арт-директор студии Sulliwan.
Арсений Гаревских: А меня Арсений Гаревских, я моушн-дизайнер. В этом проекте делаю анимацию.
Расскажете в двух словах про вашу студию?
ДС: У нас две основные специализации. Первая — разработка простых и сложных диджитал-проектов: сайтов и приложений. И второе направление — создание фирменных стилей и брендинга.
Хочется поговорить с вами про жизнь шрифта на экране. Начнём с того, как вы выбираете шрифты. На что вы обращаете внимание?
ДС: В первую очередь мы отталкиваемся от задачи. Если это сайт с большим количеством информации, с плотным размещением на единицу экрана, то мы выбираем шрифты, с помощью которых удобно легко читать большие объемы текста. В наших проектах мы обычно используем не больше двух-трех шрифтов и стараемся выбирать те, где включено большое количество начертаний, — с такими удобнее работать. Если это промо-проект, мы отталкиваемся от харизмы шрифта, от того, насколько шрифт передает дух проекта, как он работает в макете. И в целом важно, чтобы он соответствовал общему стилю проекта. Когда у проекта изначально нет своего фирменного стиля, то мы стараемся подбирать такой шрифт, чтобы он передавал эмоции и соответствовал той идее, которую мы вкладываем в этот проект. Если же говорить о брендинге, то тут на первый план выходит стилистические особенности шрифтов: насколько они серьёзные или несерьёзные, насколько они техничны или гуманистичны. Просто исходим из того, как хотим выглядеть в стиле и насколько шрифт уживается с идеей бренда.
Актуальна ли ещё разница между шрифтами для экрана и для принта?
ДС: По нашему опыту — уже нет. Последние 5–6 лет мы особо на это внимание не обращаем. Естественно, если при выборе шрифта мы понимаем, что он будет использоваться в печати, мы тестируем его на больших форматах — например, печатаем тестовые плакаты. Но особой разницы уже нет, всё прекрасно выглядит и на печати, и на экранах. Только если это не какие-то редкие случаи, когда нужно понимать, как шрифт будет смотреться на экранах с низким разрешением или там, где необходимо минимальное количество декора в шрифте.
Образовательная платформа «Архитекторы.рф»
Приложение Welps. Узкий шрифт в заголовках — Giorgio Sans
Смотрите ли вы на хинтинг? Или он утратил актуальность?
ДС: В целом это вопрос степени детализации в процессе разработки — иногда на такие детали обращаем внимание, но не в такой степени, как раньше.
Всё-таки хинтинг — это тяжелая ручная работа. Мы все с нетерпением ждём тех времен, когда это совсем перестанет быть нужно.
ДС: Думаю, это уже совсем скоро.
Откуда вы берёте информацию про новую типографику?
ДС: У нас есть — может быть, это не очень правильный подход — ряд любимчиков, к которым мы идём сразу, как в любимый магазин за любимыми продуктами. Обычно это происходит таким образом, что когда к нам приходит новый проект и нужно выбрать шрифт с нашей стороны, то у меня уже на этапе брифования появляется представление, куда и к кому идти за шрифтом. И просто идём туда и берём.
У вас есть любимые шрифты или шрифт по умолчанию?
ДС: Наверное, нет. Иначе бы все наши проекты делались одним шрифтом. Раньше была предрасположенность больше использовать гротески, потому что и запрос от клиентов на это был, и проектам, которые мы делали, гротескные шрифты больше подходили по стилистике. Сейчас такого уже нет. Выбираем в основном в зависимости от задачи, иногда — вообще по настроению.
Есть тенденция, что антиква приходит на экран?
ДС: Я думаю, что в целом есть. Может быть, в брендинге пока ещё гротески в большей степени используются. Ещё хватает примеров, когда в ходе редизайна компания, у которой логотип был набран антиквой, переходит на гротеск. Но кажется, это происходит по инерции. А на сайтах сейчас уже нет глобального преобладания гротескных шрифтов, современные мониторы хорошо отображают детали антиквы. Все стараются найти какой-то баланс или используют шрифтовые пары, когда, например, акциденция идёт антиквой, а для текстовых наборов — гротеск, либо наоборот. Поэтому да, антиква приходит. И мы в своих последних проектах тоже стараемся её использовать. Не гротеском единым.
Ещё у нас есть такое наблюдение: в веб-дизайне не прижились курсивы. Вы понимаете, почему?
ДС: Да, есть такое. Не могу сказать, почему… Но могу сказать точно, что в нашей работе нет установки не использовать курсивные начертания. Скорее не всегда в этом есть необходимость, потому что есть другие способы выделения в наборе. И обычно используется жирное начертание, а не курсивное. Раньше курсив не использовался, потому что на экранах с низким разрешением он считывался ещё хуже, чем регулярная антиква, но сейчас с этим особых проблем нет.
Вы часто залезаете поглубже во всякие типографические инструменты — OTF-фичи, капитель?
ДС: Да, мы стараемся использовать альтернативные глифы. Капитель, наверное, используем по большей степени в брендинге — если это какой-то сложный набор, где обычных стилей не хватает. Намного чаще лезем в глифы и ищем какие-то альтернативные знаки, которые хочется использовать в брендинге, — в современных шрифтах спрятано очень много сокровищ, классных знаков, которые придают индивидуальность проектам.
Лигатуры в версии Pro шрифтов из семейства Gauge
Вариативные шрифты трогали?
ДС: Мы с интересом наблюдаем за процессом их появления и особенно — за процессом их производства (привет, Юра!). Это прямо графическое наслаждение — смотреть, как это происходит. У нас сейчас на примете один проект, где, мне кажется, будет очень уместно использовать такой шрифт. И это будет наш первый опыт работы с вариативными шрифтами.
Арсений, а вы знаете про вариативные шрифты? Пробовали что-то с ними делать?
АГ: Боюсь, что ещё нет. Мы в моушене работаем со шрифтами по-другому. Они там безусловно важны, просто им на фоне остального уделяется не такое внимание — они скорее должны как-то играть в общей композиции, потому что в моушене меньше читать приходится. Там больше картинка в целом работает, всё двигается, прыгает.
Бывает такое, что вам пришел дизайн на оживление, вы видите шрифт и думаете: «Блин, только не этот. Не знаю, что с ним делать»?
АГ: Нет, не припомню такой ситуации. Редко бывает, что какой-то шрифт как-то сложнее анимировать. Как правило, в анимации они все работают плюс-минус одинаково.
А вариативные шрифты могут морфиться без помощи рук из одной стадии в другую. Когда наконец технология заработает в моушене, это будет революция.
АГ: Меньше нужно будет моушена, видимо. (Смеется.) Но это действительно должно расширить возможности. Такой процедурный моушн-дизайн…
Перейдём теперь к инстаграму, в котором у вас получились такие этюды на тему повседневности…
ДС: Да, могу рассказать, почему мы выбрали такой сценарный ход. Когда к нам попал ваш инстаграм, мы посмотрели, что делали предыдущие гости. Там все старались максимально показать шрифт в действии в виде плакатов и графики. Нам же захотелось добавить моушена во все это дело, потому что в своей работе мы с каждым годом понимаем, что мы всё больше и больше используем анимацию. От этого никуда не уйти: будущее веба — в анимации. Мы решили разделить наш месяц на некоторые части, и одну часть сделать в виде моушена, другую — в виде 3D, третью — в виде плакатов или чего-то ещё. Но потом, когда начали работать с Сеней, поняли, что классно получается и что хочется сделать весь проект, замешанным на моушене. И заодно поняли, что не хочется показывать плакаты и картинки, а хочется заходить со сценариями работы в современном интернете, какие-то такие насущные сюжеты обыграть: как люди пользуются интернетом, как интернет порою раздражает, как крадёт наше время. Решили весь месяц посвятить этому. Порою нас кривая выводила не туда, куда хотелось, но это ведь эксперимент — мы отдавались ему по-полной.
Во многих сценариях видна большая и сложная интеллектуальная работа. Как вы их придумывали? Как можно каждый день выдавать такие вещи?
ДС: Скажу сразу, что нелегко, и работа над этим проектом парализовала часть студии. У нас была попытка написать сценарии на месяц вперёд, но написание сценариев — это не совсем наша работа, поэтому видно, как мы разгонялись в процессе. Но это было классно, потому что выбило нас из повседневной рутины, и мы занимались не тем, что нам свойственно, — а была цель немного всех встряхнуть и растрясти. Это была коллективная работа всех дизайнеров, которые работают с вебом, и продюсера, который пытался держать нас в графике, и Сени, который все наши задумки, порою сумасшедшие, должен был реализовать в достаточно короткие сроки. Придумывали вместе: у нас была табличка с разбивкой по дням, и если у кого-то хватало идей на несколько дней, то он просто их вписывал. Есть сюжеты, которые долго прорабатывались, есть такие, которые за минуту сложились. Очень много спорили. Хорошо ещё мы сразу упростили себе работу, выбрав черно-белую тему — это близко фирменному стилю нашей студии. За несколько дней до сдачи макета в моушн прописывали подробный сценарий. У нас заранее получилось придумать только половину месяца, а потом приходилось практически день в день доделывать сюжет и сдавать его Сене. Последние полторы-две недели пост уходил в инстаграм практически сразу после того, как он был готов. Мы в очень активном темпе это всё делали.
А назовёте всех членов команды?
ДС: Да, это Любим Колтаков, ведущий дизайнер, Рома Сазонов, дизайнер, Диана Головчанская, продюсер, Дима Салливан, арт-директор и иногда дизайнер, и Арсений Гаревских, моушн-дизайнер.
Как происходил момент перехода от сценария к моушену?
ДС: Сене мы сдавали файл в Figma — все дизайнеры сейчас работают в этой программе. В экселевской табличке словами прописывался сценарий, скидывались какие-то графические референсы, а потом дизайнер делал раскадровку на 5–6 кадров и прописывал каждый кадр: какое-то действие начинается, что происходит и тайминги-изинги — сколько что должно было длиться. Сеня получал файл, всё это оживлял в After Effects и скидывал промежуточные версии. Мы смотрели и корректировали: «здесь побыстрее, здесь покороче». Иногда меняли вообще всю графику, потому что понимали, что идея в анимации считывалась совершенно по-другому, чем когда она была в статике.
Насколько Figma — хороший инструмент для работы с типографикой?
ДС: Мы с «фигмой» работаем года три, и изначально она не была заточена на сложные операции со шрифтами: было много вопросов к тому, как она их отображает, базовая линия часто скакала, не было возможности выбирать альтернативные глифы. Но постепенно все эти моменты улучшались, и сейчас этот инструмент стал намного удобнее. В Figma ребята понимают, что веб и типографика — неразрывные вещи, и в современном вебе без работы с многогранными шрифтами уже никуда, поэтому там с каждым апдейтом появляются какие-то приятные шрифтовые фичи.
А в After Effects хватает инструментов для работы с типографикой?
АГ: На самом деле, в «афтер» один инструмент для работы с типографикой, довольно стандартный. Но там есть возможность перевести все тексты в кривые и дальше анимировать уже кривые, делать с текстом что угодно, как и с любым другим слоем, который состоит из кривых. Тогда возможности становятся безграничными, потому что текст становится уже не шрифтом, а просто графическим элементом.
Бывало ли так, что вам приносили какую-то штуку, которую было сложно потом интегрировать в After Effects?
АГ: Изначально всегда вопрос: нужно ли переводить в кривые? У After Effects большая проблема в интеграции шрифтов, когда они импортируются из исходника… То есть ребята делают в Figma всё, но ко мне это приходит в форматах Illustrator или Photoshop, потому что After ничего другого не ест. Если не переводить в кривые, то нужно это воспроизводить всё снова в After, потому что из Illustrator он почему-то не хочет брать текстовые слои. Это большая проблема. Если всё переводить в кривые, то уже никакие дополнительные текстовые эффекты, зашитые в специальные анимационные пресеты, на эти кривые работать не будут. Они настроены изначально, и я с ними никогда особенно не работал, потому что это неинтересно. Со шрифтами интересно что-то делать самостоятельно: разбивать их на куски, разбирать по буквам, привязывать к ним какие-то выражения, expressions, или анимировать кривые. В этом проекте таких моментов не было. Шрифты, как правило, были цельными и сами по себе не анимировались.
Можете выделить любимые работы среди анимаций для type.today?
АГ: Мне было весело работать там, где пародировались игра Space Invaders: буквы летают, а игрок должен их сбить. Это была кропотливая работа, всё воспроизвести, сделать похожим на референс. У нас было видео оригинальной аркады 1978 года. Я смотрел, по кадрам разбирал и старался повторить движение, чтобы максимально было похоже на эти старенькие приставки, которые ничего не умели.
ДС: Мне очень понравился сюжет про выпекание буквы в микроволновке. Ещё прикольная история с калькулятором, когда человеку звонят и отвлекают. История с поездом и табами браузера. Классный сюжет — подписка на обновления в стиле Stranger Things. Просто понравился сам нарратив, как-то очень зашел. Из того же ряда — как мы обыгрывали Хэллоуин: под конец работы у нас оставались шрифты с засечками, и мы поняли, что надпись антиквой создана для того, чтобы из неё создать такой хеви-метал.
Как происходил момент выбора шрифта? Есть отдельно сценарии, есть коллекция — в какой момент они соединялись?
ДС: Мы тут тоже себе работу упростили — просто шли по порядку. В коллекции шрифтов было
Случалось перебирать шрифты для какой-то истории — что-то не вставало, не подходило?
ДС: Нет, в целом таких сложностей не возникало. Понятно, что мы не могли отделять сценарий и шрифт. Понятно, что всё должно было быть гармонично. И порою возникали сложности, хорошо ли данный сценарий покажет букву или набор слов из этого шрифта: как эта буква S здесь будет играть… Всё-таки мы старались своими решениями презентовать шрифт, раскрыть его, показать с нестандартной стороны. Но мук выбора не было. У type.today все шрифты классные, всем всегда можно найти применение, поэтому особых проблем с этим не было.
Возникла какая-то новая любовь в процессе работы?
ДС: Лично я для себя в процессе работы больше узнал об антиквенных шрифтах, потому что для своих задач мы в основном пользовались гротесками. И я сейчас выделил ряд шрифтов, которые мы так или иначе постараемся использовать в будущих проектах. Тему с шрифтом Lava мы одному из клиентов уже предложили, он согласился. Даже когда тебе нравится шрифт на сайте разработчика шрифта, у тебя нет возможности как-то его пощупать и поработать с ним в бою. А тут представилась возможность разобрать буковки, сблизиться со шрифтом. Это классный опыт.
Почему в ваших сюжетах так мало кириллицы?
ДС: Она используется в тех местах, где она была оправдана. Например, был сюжет про аббревиатуры на навигационных вывесках в городе. Когда висит на улице указатель на какое-нибудь учебное заведение, и это очень нелепо звучит по-русски: «ГБО УЧФЦ ЗЖКМ» — будто кто-то уронил кулак на клавиатуру. А снизу на английском абсолютно понятно написано «State School of Arts». В таких местах, где хотелось и нужно было показать кириллицу, мы её использовали. В наших проектах мы по большей части работаем с кириллицей и очень рады, что благодаря хорошим современным шрифтам её можно не стыдиться.
Наш любимый вопрос: можете охарактеризовать, что такое типографика сегодня?
ДС: Для меня типографика — это в первую очередь отражение культуры и той среды, в которой она используется. В России сейчас очень интересный период. У нас долгое время типографику задвигали очень далеко — это легко оценить по уровню рекламы, по вывескам, по тому, как люди оформляли что-либо, связанное со шрифтом. Но сейчас стали обращать внимание не только на то, что висит, но и на то, как оно оформлено и какими шрифтами. Очень радует, что переболели «болезнью латиницы», когда все вывески, всё хотелось сделать на английском. Стали появляться кириллические шрифты, которые хочется использовать. Теперь есть огромный выбор, и главное он теперь качественный, и можно делать действительно красивые вещи. И если есть запрос со стороны дизайнеров и клиентов на интерфейсные гротески, то классно, что есть компании, которые отвечают на этот запрос и делают качественные интерфейсные гротески, которые идут не только в составе продуктов Microsoft. Есть запрос на антикву — появляются новые антиквы, не только условный Times New Roman.
То есть типографика сегодня — это большой выбор и точное попадание в запрос?
ДС: Близко к этому. Раньше это была катастрофа, особенно когда клиент приходил с логотипом, где нужно было делать что-то на кириллице, и оставалось только одно решение — заказывать леттеринг, а то и целиком шрифт делать под заказ. А сейчас целину вспахивать не нужно: есть множество отличных шрифтов, есть нужное многообразие, которого раньше не хватало.
Navigo в работе: фирменный стиль агентства «Коопирайтеры» от студии «Салливан»
