В квадрате: новый визуальный язык «Яндекс.Музыки»

Рассказываем, как работали над визуальным языком и почему его отправной точкой стала обложка плейлиста.

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

Ограничения

Нельзя просто так взять и сделать.

Сделать универсально. Нам нужна простая, но ёмкая единая визуальная система, которая узнавалась бы в самых разных каналах коммуникации: от приложения «Яндекса» до оформления фестивалей.

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

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

Обучить и проконтролировать всех лично — не вариант. Команда «Музыки» переросла за сотню человек. Подойти к каждому и обучить его новому стилю нереально. Нам нужны шаблоны, примеры и прототипы, которые поймёт любой сотрудник сервиса.

Почему выбрали White Russian Studio

Мы провели конкурс среди ряда российских студий: попросили их придумать концепцию нового стиля. Получили 12 предложений, самым перспективным нам показалось решение студии White Russian.

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

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

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

Всех их объединяет квадратная форма. Этот форм-фактор и стал для нас отправной точкой в создании визуального языка. И в итоге получилось привнести самобытную уникальность в такую простую форму, как квадрат, и построить осмысленный визуальный язык.

Рома Любимов, арт-директор White Russian Studio

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

Плейлисты

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

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

Жанровые плейлисты собираются автоматически из новинок и популярных треков разных жанров. Мы задаём единую стилистику для близких друг к другу жанров, при этом каждая обложка уникальна.

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

В квадрате: новый визуальный язык «Яндекс.Музыки»

Новинки и популярное меняются часто. Ставим на обложку кого-то очень узнаваемого и яркого, чтобы пользователь реагировал на знакомое лицо. Если вышла новая песня Эминема, все его знают, мы ставим его на обложку.

В квадрате: новый визуальный язык «Яндекс.Музыки»

Фичеры (анонсы) выводятся на главной странице. Это новостная редакционная лента всего самого актуального, которая требует яркой графической обёртки в нашей стилистике.

Визуальный язык на баннерах, плакатах и не только

Приём с квадратами остаётся узнаваемым везде.

В квадрате: новый визуальный язык «Яндекс.Музыки»

Мерч

Всем не нравится сувенирка, которая выглядит, как рекламный щит. Мы хотели, чтобы наша была ненавязчивой, но узнаваемой. Квадрат и тут работает.

Что дальше

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

Команда «Яндекс.Музыки».

P.S. За время работы ребята из White Russian Studio вдохновились собрать свой плейлист. Предлагаем послушать:

3333
47 комментариев

Плейлисты оформлены круто. Жду, когда что-нибудь сделают с мрачным оформлением подборок. Это настолько скучные иконки и названия "Рок", "Душевная" и так далее, что я ни разу на них не нажимал

15

То есть ты ждешь, когда вдобавок к спизженному дизайну Apple Music добавится спизженный дизайн Spotify?

12

"Мы взяли за основу квадрат, так как эта форма на наш взгляд олицетворяет музыку как объект."
а на мой взляд пластинки, CD, касеты бобинные все круглое

"И в итоге получилось привнести самобытную уникальность в такую простую форму, как квадрат, и построить осмысленный визуальный язык."
самобытная уникальность, уникальная самобытность ......

Уникальность—единственность, неповторимость
Самобытность—оригинальность, своеобразие, особенность, нестандартность
Все эти характеристики идеально подходят квадрату ))

PS. Просто с квадратом гораздо проще работать чем с кругом, осталось придумать заумное обоснование такого выбора.

19

Это вообще законно?

9

Главное - "Главное" на виду))

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

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

7