Дизайн Nikita Starun
8 939

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

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

В закладки

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

Ограничения

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

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

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

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

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

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

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

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

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

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

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

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

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

Плейлисты

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

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

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

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

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

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

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

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

Мерч

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

Что дальше

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

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

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Nikita Starun", "author_type": "editor", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 47, "likes": 49, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 38623, "is_wide": true, "is_ugc": false, "date": "Thu, 24 May 2018 14:20:00 +0300" }
{ "id": 38623, "author_id": 173331, "diff_limit": 1000, "urls": {"diff":"\/comments\/38623\/get","add":"\/comments\/38623\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38623"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

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

Популярные

По порядку

Написать комментарий...
15

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

Ответить
7

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

Ответить
8

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

Ответить
2

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

Ответить
5

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

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

Ответить
0

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

Ответить
0

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

Ответить
19

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

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

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

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

Ответить
11
Ответить
9

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

Ответить
0

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

Ответить
7

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

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

Ответить
0

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

Ответить
7

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

Ответить
0

Приложение в Windows даже не умеет в трей сворачиваться

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

Ответить
5

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

Ответить
4

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

Ответить
0

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

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

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

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

Ответить
0

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

Ответить
0

ахахахааххахахах, лол.

Ответить
0

ха-ха, лол

Ответить
2

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

Ответить
3

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
2

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

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

Ответить
0

заебца

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }