Сайт,
который звучит

Концепт нового сайта Радио JAZZ 89.1 FM: эфир — главный герой, а интерфейс говорит на языке джаза — винил, ламповое табло, обложки в духе пластинок 50-х.

Открыть демо Текущий сайт радио

Задача

Сделать по собственной инициативе концепт сайта для Радио JAZZ: такой, чтобы атмосфера джаза ощущалась с первого экрана, а слушать эфир хотелось сразу. Контент — настоящий: новости, релизы, подкасты и видео взяты с текущего сайта радио.

Что мешало

Одна платформа на четыре станцииСайт общий с НАШЕ, ROCK FM и ULTRA: плеер, формы и футер рассчитаны на всех сразу, а не на джаз.
Чужая повесткаЛента новостей nsn.fm с политикой и происшествиями посреди джазового портала ломает настроение.
Эфир на втором планеГлавное у радио — эфир, но плеер прижат к краю экрана и спрятан в общую конструкцию.
Нет фокусаДлинная главная из равнозначных блоков; промо 2019 года стоит рядом со свежими новостями.
Сильный контент теряется535 биографий и сотни релизов скрыты за тегами-счётчиками.
Визуал не про джазСильные фотографии тонут в плотной мозаике, а красный цвет и интерфейс общие для всех станций холдинга — джазовой атмосферы нет.

Главная страница текущего сайта Радио JAZZ целиком — Текущая главная radiojazzfm.ru целиком — прокрути внутри окна

Поиск стиля

Blue NoteОбложки 50-х: тяжёлая типографика, плашки цвета, геометрия.Ушло в релизы и новости

Клуб после полуночиТемнота, неоновая вывеска, LED-табло.Взяли надпись и табло

ВинилВертушка, тёплый свет, пластинка как главный объект.Основа концепта

Сет-листГлавная как программа вечера в клубе.Отказались: похоже на меню

Первый микс «клуб + винил + Blue Note» вышел слишком неоновым: розовое свечение читалось как современный бар, а не джаз. Во втором варианте неон убрали, оставив от клуба только многолинейную надпись и янтарное табло, а пластинку сделали главным героем первого экрана.

Система

Ночь#15100C

Крем#EFE4CF

Латунь#C9A24A

Наклейка#C4402A

Blue#0E3F9A

Горчица#E6A92B

ЛоготипRadio JAZZ

ЗаголовкиOswald — С полки радио

ТаблоDOTGOTHIC16 — СЕЙЧАС В ЭФИРЕ

ТекстGolos Text — спокойный шрифт для чтения, с полноценной кириллицей.

Фишки

Игла опускается по нажатию Play, пластинка разгоняется до 33⅓
Скретч: пластинку можно крутить мышкой или пальцем
Треск винила генерируется в браузере, без аудиофайлов
VU-метры со стрелками на пружинной физике
Табло печатает трек по буквам
Пластинка выезжает из конверта при наведении на релиз
Программа эфира с отметкой «сейчас»
Факт дня бегущей LED-строкой
Энциклопедия с поиском, алфавитом и фильтром
Пасхалка: набери на клавиатуре «jazz»

Результат

Первый экран нового сайта: пластинка, плеер и табло — Первый экран: эфир в центре внимания

Мобильная версия нового сайта — Мобильная версия

Релизы и новости с обложками в стиле Blue Note — Релизы и новости: обложки в духе пластинок 50-х

Открыть демо Энциклопедия Страница статьи