В квадрате: новый визуальный язык «Яндекс.Музыки»
Рассказываем, как работали над визуальным языком и почему его отправной точкой стала обложка плейлиста.
«Яндекс.Музыка» — это не только наши приложения и сайт, но и контент, который мы производим. Сервис традиционно силён плейлистами: мы развиваем технологии по созданию персональных плейлистов, собираем их вручную и работаем напрямую с лейблами, чтобы упаковывать новинки в самый удобный формат. Плейлисты — ещё один наш продукт, наша гордость, и поэтому их обложка стала отправной точкой визуального стиля.
Нельзя просто так взять и сделать.
Сделать универсально. Нам нужна простая, но ёмкая единая визуальная система, которая узнавалась бы в самых разных каналах коммуникации: от приложения «Яндекса» до оформления фестивалей.
Сохранить связь с «Яндексом». Необходимо показать преемственность с брендом, оставив его узнаваемую стилистику, шрифты и логотип. Но «Яндекс» обычно спокойный и деловой, а мы — про музыку и эмоции. Нам хочется быть смелее в наших визуальных решениях.
Отстроиться от конкурентов. Это кажется очевидным, но в мире, где полно разной музыки, легко затеряться среди других стриминговых сервисов. Нам нужно отличаться не только возможностями сервиса, но и визуальным стилем.
Обучить и проконтролировать всех лично — не вариант. Команда «Музыки» переросла за сотню человек. Подойти к каждому и обучить его новому стилю нереально. Нам нужны шаблоны, примеры и прототипы, которые поймёт любой сотрудник сервиса.
Мы провели конкурс среди ряда российских студий: попросили их придумать концепцию нового стиля. Получили 12 предложений, самым перспективным нам показалось решение студии White Russian.
Это единственная команда, идею которой можно было распространить на все коммуникации. Для нас важно, что ребята изначально старались разработать универсальную систему, которая отстраивается от конкурентов и близка визуальной стратегии «Яндекса».
Мы всегда стараемся найти простые решения для сложных задач. С этой системой будет работать большое количество людей, и поэтому она должна быть сильной концептуально и очень гибкой в использовании.
Мы взяли за основу квадрат, так как эта форма на наш взгляд олицетворяет музыку как объект. Сначала были виниловые обложки, затем обложки компакт-дисков, и теперь, в эру стриминга, обложки альбомов, плейлистов и подкастов.
Всех их объединяет квадратная форма. Этот форм-фактор и стал для нас отправной точкой в создании визуального языка. И в итоге получилось привнести самобытную уникальность в такую простую форму, как квадрат, и построить осмысленный визуальный язык.
После первого предложения студии включились наши дизайнеры, и мы вместе доработали идею. Вот что получилось.
Разнообразие наших плейлистов — это важная часть «Музыки». Каждый день сервис выпускает свои сборники. Нужно, чтобы при первом взгляде на плейлист можно было понять, откуда он родом.
Персональные плейлисты — умные плейлисты, которые алгоритмы составляют на основе вкусов пользователя. Нам важно, чтобы пользователь находил эти плейлисты чаще, поэтому мы используем самые простые формы. Другие плейлисты наполнены деталями, фактурами и цветами, а персональные яркие и простые.
Жанровые плейлисты собираются автоматически из новинок и популярных треков разных жанров. Мы задаём единую стилистику для близких друг к другу жанров, при этом каждая обложка уникальна.
Редакционные плейлисты — это полторы тысячи подборок по жанрам, настроениям и занятиям. Обложки разные, как и содержание плейлистов, но разнообразные фирменные рамки напоминают, что плейлист собран редакторами «Яндекс.Музыки», а не пользователями.
Новинки и популярное меняются часто. Ставим на обложку кого-то очень узнаваемого и яркого, чтобы пользователь реагировал на знакомое лицо. Если вышла новая песня Эминема, все его знают, мы ставим его на обложку.
Фичеры (анонсы) выводятся на главной странице. Это новостная редакционная лента всего самого актуального, которая требует яркой графической обёртки в нашей стилистике.
Приём с квадратами остаётся узнаваемым везде.
Всем не нравится сувенирка, которая выглядит, как рекламный щит. Мы хотели, чтобы наша была ненавязчивой, но узнаваемой. Квадрат и тут работает.
Часть форматов вы уже видите в приложениях и на сайте «Музыки», но это только начало. А впереди большая работа по полноценному внедрению, адаптации и развитию нового стиля, которая требует новых сил и рук в команду.
Команда «Яндекс.Музыки».
P.S. За время работы ребята из White Russian Studio вдохновились собрать свой плейлист. Предлагаем послушать:
Плейлисты оформлены круто. Жду, когда что-нибудь сделают с мрачным оформлением подборок. Это настолько скучные иконки и названия "Рок", "Душевная" и так далее, что я ни разу на них не нажимал
То есть ты ждешь, когда вдобавок к спизженному дизайну Apple Music добавится спизженный дизайн Spotify?
Если apple сделал то все теперь? Так делать больше нельзя?
Можно, но слово "спизженный" идет комплектом.
не согласен. Тогда многие вещи в этом мире спижены. Хрен отличишь ведь. Это слово работало в прошлом веке, когда информация сложно распространялась. Сегодня почти все можно обвинить в копи-пасте.
Многие вещи и спижены, а указание на вторичность - дань уважения тому, кто сделал первую, пусть может и не лучшую вариацию.
Поддерживаю, потому что уже давно есть примеры, которые попробовав, понимаешь, что никакая ЯМ, и т.д. их уже не догонит и это не только Apple Music
Это точно не Apple Music и не дай боже их "догнать", это возможно спотифай, с которым в России проблемы
Лично я обожаю Deezer, в нём меньше всего недостатков и слишком много плюсов. p.s. в месяц прослушиваю в среднем 3000 композиций
но 1) эпл мьюзик какашка 2) яндекс музыка на 5 лет старше 3) эпл мьюзик какашка
Нужно научиться различать украденный дизайн и скопированный https://awdee.ru/your-logo-is-copied/
Сейчас в ЯМ почти нет элементов Apple Music, если совсем нет. Там в основном стиль Spotify, но плохо ли это? Нет.
Никто и не говорит, что плохо, но спизжено. Мне как потребителю насрать откуда взято, я буду пользоваться тем, что лучше.
Вот точно. Я жду натив для мака. А то на работе приходится держать два браузера открытыми.
"Мы взяли за основу квадрат, так как эта форма на наш взгляд олицетворяет музыку как объект." а на мой взляд пластинки, CD, касеты бобинные все круглое
"И в итоге получилось привнести самобытную уникальность в такую простую форму, как квадрат, и построить осмысленный визуальный язык." самобытная уникальность, уникальная самобытность .
Уникальность—единственность, неповторимость Самобытность—оригинальность, своеобразие, особенность, нестандартность Все эти характеристики идеально подходят квадрату ))
PS. Просто с квадратом гораздо проще работать чем с кругом, осталось придумать заумное обоснование такого выбора.
Это вообще законно?
Главное - "Главное" на виду))
В ролике есть промокод, можете даже не пытаться его активировать, видимо он одноразовый, гений который придумал вставить в ролик который посмотрят сотни тысяч людей одноразовый код должен вариться в отдельном котле.
PS.Приложение в Windows даже не умеет в трей сворачиваться, перешагивать через десктоп и быть лидером в сфере услуг предоставления музыки это два несовместимых понятия.
Промокод рассчитывался как весомый подарок с ограниченным количеством активаций. Первые, кто нашли пасхалку, этот подарок и получили.
Первые 3.5 анонимуса, трустори бро, как говорили когда-то.
К сожалению это болячка всех приложений построенных на UWP. Эта фича на юзервойсе висит уже третий год.
Вв посмотрите какой material design без box-shadow
Да, красиво Да, няшно Да, есть визуал и идея Да, поработали с масштабируемостью Да, получилось лучше чем Яндекс. Такси Нет, пожалуй мне не нравится.
Никита, по моим наблюдениям в дизайн департаменте яндекса не очень хорошо с графичностью, выразительностью и повествованием.
Про данный кейс: Персональные плейлисты — какой-то кастрированный material design. Но терпимо. Жанровые плейлисты — технический дизайнер решил поиграть с fumefx / c4d ? Хуяк-хуяк и в продакшен. Выглядит именно так. Редакционные плейлисты — черный ящик. Обложка должна сообщать пользователю о своем содержимом. То, что сделали вы, никакой информации слушателю не дает.
Типографика во всем кейсе хромает. На мой взгляд, вы с поставленными задачами не справились. Нужно всё переделывать с нуля. В других продуктах яндекса дизайн всяко лучше.