Лого vc.ru

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

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

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

Поделиться

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

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

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

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

Жанры:

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

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

0

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

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

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

0

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

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

0

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

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

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

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

0

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

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

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

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

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

0

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

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

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

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

0

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

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

0

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

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

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

0

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

0

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

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

0

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

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

0

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

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

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

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

0

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

0

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

Сейчас обсуждают
Егор Летов

Сейчас бы сравнивать аудиофильские уши Bose с AirPods. У брендов же совершенно разное позиционирование и целевая аудитория.

Apple AirPods заняли только 2% рынка беспроводных наушников в США, а не 26% — исследование NPD
0
MC Coconut

Оставшиеся 24, видимо, потерялись

Apple AirPods заняли только 2% рынка беспроводных наушников в США, а не 26% — исследование NPD
0
Alexander Kuzmin
Retail&HoReCa

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

«Дочка» «Юлмарта» обжаловала введение процедуры наблюдения
0
Павел Сайк
Студия Палыча

Конечно вырос, но только посчитать на сколько размазался доход, считая по формуле: (доход года)/(кол-во участников)

Исследование: Доход издателей приложений для iOS и Android вырос на 40% в 2016 году — до $35 млрд
0
Павел Сайк
Студия Палыча

Skoda Yeti нету

Caradar — сервис для подбора автомобиля на основе предпочтений, образа жизни и ежемесячных расходов
0
Показать еще