Кейс WeavyAudio, часть 5: новый дизайн, до и после

С 11 по 13 октября 2026 года WeavyAudio получил новый облик. WeavyAudio предлагает фоновую музыку для заведений, а наша команда Breeze Professional IT Services разработала, создала, размещает и поддерживает сервис. Части 1–4 этой серии знакомят с возможностями. Эта часть — взгляд «до и после» на десять страниц, каждая показана в старом и в новом дизайне. Она написана для владельцев заведений и для компаний, которые думают о собственной музыкальной стриминговой платформе.

Вот что не изменилось: каталог, лицензия, цена и адреса страниц. Изменилось то, как выглядят страницы и как по ним перемещаться. Это был редизайн сайта и редизайн веб-приложения одновременно. В обеих версиях используется тёмная тема с янтарными кнопками, но новая теплее: чёрный и коричневый цвета, шлифованный металл, дерево и золото. Приложение построено на Next.js. Мы описываем только то, что видно на экранах.

Главная страница: настоящее приложение вместо светящейся фигуры

Заголовок не изменился: «Музыка, которую заслуживает ваше заведение. Наконец-то.» А вот остальная часть первого экрана изменилась. Раньше светящаяся янтарная фигура держала карточку «Now playing», а под кнопками стояли три цифры: $0 за счета PRO, 848 часов оригинальной музыки и $16 за точку в месяц.

Теперь справа показано окно браузера с настоящим приложением: боковая панель, «Саундтрек вашего заведения», свежие обложки, список «Далее», панель плеера и небольшая карточка «Bar · Playing». В верхней панели находятся For business, Pricing, Catalog и Blog. Под кнопками стоят три галочки: 14 days free, No card required и Cancel anytime.

Строка с предложением гласит: «Оригинальный каталог, лицензированный для воспроизведения в заведениях. Один фиксированный платёж за точку, до 12 зон включено — и никаких отчислений PRO за нашу музыку.» Цена по-прежнему $16 за точку в месяц.

Главная страница приложения: проигрыватель, показывающий ваш день

Прежняя главная страница приложения была страницей карточек-портретов: «Избранные исполнители», затем галерея «Ваша студия». Новая открывается проигрывателем виниловых пластинок. Пластинка показывает весь день заведения на одном диске, а золотое кольцо отмечает текущий момент. На скриншоте вторник, 16:14, и карточка гласит Coffee Shop, Lo-Fi & Acoustic, до 17:00. Одна большая янтарная кнопка называется «Включить то, что подходит сейчас». Под ней: «Далее в 17:00 · Ужин в ресторане».

День — это предложение для ресторана. Ниже страница предлагает также кафе, бар, магазин, спортзал, салон, спа и лобби отеля, а галерея «Ваша студия» по-прежнему на месте. С точки зрения UX-дизайна главная страница приложения теперь сначала отвечает на один вопрос: что должно играть прямо сейчас?

Боковая панель тоже изменилась: пять основных ссылок, группа Catalog и группа Tools. Новые скриншоты сделаны из бесплатной гостевой учётной записи, старые — из Premium, поэтому полоса FREE и «6 skips left» относятся к учётной записи, а не к дизайну.

Browse all: стереоресивер с ручкой настройки

Прежняя страница Browse all была сеткой больших цветных плиток (Chill, Nordic Bass, Focus, PRL) под трёхмерным узлом. Новая страница — стереоресивер модели WA-1011 с двумя стрелочными шкалами, полосой настройки, зелёным дисплеем и ручкой настройки. У каждого жанра есть место на шкале от 88.0 до 108.0. Это положения, а не настоящие радиочастоты. Дисплей показывает «Station 1 of 48».

Вы вращаете ручку, перетаскиваете шкалу или используете клавиши со стрелками. «Tune in» запускает жанр, а «Open» открывает его страницу. Переключатель Genres и Moods меняет диапазон. Названия жанров по-прежнему остаются на странице обычным текстом, со ссылками вроде «Послушать звучание chill». Совет: учить шкалу не нужно. Нажмите «Tune in» и слушайте.

Настроения: от цветных плиток к пэду настроений

Прежняя страница Moods состояла из двенадцати цветных плиток. Новая страница показывает те же двенадцать настроений на пэде из светящихся точек. Боковая ось — темп, от 100 до 130 BPM. Нижняя ось идёт от тёмного и горько-сладкого к яркому и тёплому. Легенда честна: вверх — «средний измеренный темп треков настроения», а поперёк — «наша оценка, а не измерение».

На скриншоте выбрано настроение Mellow: 113 BPM, 2,843 tracks, 378 новых за 7 дней, оно отнесено к House, Asian Jazz Lounge, Trap и Afrobeats. Шапка считает «12 moods · 15,528 tracks». Совет: чтобы успокоить зал, выберите настроение пониже на пэде и нажмите «Tune in».

Поиск: панель, показывающая, куда попадают результаты

Прежний поиск по слову «house» был простым списком: обложка, название, исполнитель, жанр, возраст, BPM, короткое описание и значки «нравится», «поделиться» и «скачать». Новая страница начинается с «Найдите свой звук» и панели Seek модели SK-48. Она показывает размер каталога: 15,528 tracks, 48 genres, 12 moods и 2,084 artists.

