Оффтоп Philipp Kontsarenko
5 260

Команда Mail.Ru Group о редизайне собственного сервиса о кино «Афиша Mail.Ru»

Команда Mail.Ru Group рассказала vc.ru о работе над редизайном проекта о кино «Афиша Mail.Ru». По словам представителей сервиса, компания решила заняться внедрением новых функций на уже существующем сайте, вместо того, чтобы вкладывать все ресурсы в новый дизайн.

В прошлом году мы запустили первые медиа-проекты Mail.Ru Group в унифицированном подходе, который мы назвали «бургерным дизайном». К текущему моменту их уже 9 — «Авто», «Афиша», «Гороскопы», «Здоровье», «Леди», «Недвижимость», «Погода», ТВ и Hi-Tech.

Все началось с редизайна «Афиши Mail.Ru», где родился «бургерный» подход — серия «поясов», «строк», «врезов» или «контейнеров», которая активно используется в современных промосайтах, да и мобильные построены примерно по такому же принципу.

Текущая версия:

Одной из задач новой версии был запуск онлайн-кинотеатра, который агрегировал бы фильмы и сериалы основных провайдеров. Решая, как поступить — вложить все усилия в новый дизайн, либо начать внедрение на уже существующем, чтобы параллельно заниматься новой версией — выбрали второй путь.

И, судя по всему, не ошиблись — продукт вывел возможности онлайн-просмотра на рынок в 2012 году, а в это время мы спокойно занимались редизайном. Благодаря этому у нас было достаточно времени на бета- и юзабилити-тестирование, полировку продукта, так что к осени 2014 запустилась новая версия «Афиши».

Запуск платформы для линейки продуктов — большая и сложная задача, поэтому осталось много мелочей, которые хотелось бы исправить, доделать, докрутить, улучшить.

С пониманием проблем мы подготовили видение следующей версии «бургерного дизайна», которая постепенно будет переноситься на медиа-проекты Mail.Ru. Это позволит нам:

  • Сократить высоту страниц на 20-25%. Самые популярные разрешения — 1366x768 и 1280x800, для них в экран помещается больше.
  • Сделать визуальную стилистику легче, чтобы сделать линейку современнее — она базируется на концепте начала 2013 года.
  • Стандартизировать врезы, чтобы работать с ними было еще проще.

Концепт редизайна:

Это не финальный макет, скорее видение того, как мы будем упрощать всю линейку — нам еще предстоит детально доработать каждый блок. Но направление понятно.

Сравнение двух версий:

#Интерфейсы

{ "author_name": "Philipp Kontsarenko", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 16, "likes": 14, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 11117, "is_wide": true }
{ "id": 11117, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/11117\/get","add":"\/comments\/11117\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/11117"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

16 комментариев 16 комм.

Популярные

По порядку

Написать комментарий...
10

Ну хуже КиноПоиска уже не будет)

Ответить

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

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

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

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

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

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

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

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

6

отличная работа пиар-службы)

Ответить
1

Да-да, именно, классно подсуетились)

Ответить
5

Офигеть просто какой длинный сайт!

Ответить

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

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

0

ДРАММА на самой первой картиночке взяла так вот просто и отрезала мне глаза к чертовой матери!

Ответить
0

Бесполезным социальным сайтиком :) Да ладно, расслабься, ну ошиблись вы в своем Яндексе, у всех косяки бывают. Просто верните ВСЕ, СУКА, НАЗАД и все будет хорошо :)

Ответить
0

Б - Безразличие

Когда mail.ru запускает новый сервис, но всем настолько пофиг ввиду прошлых заслуг, что даже смотреть не хочется.

Ответить
0

При всем уважении к Юрию Ветрову получилось нечто странное. Дальше двух экранов листать вообще не интересно. Да и подтормаживает заметно (4Мб каждая страница).

p.s. И раскройте секрет, зачем иконка звука появляется в Сафари? Немного пугает такая наглость.

Ответить
0

Для этого и думаем о следующем этапе развития линейки медиа-проектов, в том числе Афиши. Где-то не довели до ума задуманное, где-то остались баги, где-то не додумали интерфейс. Но в любом случае запуск прошел в несколько этапов (5%, 30%, 100% в течение полутора месяцев), ничего не падало, ключевой функционал остался на месте и не был запрятан за многие клики. Нам очень хочется поставить эволюционное развитие сервисов на хорошую скорость, чтобы не было драм с тотальной переделкой, при этом постоянно поддерживая актуальность. Внедрение показанных в концепте решений — часть этой эволюции. До этого запуска было так — http://old.greensight.ru/projects/afisha-mail/.

По поводу звука — в Хроме такого нет, узнаю, в чем дело.

Ответить
2

Спасибо за объяснение, в таком случае результат конечно впечатляет. Упорядочить тот предыдущий хаос, это надо постараться...

Ответить
0

Причем выкидывать ничего нельзя было :) Разве что в связи с пересмотром бизнес-модели продукта он фокусировался на онлайн-просмотре кино и городские события были закинуты далеко и глубоко, как на порядки менее востребованные. Мы в июле закончили большинство перезапусков медиа-проектов на новой платформе, сейчас занимаемся решением накопившихся проблем. Думаю, в течение следующего года приведем все к очень приятному виду :)

Ответить
0

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

А планируется ли какое пересечение? Допустим брать некоторые куски и использовать в рамках другого проекта. Допустим какие киношные материалы на новостном портале портале подтягивать к новости и тд.

Ответить
1

Так оно уже частично работает :) Авто, Афиша, Гороскопы, Здоровье, Леди, Недвижимость, Погода, ТВ и Hi-Tech. Остались Дети, Новости, Спорт и Cars. Другое дело, что это огромная задача и пока мы переводили первые 9 продуктов на платформу, накопилась уйма вещей, которые надо доделать-переделать, да и сами единые компоненты не везде получилось реализовать правильно. Поэтому в ближайший год нас ждет большая работа по причесыванию, полировке и тюнингу.

Другое дело, что сделать единый стиль для Почты и Афиши — вообще непонятно как (да и нужно ли). Разные задачи, разный контент, разные сценарии использования. Но если получится — будет очень круто. Мы про это думаем и копаем, но простых ответов нет.

Ответить
1

Крутяк! =)

Ответить
0

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

Ответить
0

Там написано сереалы :(

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления