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

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

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

Ограничения

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

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

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

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

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

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

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

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

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

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

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

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

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

Плейлисты

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

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

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

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

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

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

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

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

Мерч

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

Что дальше

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

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

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

0
47 комментариев
Написать комментарий...
Вадим Скворцов

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

Ответить
Развернуть ветку
Максим Наумов

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

Ответить
Развернуть ветку
Николай Черных

Если apple сделал то все теперь? Так делать больше нельзя?

Ответить
Развернуть ветку
Avery Blake

Можно, но слово "спизженный" идет комплектом.

Ответить
Развернуть ветку
Николай Черных

не согласен. Тогда многие вещи в этом мире спижены. Хрен отличишь ведь. Это слово работало в прошлом веке, когда информация сложно распространялась. Сегодня почти все можно обвинить в копи-пасте.

Ответить
Развернуть ветку
Avery Blake

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

Ответить
Развернуть ветку
Hey Arnold

Поддерживаю, потому что уже давно есть примеры, которые попробовав, понимаешь, что никакая ЯМ, и т.д. их уже не догонит и это не только Apple Music

Ответить
Развернуть ветку
Саша Иванов

Это точно не Apple Music и не дай боже их "догнать", это возможно спотифай, с которым в России проблемы

Ответить
Развернуть ветку
Hey Arnold

Лично я обожаю Deezer, в нём меньше всего недостатков и слишком много плюсов.
p.s. в месяц прослушиваю в среднем 3000 композиций

Ответить
Развернуть ветку
Саша Иванов

но
1) эпл мьюзик какашка
2) яндекс музыка на 5 лет старше
3) эпл мьюзик какашка

Ответить
Развернуть ветку
Вадим Зайцев

Нужно научиться различать украденный дизайн и скопированный https://awdee.ru/your-logo-is-copied/

Сейчас в ЯМ почти нет элементов Apple Music, если совсем нет. Там в основном стиль Spotify, но плохо ли это? Нет.

Ответить
Развернуть ветку
Avery Blake

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

Ответить
Развернуть ветку
Максим Сиверин

Вот точно. Я жду натив для мака. А то на работе приходится держать два браузера открытыми.

Ответить
Развернуть ветку
zulus

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

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

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

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

Ответить
Развернуть ветку
Snake
Ответить
Развернуть ветку
Александр Иванов

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

Ответить
Развернуть ветку
Konstantin

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

Ответить
Развернуть ветку
Yurii

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

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

Ответить
Развернуть ветку
Nikita Starun
Автор

Промокод рассчитывался как весомый подарок с ограниченным количеством активаций. Первые, кто нашли пасхалку, этот подарок и получили.

Ответить
Развернуть ветку
Yurii

Первые 3.5 анонимуса, трустори бро, как говорили когда-то.

Ответить
Развернуть ветку
S-ed
Приложение в Windows даже не умеет в трей сворачиваться

К сожалению это болячка всех приложений построенных на UWP. Эта фича на юзервойсе висит уже третий год.

Ответить
Развернуть ветку
Миша Ландау

Вв посмотрите какой material design без box-shadow

Ответить
Развернуть ветку
Yurii Knyazev

Да, красиво
Да, няшно
Да, есть визуал и идея
Да, поработали с масштабируемостью
Да, получилось лучше чем Яндекс. Такси
Нет, пожалуй мне не нравится.

Ответить
Развернуть ветку
Devoted

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

Про данный кейс:
Персональные плейлисты — какой-то кастрированный material design. Но терпимо.
Жанровые плейлисты — технический дизайнер решил поиграть с fumefx / c4d ?
Хуяк-хуяк и в продакшен. Выглядит именно так.
Редакционные плейлисты — черный ящик. Обложка должна сообщать пользователю о своем содержимом. То, что сделали вы, никакой информации слушателю не дает.

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

Вообще, советую обратиться за помощью к питерским ребятам из Gonzo Design (gonzo-design.ru). Сторителлинг и визуальная коммуникация — их конёк.
Либо у них же поучиться на курсе графического дизайна, там как раз похожие кейсы есть.

Ответить
Развернуть ветку
Shustry

Удоли

Ответить
Развернуть ветку
Devoted

У яндекс.еды, кстати, очень сильный логотип и айдентика, там работа была огромная проделана. А это больше на шутку похоже.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Игнат Смирнов

ха-ха, лол

Ответить
Развернуть ветку
Вадим Скворцов

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

Ответить
Развернуть ветку
Виктор Арапов

Вы боитесь открытого пространства?

Ответить
Развернуть ветку
Konstantin

Если ткнуть в строку с треком, но так, чтобы не зацепить исполнителя, название или управляющие кнопки (т.е. грубо говоря - в белое пространство посередине), то справа информация о нем будет. Про инфо об альбоме не подскажу.

Ответить
Развернуть ветку
Helge Totenkopf

Ну,своего креатива как всегда не хватило,спиздпозаимствовали чутка от спотифай и чутка от эпла,и представим как крутой визуальный редизайн)

Ответить
Развернуть ветку
Slava Pospelov

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

Ответить
Развернуть ветку
Evgeny Zhurov

Пост, может, и интересный, но перегружен ложными оценками, маркетинговыми штампами и усилителями. Из-за этого местами вообще ничего не понятно. Осмелюсь порекомендовать автору книгу Ильяхова "Пиши, сокращай".
А так-то вообще - молодцы) Успехов!

Ответить
Развернуть ветку
VVilliam Blake

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

Ответить
Развернуть ветку
Николай Лк

мда... стихия метаЛа написать - это прямо отлично, практически визитная карточка. Двоечники, что тут скажешь.

Ответить
Развернуть ветку
Avery Blake

Так Метал, как название жанра музыки - заимствование от Metal, всё ок

Ответить
Развернуть ветку
Иван Пилецкий

Доработка дизайна - конечно круто, но было бы неплохо увеличивать количество композиций. Того же Rammstein нет, Porcupine tree долгое время не было

Ответить
Развернуть ветку
Sergey Nemerov

Итак, ромб и квадрат уже переосмыслены Лебедевым и яндексом. Кто на треугольник?

Ответить
Развернуть ветку
Лена Иванова

Треугольник уже оприходовали https://www.behance.net/gallery/34064000/Legis

Ответить
Развернуть ветку
Pixel Lens

А круг оприходован мегафоном. Я сразу про него вспомнил, как увидел эту статью.

Ответить
Развернуть ветку
Unreal Person

Чо мелочиться, лучше сразу додекагон брать.

Ответить
Развернуть ветку
Константин Вознесенский

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

Ответить
Развернуть ветку
Vadim Korolchuk

"Как-то он не концептуально пробежал".

Ответить
Развернуть ветку
Serge Demichev

Сложно выразить ощущения. С одной сделано круто: дизайн отличный, подача, моушн. Но мне не нравится. Картинка пёстрая. Могли бы использовать как образы: пластинку, волны (как звуковые так и обычные). Цвета пастельные для олдовости. А так: Windows+Apple+ Spotify. П.С. С промокодом зашквар..

Ответить
Развернуть ветку
Denis Novikov

Увидев на улице квадрат - я в последнюю очередь вспомню о яндекс музыке. Не хватает какой то фишки с ним, которая давала бы понять, что это квадрат именно из яндекс музыки. Какая то тень, или вид стопки пластинок сверху со смещением. Не знаю.
Я только после этой статьи понял почему у них везде пустые квадраты.

Ответить
Развернуть ветку
Egor Shatohin

заебца

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
44 комментария
Раскрывать всегда