Nikita Starun
8 423
Блоги

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

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

Поделиться

В избранное

В избранном

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

Ограничения

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

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

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

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

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

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

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

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

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

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

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

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

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

Плейлисты

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

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

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

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

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

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

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

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

Мерч

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

Что дальше

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

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

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

#дизайн

{ "author_name": "Nikita Starun", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 48, "likes": 49, "favorites": 20, "is_advertisement": false, "section_name": "blog", "id": "38623", "is_wide": "1" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "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" } } } ]