Модульная сетка. В дизайне страниц сайта мы использовали «классическую» сетку — шапку с крупным баннером, основным трех-колоночным блоком и с сайт-баром, расположенным в правой части. Такая сетка понятна большинству интернет-пользователей, учитывая, что основная аудитория сайта — это люди «за тридцать». Однако, мы добавили адаптивность данной сетке, чтобы она подстраивалась под разные размеры окна браузера, а также идеально отображалась на мобильных девайсах
Цветовая схема. В её основу легли цвета логотипа и фирменные цвета бренда согласно гайдлайнам Ретро ФМ
Пиктограммы. Чтобы подчеркнуть ретро направленность сайта нами были использованы яркие иконки в стиле диско. Данные иконки также сформировали паттерн для шапок страниц второго уровня


Главная страница
Страница новости
Страница программы
Меню и хедер. В меню элементы, которыми пользователь не пользуется повседневно, скрыты за иконкой «гамбургера», а всё важное оставлено на виду. Кнопка прямого эфира (основное целевое действие на сайте) сделана яркой, чтобы она сразу бросалась в глаза. Соцсети, помимо самых основных, убраны в одну иконку шаринга, чтобы визуально не усложнять меню
Плеер и элементы интерфейса. Сверху вниз: пример выпадающего меню, тайм-лайн эфира и UI-элементы плеера. Основные элементы управления в плеере — кнопка плей и кнопки смены канала (Ретро 90, Ретро 80 и т.д.) расположены по центру, чтобы они сразу попадали в поле внимания. Слева расположена название и выбор канала, обложка, информация об исполнителе и песни играющей в эфире. Справа находятся контроллы выбора качество звучания, громкость, кнопка перехода к модальному плееру и выбор плейлиста
Развернутое меню. При нажатии на иконку «гамбургера» пользователю показывается развернутое и детальное меню, с подробной навигацией
Элементы дизайна модального плеера, который открывается в отдельном окне
Различные состояния интерфейса — выпадающее меню и плеер в состоянии выбора плейлеста и основных каналов

Дизайн сайта для мобильных устройств

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

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

Дизайн коммерческого предложения

Для рекламной компании обновленного Ретро ФМ было сверстано коммерческое предложение, рассказывающее о преимуществах радиостанции и формирующее ее правильное позиционирование. В коммерческом предложении бала отражена информация об основных программах и ведущих, рассказано о целевой аудитории радиостанции и городах вещания, а также изложены основные ценности бренда и многое другое.

wow animated fadeInUp
Разворот, рассказывающий о программе «Феличита»
Целевую аудиторию Ретро ФМ было решено визуализировать, используя инфографику
Информация о новостной программе и спец. проекте — Вечеринка Ретро ФМ
Разворот, рассказывающий о регионах вещания Ретро ФМ

Итог работы

Было сделано более 15 динамических прототипов — главная страница и страницы второго уровня: программы, ведущие и новости — детально, а второстепенные страницы — схематично. Разработана визуальная концепция сайта, look and feel схема, UI-kit сайта и отрисованы все состояния интерфейса. На основе этих наработок был сделан дизайн всех типовых страниц сайтов, подготовлены фотографии ведущих и обложки программ. Помимо этого разработан модальный плеер и сверстано коммерческое предложение радиостанции.
Посетить сайт ›
Над проектом работали:
Антон Мальцев

UI/UX-специалист

Kuzenko.net

Fron-tend, Back-end разработка

Владимир Смирнов

Руководитель проекта

Другие работы