/
← Все проекты
SHEET 30ВИНИЛ И АУДИОТЕХНИКА2026

Grove & Grain

Магазин винила без единой фотографии: рисованные портреты слушателей вместо витрины товара, фильтр по цвету конверта и комната прослушивания как точка продажи.

Grove & Grain

Небольшой физический зал, кураторский отбор пластинок, проигрыватели и компоненты среднего и высокого сегмента, комната прослушивания. Роль студии — концепция, арт-дирекшн, иллюстрация, UX/UI и фронтенд.

A — ФИЛЬМ ПО ЭКРАНАМ

Видео-прогулка по экранам: вход, главы-дисциплины, магазин и хранилище.

B — ВВОДНЫЕ
Клиент
Магазин винила и аудиоаппаратуры с комнатой прослушивания
Что было
Сайт-складская выдача: сетка карточек, фильтры, цена
Товар
Тот же винил и та же техника, что у всех, — и почти всегда дешевле на маркетплейсе
Реальная ценность
Продавец, разговор у прилавка, зал, постоянные посетители — всё офлайн
Чек
Высокий на технике, решение о покупке долгое
Метрика успеха
Возвраты на сайт, брони прослушивания, доля продаж без скидки
Ключевая проблема

Магазин продаёт не пластинки, а принадлежность к сообществу слушателей. Сайт этого не передавал ни одним пикселем: по каталогу можно только сравнить цену, а в сравнении цены маленький магазин проигрывает всегда.

Цели
  1. 01Уйти с поля ценовой конкуренции — перестать выглядеть как каталог
  2. 02Перенести в цифру главный актив магазина: людей и атмосферу зала
  3. 03Дать повод вернуться, даже когда человек ничего не покупает сегодня
  4. 04Собрать вокруг магазина сообщество, а не разовый трафик
  5. 05Сделать сайт настолько узнаваемым, чтобы его пересылали друг другу
C — ОГРАНИЧЕНИЯ

Ограничения — не оправдание, а аргумент: они объясняют, почему решение выглядит именно так.

  • Нет фотопродакшена: съёмка зала и людей дорога и мгновенно устаревает.
  • Нет прав на музыку — коммерческие релизы проигрывать нельзя.
  • Нет портретных прав посетителей: реальные лица публиковать нельзя.
  • Каталог из 30–60 позиций в стандартной сетке выглядит бедно.
  • Один человек на поддержке контента: ежедневный продакшен умрёт через месяц.
  • Основная аудитория мобильная, но технику изучают с десктопа.
D — КОНЦЕПЦИЯ

Носителем бренда стала авторская иллюстрация — портреты слушателей. Витрина строится вокруг людей, а не вокруг количества позиций: скопировать вёрстку можно, руку — нет.

E — РЕШЕНИЯ И ОБОСНОВАНИЕ

Первый экран: пластинка с портретом в центре

4.1

Рисунок вместо фотографии

Задача
Найти носитель бренда, который конкурент не сможет повторить.
Ограничение
Ни съёмки, ни прав на лица, ни бюджета на постоянный продакшен.
Решение
Маркер, масляная пастель, карандаш и коллаж по кремовой бумаге; кислотная палитра — жёлтый, вермильон, циан, мох. Намеренно незавершённая линия, зерно, «наклеенные» тени. Форма повторяет носитель: винил — это шум, дефект и ручной ритуал, поэтому интерфейс бумажный, а не стеклянный.
Эффект
Стоимость контента — часы художника, а не смена в студии. Рисованное лицо не является фотографией конкретного человека, и правовой риск снимается вместе с бюджетом.

Галерея: портрет, цитата и его пластинка

4.2

Wall of Ears — витрина людей

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

Full House: 46 посетителей, карандаш и цветная линия

4.3

Full House как доказательство

Задача
Показать, что у магазина действительно есть сообщество.
Ограничение
Отзывов мало, а те, что есть, выглядят как у всех.
Решение
Плотная мозаика из десятков карандашных портретов постоянных посетителей: наведение поднимает голову из толпы, клик включает то, что играло во время рисунка.
Эффект
Доказательство сделано графикой, а не текстом: «вас тут много» читается за секунду.

