Лого vc.ru

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

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

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

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

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

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

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

Жанры:

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

Теги
0

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

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

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

0

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

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

0

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

0

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

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

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

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

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

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

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

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

0

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

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

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

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

0

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

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

0

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

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

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

0

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

0

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

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

0

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

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

0

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

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

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

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

0

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

0

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

Прямой эфир
Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления