Закажите сайт по телефону 8-800-5555-864

Роскошь и технологии: сайт Николая Баскова

 Заказчик: Николай Басков
 Разработчик: Red Collar
 Платформа: UMI.CMS Commerce
 Сайт: baskov.ru

Николай Басков redcollar

О заказчике

Николай Басков — популярный российский эстрадный и оперный певец, золотой голос и Народный артист России.

Сайт Николая Баскова

Проблема

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

Цели и задачи

Сайт Николая Баскова — имиджевый сайт: важно было поддержать позиционирование певца. Поэтому дизайн сайта транслирует изысканность, благородство и роскошь.

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

Сайт должен быть понятным и функциональным для слушателей: содержать информацию о биографии Николая, его концертах, хранить полную коллекцию клипов и песен певца с возможностью их приобрести. Важно было найти баланс между роскошью и трендами веб-дизайна с учётом предпочтений поклонников артиста.

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

Выбор платформы

Для разработки сайта была выбрана система управления UMI.CMS, как надёжная и удобная для клиента платформа, отвечающая всем требованиям проекта по функционалу и возможностям дальнейшего развития. 

Решение

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

Дизайн

Самой сложной задачей в создании дизайна было найти компромисс между ожиданиями целевой аудитории, видением сайта со стороны клиента и современными тенденциями. В процессе создания дизайна было нарисовано и утверждено 65 макетов. Было пересмотрено большое количество вариантов, испробованы разные варианты шрифтов и фонов. В итоге было найдено решение, которое понравилось студии, заказчику и, главное, поклонникам Николая — основным пользователям сайта.

Сайт Николая Баскова

Главная страница

Главная страница должна сразу давать понять пользователю, что он попал на личный сайт Николая Баскова, поэтому на ней размещён имиджевый слайдер с изображениями певца, а также слайдер с его высказываниями или высказываниями о нём.

Сайт Николая Баскова

Английская версия сайта представляет собой отдельную страницу с несколькими блоками информации на английском языке: ближайшие шоу, биография певца, видео на иностранных языках и ссылки на сторонние ресурсы, где можно приобрести песни певца (amazon, iTunes и Google Play).

События

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

Сайт Николая Баскова

Афиша

В дизайне страницы «Афиша» была предусмотрена кастомизация карты Google, а также удобный поиск по городам. В афише представлены отсортированные по дате выступления. В каждой записи присутствует ссылка на сторонний ресурс, где поклонники могут приобрести билеты на концерт Николая.

Афиша сайта Николая Баскова

Музыка

Раздел «Музыка» — один из самых сложных на всём сайте. В разделе предусмотрены сразу три вкладки: «Смотреть», «Слушать», «Купить».

В разделе «Смотреть» отображается последний добавленный клип Николая, а также список остальных видеоклипов с набором фильтров, с помощью которых можно быстро найти нужный клип или интересующую поклонников тематику. Не стоит забывать, что клипов у Николая много, поэтому на странице предусмотрена пагинация.

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

Раздел «Купить». Самая сложная часть раздела «Музыка». Здесь выполнена интеграция с iTunes и Google Play, по-альбомно выведен список всех песен, которые можно купить в этих магазинах. Приобрести можно как отдельные песни, так и альбом целиком. Когда на iTunes и Google Play появляются новые альбомы, они автоматически становятся доступны на сайте, что облегчает работу администраторам сайта.

Раздел музыки

Жизнь

В разделе «Жизнь» предусмотрено 4 подраздела: «День за днём», «Фотоальбом», «Публикации» и «Биография». 

В разделе «День за днём» отображаются посты Николая из Twitter и Instagram и сообщения фанатам от администрации сайта. Поклонникам больше не нужно заходить в каждую социальную сеть, чтобы проверить последние новости певца — все обновления доступны в одной новостной ленте. Раздел «Фотоальбом». Здесь поклонники могут посмотреть все фотосессии певца. В разделе предусмотрен фильтр: год, фотосессии, съёмки, мероприятия (и др.) и можно выбрать, какие именно фотографии посмотреть. В разделе «Публикации» представлены все публикации из газет и журналов с Николаем. Поскольку материалов много, в разделе предусмотрена пагинация. В разделе «Биография» поклонники могут почитать о детстве певца, его первых успехах, начале сольной карьеры и о многом другом.

Раздел Жизнь

Клуб

В разделе «Клуб» размещены отзывы поклонников и участников фан-клубов Николая и информацию о фан-клубах из разных городов. С прошлого сайта перенесено более 15 000 отзывов при помощи модуля «Обмен данными», модифицированного для правильной обработки данных в предоставленном формате. Для новых откликов о творчестве певца предусмотрена форма обратной связи «Оставить отзыв», после заполнения которой создаётся событие в модуле событий, а администратор сайта получает письмо о новом комментарии для модерации. Также предусмотрен подраздел «Отчёты о концертах» для развёрнутых рецензий на выступления.

Клуб поклонников

Адаптив

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

Адаптивность сайта

Фронтенд

Сайт выполнен с использованием технологии AJAX, которая позволяет обеспечить навигацию по всем страницам сайта без перезагрузки. Для удобства пользователей разработана специальная панель, на которой виден прогресс загрузки страницы.

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

Бэкенд

Интеграция с Apple iTunes и Google Play

Раздел «Купить» интегрирован с Apple iTunes и Google Play, из которых автоматически загружается вся информация о доступных альбомах: альбомы исполнителя в наличии, все песни с каждого альбома с подробной информацией о каждой песне, изображение обложки альбома и цены.

Интеграция с социальными сетями

Продвинутая работа с социальными сетями через сайт была одним из важных моментов для клиента.

Был создан дополнительный модуль «Социальные сети», который агрегирует записи со всех социальных сетей Николая Баскова и выводит на сайт одной лентой. Модуль умеет выявлять повторы (например, если Николай поделился фотографией в Twitter из Instagram, то на сайт будет выведен только оригинал).

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

Административная панель

В административную панель внесён ряд изменений для удобства работы администратора. По просьбе клиента в панели были оставлены только необходимые администраторам поля: общие, свойства события, контент, права доступа и история изменений. Это сокращает время, затрачиваемое администратором на управление сайтом и делает этот процесс более удобным. Все тексты на сайте форматируются согласно нормам и правилам русского языка при помощи встроенного расширения «Типограф».

Результаты

Благодаря разработке нового сайта удалось достичь отличных результатов:

  • трафик на новом сайте Николая Баскова вырос в 1,5 раза по сравнению с предыдущим,
  • отказы сократились примерно в 2 раза,
  • увеличилась глубина просмотра,
  • поклонники положительно отзываются о новом сайте, отмечают его удобство и оставляют больше отзывов о творчестве певца через форму обратной связи.