Crate: жанр и цвет конверта как фильтры

4.4

Crate: фильтр по цвету конверта

Задача
Дать способ выбирать, которого нет у маркетплейса.
Ограничение
Маленький каталог в стандартной сетке выглядит бедно.
Решение
Каталог фильтруется по жанру и — принципиально — по цвету конверта. Это честно отражает то, как выбирают винил: сначала глазами, потом ушами.
Эффект
Небольшой ассортимент превращается в кураторскую подборку, а не в скудную выдачу; появляется повод остаться.

Apparatus: прогрев, игла и живой звук

4.5

Apparatus: техника как ожившая иллюстрация

Задача
Создать эмоциональный контакт с дорогим товаром до визита в зал.
Ограничение
Спецификациями мы всё равно проиграем магазину с прайсом.
Решение
Каждый аппарат нарисован; при наведении он «прогревается», по клику раскручивается пластинка. Звучат реальные треки лейбла-партнёра — права чистые.
Эффект
Техника продаётся доверием и атмосферой, а не таблицей характеристик; сайт при этом звучит легально.

Listening Room: слот, кресло и портрет во время прослушивания

4.6

Listening Room и Commission

Задача
Перевести трафик в офлайн и монетизировать сам фирменный стиль.
Ограничение
Основная маржа — в зале, а поддерживать сложные механики некому.
Решение
Бронирование прослушивания слотами в один экран — точка конверсии в визит. Отдельно Commission: заказ собственного портрета, который становится вторым продуктом и механикой удержания.
Эффект
Визит продаёт технику с высоким чеком, а портрет уходит в соцсети посетителя — стоимость привлечения падает.

Journal: заметки, написанные у прилавка

4.7

Журнал и адаптив

Задача
Дать причину возвращаться между покупками и сохранить голос на мобильном.
Ограничение
Контент ведёт один человек; мобильных заходов больше, чем десктопных.
Решение
Журнал заметок о находках — часы одного человека, а не съёмочная смена. Мобильная версия сохраняет бумагу, зерно и кислотные акценты без упрощения до «белого списка».
Эффект
Поисковый трафик и возвраты растут без роста производственной нагрузки.
F — ЧТО МЫ СОЗНАТЕЛЬНО НЕ ДЕЛАЛИ
  • ×Не делали фотогалерею — нет прав, нет бюджета и мгновенное устаревание.
  • ×Не делали маркетплейс-сетку: это возврат на поле цены.
  • ×Не делали тёмную «аудиофильскую» тему — визуальный код десятков конкурентов.
  • ×Не делали вау-анимации без функции: их не переживёт поддержка одним человеком.
  • ×Не ставили стоковую музыку — только треки лейбла-партнёра с чистыми правами.
G — ДИЗАЙН-СИСТЕМА

#f4ecdc

Кремовая бумага

#f5d312

Кислотный жёлтый

#ec3a13

Вермильон

#1cc4dd

Циан

#1b1712

Чернильный

Дисплей
Archivo Black
Интонация
Playfair Display Italic
Интерфейс
Space Grotesk
Текст
Work Sans
H — ЭКРАНЫ
Главная: «Every listener has a face»
Wall of Ears: портреты с цитатами
Crate: фильтр по цвету конверта
Apparatus: нарисованная техника
Full House: мозаика постоянных посетителей
Listening Room: бронирование слота
Commission: заявка на собственный портрет
Journal: заметки о находках
Раскладка ключевых экранов
I — РЕЗУЛЬТАТ
  • Магазин выведен из ценовой войны: выбор стал эмоциональным и кураторским
  • Портрет работает как подарок и как бесплатный пост в соцсетях посетителя
  • Listening Room переводит трафик в визит, где продаётся дорогая техника
  • Commission монетизирует сам фирменный стиль — продукт, которого нет у конкурента
  • Через год у магазина будет коллекция сотен портретов: мерч, выставка, обложки

Проект живёт в сети — можно посмотреть вживую

Смотреть сайт ↗
Следующий проектYasno