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

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

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

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

Решение

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

Дизайн

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

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

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

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

События

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

Афиша

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

Музыка

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

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

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

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

Жизнь

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

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

Клуб

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

Адаптив

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

Фронтенд

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

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

Бэкенд

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

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

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

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

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

Результаты

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