Под полем поиска расположена полоса с одним столбиком на каждый из 48 жанров. Для слова «house» один высокий столбик поднимается около отметки 25, а два маленьких загораются. Круглые кнопки считают результаты по настроениям: Energetic 13, Dark 11, Mellow 8, Upbeat 6, Calm 2. Итог гласит «40 tracks · 2 artists · 3 genres & moods», в основном House 36, Lo-Fi 2 и Hip-Hop 2. Скриншот заканчивается до строк с результатами, поэтому панель идёт первой. Совет: попробуйте слово-настроение, а не только жанр.

Ваша библиотека: стена пластинок

Прежняя страница Your Library была простой: значок кристалла и пустые разделы для понравившихся песен, любимых исполнителей и недавно воспроизведённых треков. Новая страница — стена деревянных полок с лестницей. У каждой пластинки есть корешок с названием, исполнителем и номером. Верхняя полка называется «Самое проигрываемое на этой неделе» и содержит 20 пластинок. Вторая полка называется «Liked».

Справа находятся небольшой проигрыватель (Start, Stop, 33, 45, shuffle) и карточка «Указатель записей» для поиска по названию, исполнителю, альбому или жанру. Латунная табличка гласит «Войдите, и ваша библиотека соберётся здесь сама». Страница также объясняет работу с клавиатурой: перейдите табуляцией к полке, двигайтесь стрелками, нажмите Enter, чтобы достать пластинку. Совет: нажмите /, чтобы сразу перейти к поиску.

Страница трека: обложка на весь экран

Прежняя страница трека была самостоятельной: небольшая шапка с «Open app», розовый градиент, квадратная обложка со значком 3D и строка фактов. Новая страница трека открывается внутри приложения, вокруг неё боковая панель и плеер. Обложка теперь огромный фон, а такая же обложка стоит впереди как карточка со значком 3D и виниловым диском в углу. Строка фактов осталась: исполнитель, жанр и настроение как ссылки, затем английский, 3:44, 122 BPM, соль минор, Lyrics и зелёное «Лицензировано для заведений». Два скриншота показывают разные песни.

Текст страницы показывает слова, следующие за звуком, с переключателем On и кнопкой Karaoke, а также «Версии этой песни» и «Похожие бодрые хаус-треки». В подвале сказано, что музыка принадлежит WeavyAudio и лицензирована для подписчиков для публичного исполнения в их зарегистрированных местах, что соответствует принципу «никаких отчислений PRO за нашу музыку». Живая музыка, DJ-сеты и ТВ со звуком могут требовать отдельных лицензий. Это объясняет страница калькулятора.

Микшер: те же регуляторы, более тёплый вид

Меньше всего изменился микшер. В обеих версиях написано «The Mixer» и «Формируйте живой звук — эквалайзер, скорость и петля.» Пресеты те же: Flat, Bass boost, Vocal, Lo-Fi и Bright. Также остались регуляторы Bass, Mid и Treble на 0 dB, управление скоростью, петля A–B и «Сбросить до плоской».

Стиль изменился: бирюзовая шапка с розовой пластинкой превратилась в тёплую коричнево-янтарную панель с тёмной пластинкой и белым заголовком. Микшер теперь находится в группе Tools вместе с Random, Games, Order music и Schedule. Текст фейдера стемов тоже переписан: «У этого трека пока нет отдельных стемов инструментов. Когда мы их добавим, здесь появится фейдер для каждого инструмента.» Совет: используйте петлю A–B, чтобы повторять один фрагмент на ваших колонках.

Расписание музыки: шаблоны вместо пустой страницы

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

Новая страница содержит панель состояния с переключателем и раздел «Начать с шаблона». На скриншоте видны карточки Restaurant, Café и Bar & lounge с обложками и небольшой временной шкалой. Текст страницы добавляет Shop & boutique, Gym, Hair & beauty salon, Spa & wellness и Hotel lobby. Карточка Restaurant включает бранч с 07:00, слот кофейни с 11:00, ужин с 17:00 и лаундж с 22:00 до 02:00. Каждый слот по-прежнему можно редактировать. Совет: выберите ближайший шаблон, а затем отредактируйте его.

На телефоне: более широкие кнопки, более короткий заголовок

Раньше на телефоне главная страница показывала в верхней панели кнопки «Log in» и «Free trial», заголовок в четыре строки, «Как это работает» рядом с главной кнопкой, затем цифры $0, 848h и $16 и карточку «Now playing».

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

Так выглядит новый облик, страница за страницей. Каталог, лицензия, цена и адреса страниц остались прежними. Тёмная тема сохранилась, а многие страницы теперь построены вокруг одного предмета: проигрывателя, ресивера, пэда настроений, полки с пластинками. Части 1–4 тоже описывают новый дизайн, поэтому за подробностями об исполнителях, альбомах, плейлистах, лицензировании и Weavy Studio обращайтесь к ним.

Планируете редизайн сайта или индивидуальную веб-платформу для собственного бизнеса? Breeze Professional IT Services может спроектировать, создать, разместить и поддерживать её. Свяжитесь с нами, чтобы обсудить ваш проект.

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