Не визитка, а инструмент маркетинга и доверия
9mm — студия звукозаписи в Алматы с корнями ещё из CD-эпохи казахстанского рэпа. До этого у неё не было сайта: только карточка 2ГИС и инстаграм. Задача — сделать сайт уровня мировых студий, который продаёт запись, сведение и мастеринг, закрывает на бронь и выделяет студию среди шаблонных конкурентов.
Бренд собрали с нуля — не было ни логотипа, ни фирменного стиля. В основе кинематографичный тёмный дизайн, реальные фото студии, честное наследие сцены и главная фишка «9mm Booth», где гость записывает голос прямо в браузере через фирменную звуковую цепочку студии.
- Объём работ
- Полный цикл: продукт, бренд с нуля, дизайн, фронтенд, Web Audio, контент-ресёрч, SEO и деплой.
- Платформа
- Одностраничный сайт на Next.js 16, развёрнут на Vercel.
- Команда
- YK Partnership.
- Статус
- Живой сайт: 9mm-studio.vercel.app.
От карточки 2ГИС к продукту
Задача была не в «красивом сайте», а в инструменте, который приводит артистов и закрывает на запись. Что изменилось на практике:
БылоНикакого сайта, только карточка 2ГИС и инстаграм.
СталоКинематографичный сайт в проде с фирменным брендом, собранным с нуля.
Было«Звук студии» невозможно показать онлайн, только на словах.
Стало9mm Booth: гость слышит свой голос в обработке студии ещё до брони.
БылоЗаявки вручную в WhatsApp, без формы и без трекинга.
СталоФорма брони уходит в Telegram-бот мгновенно, с фолбэком на WhatsApp.
БылоСтоковые картинки и сомнительные «звёзды» в отзывах.
СталоРеальные фото студии и честное наследие: Gaspar и подтверждённые артисты.
Что внутри сайта
Шесть ключевых частей — от уникальной фишки до конверсии в бронь.
Запись голоса прямо в браузере
Гость читает фристайл 20–30 секунд на сайте, и его голос в реальном времени проходит через фирменную звуковую цепочку студии на Web Audio API. Он слышит «свой звук в 9mm» ещё до брони и получает шерабельный клип с вотермаркой «Demo @ 9mm». Каждый репост — бесплатная реклама студии.
Кинематографичный лук, собранный с нуля
Бренд собрали с нуля под характер студии: чёрный фон и фирменный амбер, фирменная типографика, film-grain, кастомный курсор и плавный скролл. Hero сразу бьёт оффером и реальными фото студии вместо стоков.
Честная история вместо стоковой воды
Раздел «Наследие» опирается на оригинальный ресёрч: корни с CD-эпохи, спотлайт легенды сцены Gaspar с реальными треками и ссылкой на источник, плюс стена подтверждённых артистов. Посеянные нэйм-дропы из отзывов сознательно исключены — это работает на доверие.
Понятно, что за студия и сколько стоит
Фото румов — вокальная будка, контрольная, лаунж — с аккордеоном оснащения и прозрачные тарифы с выделенным комбо «Запись + Сведение + Мастеринг». Всё ведёт к одной цели: записаться.
Заявка уходит туда, где студия на связи
Форма с валидацией отправляет заявку мгновенно в Telegram-бот, а если что-то не так — гарантированно предлагает написать в WhatsApp с уже заполненным сообщением. Бронь — это «начать разговор», а не сложный календарь.
Лёгкий сайт, который находят
Вес страницы срезан примерно вдвое: шрифты 424 → 211 КБ, JS 327 → 289 КБ. Фото раздаются через next/image, а тяжёлая фишка грузится по требованию. Плюс разметка LocalBusiness и FAQ, OG-картинка, sitemap и реальный адрес в DOM под локальный поиск.
Как это устроено внутри
Решения, которые делают фишку реальной, а сайт — быстрым и недорогим в обслуживании.
HPF → EQ → компрессор → ревер → сатурация → дилей и пишется через MediaRecorder. Экспорт собирает шерабельную видео-карточку (canvas captureStream с аудио), а где недоступно — отдаёт WAV и PNG. Всё в браузере, без сервера.ssr:false). Его аудио-код не влияет на первый экран, поэтому сайт остаётся лёгким для всех, кто фишку не открывает.next/image (AVIF/WebP, ленивая загрузка).На чём собрано и почему
Каждый инструмент выбран под конкретную задачу, а не по моде.
Нужен такой же продукт?
YK Partnership собирает сайты, видео и digital-продукты под ключ. Расскажите о задаче, предложим решение.