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

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

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

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

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

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

Жанры:

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

{ "author_name": "Филипп Концаренко", "author_type": "editor", "tags": ["\u044f\u043d\u0434\u0435\u043a\u0441_\u043c\u0443\u0437\u044b\u043a\u0430","\u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d","\u043a\u043e\u043d\u0446\u0435\u043f\u0442","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 28, "likes": 14, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 17500, "is_wide": true, "is_ugc": false, "date": "Tue, 09 Aug 2016 14:30:22 +0300", "is_special": false }
0
28 комментариев
Популярные
По порядку
Написать комментарий...

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

15

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

0

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

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

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

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

4

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

0

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

4

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

2

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

1

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

2

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

2

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

1

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

1

Да! :)

0

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

1

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

0

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

1

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

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

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

1

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

0

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

0

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

1

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

0

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

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

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

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

0

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, и Вы лучше меня знаете, что по картинкам он не очевиден.

1

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

0

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

0

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

0

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

0

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

0

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

0
Читать все 28 комментариев
Инвесторы подняли на 1000% стоимость акций компании Phunware — разработчика приложения для президентской кампании Трампа Статьи редакции

Бывший президент объявил о запуске собственной соцсети и её выходе на биржу.

Как не попасть в карьерную ловушку тимлида: личный опыт

Кажется, что тимлиду просто некуда расти: дальше надо либо идти в менеджмент, либо наоборот, становиться узконаправленным разработчиком. По просьбе «Лаборатории Касперского» Евгений Мацюк, который прошел в компании неординарный путь, рассказал о своих карьерных развилках во время и после тимлидства, а также поделился опытом горизонтального роста.

«Яндекс.Маркет» просто издевается

Заказал на яндекс-маркете яндекс-станцию + яндекс-модуль, списать денюжки у маркета личико не треснуло, а вот с доставкой началось откровенное издевательство.

«Сбер» научил свой ИИ-сервис определять возможные признаки рака на ранних стадиях по снимкам лёгких Статьи редакции

Это может помочь врачам при диагностике заболевания.

Главные новости недели: Apple MacBook Pro, новое название Facebook, запрет Samsung Pay

Говорим о главных новостях недели в подкасте Telegram-канала ForGeeks. Сегодня в гостях Павел Беседин, ведущий на Европе Плюс и гик. Мы обсудили, почему новые MacBook Pro такие крутые, зачем Facebook решил поменять название, запретят ли в России Samsung Pay и когда уже выпустят Cyberpunk 2077 для PlayStation 5. Слушайте, читайте и подписывайтесь.

Илон Маск заявил, что Starship будет готова к орбитальному запуску в ноябре Статьи редакции

Компания должна получить разрешение регулятора.

Как OTUS стал платформой для самореализации. История преподавателя

Наш преподаватель, специалист по Data Science, решил поделиться своей историей преподавания. Он рассказал, как пришел в эту сферу, с какими трудностями столкнулся на пути к преподаванию и что ему помогает. А еще поделился советами, как поддерживать внимание студентов и сделать занятия полезными и увлекательными.

«Яндекс.Маркет»: в моем заказе вместо наушников оказалась бутылка из-под водки

Я давно хотела беспроводные наушники и наконец заказала себе Apple AirPods. Оформила заказ 15.10.2021 через Яндекс.Маркет в магазине Superbia.ru

Cloud CDN: что это такое, как устроено и кому нужно. Разбираем на примере бургеров

Cloud CDN — это сеть быстрой доставки статического контента в формате услуги облачного провайдера. Объяснить, как работает технология, проще всего на примере — сравнить Cloud CDN с популярным продуктом, который выглядит плюс-минус одинаково вне зависимости от того, заказали вы его в Москве, Питере или Нью-Йорке. Знакомьтесь: классический бургер.…

Бизнес на опечатках: в 50-х секретарше надоело ошибаться в документах, она взбила краску в блендере и создала корректор Статьи редакции

Бетт Несмит Грэм хотела сохранить в тайне изобретение, но о нём узнали коллеги, и она стала продавать им по 100 флаконов в месяц. О создании первых партий корректора в гараже, продажах на миллионы долларов и борьбу за управление собственной компанией — в пересказе The Hustle.

Машинистки в 1950-х. За печатной машинкой работала и сама Грэм, которая создала корректор, чтобы исправлять ошибки CNBC
Исследование: сотрудники хотели бы иметь комнату отдыха, бесплатный сок, а работодатели уже готовы покупать ЗОЖ-снеки

Онлайн-сервис доставки продуктов и товаров СберМаркет и исследовательское агентство Research Me спросили сотрудников, как они хотели бы питаться в офисе и что в нем видеть. В опросе приняли участие более 1500 работающих людей по всей России. Сервис также спросил работодателей – В2В-клиентов СберМаркета: что они покупают в офис, что точно никогда…

null