Ребрендинг Podcasts.ru, который вы не ждали, но он случился

Podcasts.ru давно завоевал свою аудиторию и набрал медийный вес, но как продукт и лидер рынка, оставался без понятной идентичности. За исключением логотипа и фирменного сочетания зеленого, черного и белого цветов.

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

Я занимался дизайном всех проектов для подкастов у нас (pc.st, podlist.ru), кроме самого издания. И чем дольше я это откладывал, тем больше понимал: время пришло. Не только потому, что это логичный шаг, но и потому, что проект заслуживал выразительного стиля, который станет платформой для всех будущих обновлений.

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

Как было раньше

Логотип и начальные гайды для издания сделал Дмитрий Филиппов. Его работа задала базу, но всё остальное оформление оставалось в руках редакции. Ребята самоотверженно тянули всё на своих плечах четыре года.

Логотип

Разумеется. Но я его слегка взбодрил эдаким внутренним напряжением. В его основе лежит шрифт Bebas Neue, а одна из концепций в процессе работы навела на мысли о том, как его можно сделать более современным, не трогая узнаваемость. Изменения получились настолько невесомыми и нежными, что до сих пор никто не справился об этом обновлении в знаке — аватарки чатов и каналов были самым первым микрорелизом нового дизайна. Зато теперь, когда я это рассказал, вы не сможете это развидеть.

Типографика и графика

В новом стиле типографика и графика работают в унисон. Глифы повторяют формы иконок, а иконки вписываются в систему, заданную шрифтами. Я выбрал жирное начертание Factor B — свежий гротеск с благородными корнями и альтернативными буквами, в которых можно узнать и контуры нашего логотипа, и встретить очень неожиданные сочетания форм.

Разумеется, нельзя всё писать такими нарядными буквами! В пару к нему пришелся дополнительный утилитарный шрифт Proxima Nova — проверенная рабочая лошадка. Ее я выбрал за мягкость, гуманистичность и созвучную округлость форм.

Сам знак («иконочная» часть логотипа) подсказал еще одно ключевое решение в типографике — английскую строку. Редкий дизайнер может похвастать знанием такого термина, зато теперь могут все подкастеры!

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

Цвет

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

1. Бренд: зеленый, черный, белый;
2. Дополнительные цвета: включают в себя вариации базовых цветов, за исключением зеленого, чтобы не размывать идентичность;
3. Градиенты: комбинации дополнительных цветов, которые используются для окраски иконок.

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

Паттерн? Нет

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

… осторожность

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

Как всё это вместе выглядит и работает

У издания есть несколько видов материалов: статьи, подборки, дайджесты и и всё остальное, за чем вы приходите в наш канал. Наш основной носитель фирменного стиля на текущий момент — это картинка к посту в телеграме. Для разных материалов я собрал разные шаблоны, которые дальше довел до ума наш младший дизайнер Арсений. Он сделал в фигме компоненты и разобрал библиотеку иконок (порядка 2 000), что значительно облегчило жизнь редакции. Всё остальное тоже зашито в стили и компоненты — ошибки не пройдут.

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

Я собирал референсы отовсюду в тайный канал, который стал моим личным архивом идей, и уже тогда понимал, что в основе обновления должна лечь крепкая современная типографика, технологичная в своем сердце (вариативность, альтернейты, фичи опентайпа) и непохожая на всё остальное вокруг — всё-таки мы придаем форму именно словам и текстам в первую очередь, и не хотим сливаться с конкурентами во вторую.

Что еще нам требовалось, на тот момент, мне было не до конца ясно — но точно это должно быть нечто иллюстративное, легкое в производстве и достаточно разнообразное для оформления самых разных тем.

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

Первая концепция: Трамп

Обновление на базе шрифта Trump. В первых подходах я искал замену нашим Oswald-Roboto-Bebas. Собрал и получил самый консервативный и визуально доступный вариант из всех, но для нашей внутренней революции его оказалось недостаточно.

Вторая концепция: Y2Кураж

Среди поисков трендовой акциденции попался шрифт Gik, и я вспомнил любимые нулевые. Здесь же родились (и остались) изменения в логотипе. Получилось увлекательно, но всё-таки не слишком долгоживуще. Избыточность вредит. Настолько яркие ходы отлично привлекут внимание, но очень скоро исчерпают свой потенциал и начнут мозолить глаза.

Третья концепция: Техническая брутальность

Вышло красиво, но тематически слишком узко. В основу легло представление о технике звукорежиссеров — дорожки, графики и микшеры. Идею помог реализовать вариативный шрифт Fit. Получилось визуально эффектно, брутально, и даже приложился «Трамп» из первой концепции, но смысловой емкости для дальнейшего развития оказалось меньше, чем нам хотелось.

Концепции 4А и 4Б

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

На базе гарнитуры Factor от Interval Type, из которых мы выбрали более новый Factor B (а также потому, что версия «А» уже была замечена в нескольких других местах), родился гибкий, яркий и коммерческий вариант, который и лег в основу ребрендинга

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

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

Я продолжаю наблюдение за работой с шаблонами, полирую заусенцы, помогаю редакции советами и собираю отдельный набор для оформления графики внутри статей. За эту пару недель у нас уже возникла потребность в кастомных картинках — совместный проект с «Яндекс Музыкой», сообщение о Премии Рунета, оформление итогов года. Как только накопится ощутимый корпус таких материалов, часть из них мы формализуем в шаблон.

С нового года мы с командой дизайнеров и редакцией начнем планировать большую работу над обновлением сайта издания — а это, признаюсь, невероятная головная боль с разработкой на WordPress, базой данных, сохранением поисковых позиций и оптимизацией. И параллельно распространим брендинг на наши другие проекты: причешем pc.st с новыми фичами, освежим каналы «База знаний», «Подкастинг. Вакансии и Ивенты» и обновим логотип на Podlist.ru.

Пожелайте нам успехов!