Концепт: Редизайн веб-версии «Яндекс.Музыки» с «темным» режимом интерфейса Статьи редакции

Дизайнер из Нижнего Новгорода Максим Навак поделился с редакцией vc.ru концептом редизайна стримингового сервиса «Яндекс.Музыка».

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

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

Страница исполнителя в «светлом» варианте:

Страница исполнителя в «темном» варианте:

Жанры:

Текущая версия «Яндекс.Музыки»:

0
28 комментариев
Написать комментарий...
Oleg Davydkin

в концепте нет места под рекламные блоки. но очень ок

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

Я думал над этим. В кейсе есть версия плеера, в котором нет треков, по сути под ним можно вставить рекламу. Решил страницу не показывать просто.

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

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

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

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

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

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

Развернуть ветку
Roman Vasilenko

Молодец Максим! Пятёрка вам по срисовыванию спотифая!

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

Вдохновлялся. Не буду скрывать.

Ответить
Развернуть ветку
Алексей Шпанов

Вот как надо составлять колонки в рубрику "ищу работу, вот что умею".

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

Вот таких мест, наверное, быть не должно по идее.
http://joxi.ru/5mdz8G1C58GQA1

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

Да, косяк. Исправленный в самом кейсе. Спасибо!

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

Мне нравится. Часто пользуюсь сервисом.

Ответить
Развернуть ветку
ʕ·͡ᴥ·ʔ

Очень хорошо выглядит, молодец Максим

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

мне нравится, пользовался бы вариантом с белым интерфейсом

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

Давайте продуктивную критику, хватит хвалить)

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

Да! :)

Ответить
Развернуть ветку
Николай Астраханцев

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

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

Да, с фотками самый напряг будет, согласен.
С альбомами придумал механику, что все они смотрятся хорошо.
Вот тут больше кадров с альбомами: https://www.dropbox.com/sh/t77fiiatp9uxunk/AACW0flfb78MEFdUawS0ADKaa?dl=0

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

В любой непонятной ситуации пили темную тему.

Ответить
Развернуть ветку
Михаил Денисов

Немного критики:

1. Иконка радио грязновата и не очень сочетается с "моя музыка";
2. Странное решение с шапкой, а именно размытый бэкграунд просвечивает, а контент нет;
3. Оранжевые элементы на темном фоне смотрятся выигрышнее, чем черные на светлом (громкость, режим воспроизведения, тайминг играющего трека). С другой стороны оранжевый на светлом фоне грязновато выглядит, особенно при наложении на бэкграунд фотку;
4. Кнопки следующий/предыдущий трек обычно не такие;
5. Темные обложки на темном фоне, как видно, плохо считываются, требуется выделение границ;
6. В списке популярных композиций слишком долго придется тянуться чтобы добавить трек в плейлист;
7. На макете с треком Синатры непонятно деление на "далее" и "плейлист", может просто последний видимый трек в списке подкручивать по ходу воспроизведения?;
8. На макете "The Guardian рекомендует" почему бы сразу не показать пару-тройку треков без обязательного перехода к альбому?;
9. Рекламные модули на темном фоне будет, как бельмо.

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

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

Спасибо огромное за критику.

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

Композиция на тёмном фоне читерная :)
А вообще интересно, что автор хочет услышать в комментариях.

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

Ну критику. Интересно послушать мнения профессионалов, так-то.

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

Как с первого слайда попасть на 2-й и 3-й? А потом как с третьего кадра попасть на 4-й?
Я так понимаю, первый кадр это домашняя? В левом блоке У нас идёт активная кнопка слушать музыку (я так понимаю, радио по подборкам). А как послушать конкретный трек/исполнителя/альбом? Под кнопкой идут, я так понял, картинки сборников/альбомов? Тогда не совсем понятна логика. Так как действия принято совершать сверху вниз, то логичнее сначала выбрать нужную музыку, а потом начать её слушать.
И почему-то сильно бросаются в глаза фоновые элементы (цветной блик, фотка в белом варианте) и разный масштаб иконок.
Но у меня такого прототипа нет, так что сперва добьюсь(

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

«Как с первого слайда попасть на 2-й и 3-й? А потом как с третьего кадра попасть на 4-й?»

Чтобы попасть, прокрутить вниз просто. А попасть на страницу с альбомом можно кликнув на альбом из плашки с 2 и 3 кадра, как вариант.

В принципе механику сайта я оставил прежней, разве что у меня нет правой плашки. Заместо неё плеер с плейлистом.

А про разный масштаб иконок это вы про что?
У каждого блока свои правила и они между собой вроде не конфликтуют.

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

https://static48.siliconrus.cmtt.ru/paper-media/2f/a8/14/445fdddf78c986.jpg
Пульт визуально больше гитары, микрофона, саксофона.

https://static49.siliconrus.cmtt.ru/paper-media/41/74/88/962be93f4924fc.jpg
Радужное пятно закрывает карту, которая, как я понял, интерактивная.

https://static44.siliconrus.cmtt.ru/paper-media/06/1c/fd/1400e0f3f97ac3.jpg
Фон и левый столбец с таймингом грязновато накладываются друг на друга. Ну и вообще по середине пустота какая-то.

Но это всё вторично. Больше интересен UX, и Вы лучше меня знаете, что по картинкам он не очевиден.

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

Спасибо, Даниил!

Ответить
Развернуть ветку
Антон Калашников

Вот бы в stylish такой скин =)

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

Всяко лучше унылых дизайнов сервисов яндекса, хотя не все моменты хороши. Например, черно-белые плашки "Главное - Все композиции..." не очень как-то.

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

чувак изобрел винамп, дизайн рафинированный, на самых вкусных местах у яндекса рекламой все заспамлено, а содержание рекламных блоков сводит на нет всю идилию в таких макетах

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

Годно :)
*с точки зрения юзабилити, тоже.

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

1. Если сделать шрифт на 4-6 px больше в основном блоке, а размер шрифта в плеере оставить как есть, то это поможет визуально обозначить иерархию информации и расставит приоритеты
2. В переключателях «Главное», «Все композиции» и пр. обводку переключателей меню сделать прозрачнее, она не так будет «светиться» и привлекать внимание, тем самым облегчит восприятие, глаз будет цепляться за «значения кнопок» , а не за вспомогательные элементы. Все тоже самое можно сказать про все кнопки и другие элементы взаимодействия.
3. В темной версии хорошо видно, что по яркости почти вся информация одинаковая. В итоге- «светится» все, а значит приоритеты не расставлены, взгляд цепляется за все подряд и ни на чем конкретно не фокусируется.
4. Если поработать с отступами и придвинуть ближе связанные друг с другом элементы (номера песен ближе к названиям, а не к краю плашки и прочие), то интерфейс будет восприниматься еще проще и быстрее, так как мозгу не придется самостоятельно искать эти связи, правильными отступами вы сами распределите логически связанные элементы.

Ответить
Развернуть ветку
Читать все 28 комментариев
null