Лого 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

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

Сейчас обсуждают
Kirill Pankin

Смерть? Почему смерть? Целиком успешный стартап. Просто его реальный бизнес-план не был озвучен.

Смерть стартапа: Как создатели «умного» кольца BioRing собрали $460 тысяч на краудфандинге и исчезли
0
Prolis Labkk
Bpsimulator

Пономарев в 2010 сдал икеевской "Меге" в аренду дизельные генераторы, а потом не забрал их и потребовал аренду и штрафы.

Суд отменил арест 9 млрд рублей IKEA после вмешательства бизнес-омбудсмена Бориса Титова
0
Denis Sudak

" Это отличная фишка от Google, которую, к сожалению, не многие используют." Ну почему немногие используют. Этот инструмент и многое другое, что описано в статье (очень интересной кстати спасибо) используется в любом современном и уважающем себя агентстве по контекстной рекламе, например, ive агентство, которое настраивало нам рекламные материалы.

Пять лайфхаков Google AdWords при настройке рекламной кампании
0
Vladimir Alexeev

Да, помню было время переделывал iOS приложение данной студии (65apps). Денег изначально было потрачено более 1 млн. руб и ничего не работало на выходе.

Думаю лучший способ сэкономить, это не иметь дело с автором ))

8 способов сэкономить на разработке мобильного приложения
0
Lera Slavgorodskaya

а что вас в корзине смутило? или вы не допускаете, что cr из корзины в покупку тоже мог вырасти?

Пять лайфхаков Google AdWords при настройке рекламной кампании
2
Показать еще