AISongGen logoAISongGen

Четыре темы, одна песня — как с помощью цвета спроектировать плеер

Почему aisonggen поставляется с четырьмя равноправными темами вместо одного канонического облика и что это решение изменило в поверхности прослушивания.

6 мин чтения

Дефолтный вид музыкального инструмента задаёт жанр музыки, которую в нём делают. Чёрно-фиолетовый синт-инструмент подталкивает людей к синт-трекам. Тёплый «бумажный» фолк-инструмент подталкивает их к фолк-трекам. Мы хотели, чтобы aisonggen ощущался нейтральным к жанру, поэтому в нём четыре темы, и все они равноправно стоят на входе.

Четыре настроения, на которых мы остановились

  • Sonic Teal — холодный, клинический дефолт. Выглядит как внутренности мастеринг-студии после полуночи. Лучше всего для эмбиента, техно, всего, где песня — скорее архитектура, чем история.
  • Neon Orange — громкая, горячая. Бренд-дефолт. Выглядит как выход из клуба в 2 часа ночи. Лучше всего для трэпа, гиперпопа, всего, где смысл — в энергии.
  • Studio Black — тихая, дорогая. Угольный и золотой. Выглядит как кожаный гитарный комбик. Лучше всего для джаза, соула, песен сонграйтеров, которые хотят, чтобы их воспринимали всерьёз.
  • Electric Magenta — игровая. Розовый и хром. Выглядит как внутренности Y2K-клипа. Лучше всего для попа, дэнса, всего, где шутке позволено быть очевидной.

Чего нам стоили эти темы

Дизайн под одну тему — это тысяча мелких решений о контрасте, иерархии и акцентах. Дизайн под четыре — это та же тысяча решений, четыре раза, и они должны лечь на один и тот же компонент, ничего не сломав. Мы сделали задачу разрешимой, переведя весь цвет в систему токенов: компоненты сами никогда не лезут к hex-коду, только к роли — --primary, --accent, --bg-elevated. Темы меняют значения; компоненты не меняются вообще.

Что мы получили

То, чего мы не ожидали: люди начали выбирать темы по жанровому контексту, а не по личному вкусу. Продюсер, работающий над трэп-битом, переключался в Neon Orange, даже если его дефолт был Sonic Teal. Переключатель тем перестал быть выпадашкой в настройках и стал частью рабочего процесса — способом настроить комнату под нужную песню, которую Вы как раз пишете.

Заметка о доступности

Все четыре темы соответствуют WCAG AA по контрасту текста и кольцам фокуса. Ни одна из них не полагается только на цвет для передачи состояния — у каждого активного состояния также меняется форма, вес или положение. Пользователь, который не различает цвета между Sonic Teal и Neon Orange, всё равно должен суметь понять, что кнопка нажата.

Ваш следующий трек — в одном бесплатном промпте

Откройте студию, опишите вайб, услышьте готовую песню за 30 секунд. Бесплатный старт, royalty-free для релиза, карта не требуется.