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

Небольшой физический зал, кураторский отбор пластинок, проигрыватели и компоненты среднего и высокого сегмента, комната прослушивания. Роль студии — концепция, арт-дирекшн, иллюстрация, UX/UI и фронтенд.
Видео-прогулка по экранам: вход, главы-дисциплины, магазин и хранилище.
- Клиент
- Магазин винила и аудиоаппаратуры с комнатой прослушивания
- Что было
- Сайт-складская выдача: сетка карточек, фильтры, цена
- Товар
- Тот же винил и та же техника, что у всех, — и почти всегда дешевле на маркетплейсе
- Реальная ценность
- Продавец, разговор у прилавка, зал, постоянные посетители — всё офлайн
- Чек
- Высокий на технике, решение о покупке долгое
- Метрика успеха
- Возвраты на сайт, брони прослушивания, доля продаж без скидки
Магазин продаёт не пластинки, а принадлежность к сообществу слушателей. Сайт этого не передавал ни одним пикселем: по каталогу можно только сравнить цену, а в сравнении цены маленький магазин проигрывает всегда.
Цели- 01Уйти с поля ценовой конкуренции — перестать выглядеть как каталог
- 02Перенести в цифру главный актив магазина: людей и атмосферу зала
- 03Дать повод вернуться, даже когда человек ничего не покупает сегодня
- 04Собрать вокруг магазина сообщество, а не разовый трафик
- 05Сделать сайт настолько узнаваемым, чтобы его пересылали друг другу
Ограничения — не оправдание, а аргумент: они объясняют, почему решение выглядит именно так.
- Нет фотопродакшена: съёмка зала и людей дорога и мгновенно устаревает.
- Нет прав на музыку — коммерческие релизы проигрывать нельзя.
- Нет портретных прав посетителей: реальные лица публиковать нельзя.
- Каталог из 30–60 позиций в стандартной сетке выглядит бедно.
- Один человек на поддержке контента: ежедневный продакшен умрёт через месяц.
- Основная аудитория мобильная, но технику изучают с десктопа.
Носителем бренда стала авторская иллюстрация — портреты слушателей. Витрина строится вокруг людей, а не вокруг количества позиций: скопировать вёрстку можно, руку — нет.
Первый экран: пластинка с портретом в центре
Рисунок вместо фотографии
- Задача
- Найти носитель бренда, который конкурент не сможет повторить.
- Ограничение
- Ни съёмки, ни прав на лица, ни бюджета на постоянный продакшен.
- Решение
- Маркер, масляная пастель, карандаш и коллаж по кремовой бумаге; кислотная палитра — жёлтый, вермильон, циан, мох. Намеренно незавершённая линия, зерно, «наклеенные» тени. Форма повторяет носитель: винил — это шум, дефект и ручной ритуал, поэтому интерфейс бумажный, а не стеклянный.
- Эффект
- Стоимость контента — часы художника, а не смена в студии. Рисованное лицо не является фотографией конкретного человека, и правовой риск снимается вместе с бюджетом.
Галерея: портрет, цитата и его пластинка
Wall of Ears — витрина людей
- Задача
- Перенести в цифру разговор у прилавка и атмосферу зала.
- Ограничение
- Публиковать фото посетителей нельзя, стоковые лица убивают доверие.
- Решение
- Стена нарисованных портретов с жанровыми тегами и цитатами. Каждый портрет кликабелен и включает трек, который «слушал» этот человек.
- Эффект
- Социальное доказательство без правовых рисков: сайт показывает не ассортимент, а сообщество, к которому хочется принадлежать.
Full House: 46 посетителей, карандаш и цветная линия
Full House как доказательство
- Задача
- Показать, что у магазина действительно есть сообщество.
- Ограничение
- Отзывов мало, а те, что есть, выглядят как у всех.
- Решение
- Плотная мозаика из десятков карандашных портретов постоянных посетителей: наведение поднимает голову из толпы, клик включает то, что играло во время рисунка.
- Эффект
- Доказательство сделано графикой, а не текстом: «вас тут много» читается за секунду.
Crate: жанр и цвет конверта как фильтры
Crate: фильтр по цвету конверта
- Задача
- Дать способ выбирать, которого нет у маркетплейса.
- Ограничение
- Маленький каталог в стандартной сетке выглядит бедно.
- Решение
- Каталог фильтруется по жанру и — принципиально — по цвету конверта. Это честно отражает то, как выбирают винил: сначала глазами, потом ушами.
- Эффект
- Небольшой ассортимент превращается в кураторскую подборку, а не в скудную выдачу; появляется повод остаться.
Apparatus: прогрев, игла и живой звук
Apparatus: техника как ожившая иллюстрация
- Задача
- Создать эмоциональный контакт с дорогим товаром до визита в зал.
- Ограничение
- Спецификациями мы всё равно проиграем магазину с прайсом.
- Решение
- Каждый аппарат нарисован; при наведении он «прогревается», по клику раскручивается пластинка. Звучат реальные треки лейбла-партнёра — права чистые.
- Эффект
- Техника продаётся доверием и атмосферой, а не таблицей характеристик; сайт при этом звучит легально.
Listening Room: слот, кресло и портрет во время прослушивания
Listening Room и Commission
- Задача
- Перевести трафик в офлайн и монетизировать сам фирменный стиль.
- Ограничение
- Основная маржа — в зале, а поддерживать сложные механики некому.
- Решение
- Бронирование прослушивания слотами в один экран — точка конверсии в визит. Отдельно Commission: заказ собственного портрета, который становится вторым продуктом и механикой удержания.
- Эффект
- Визит продаёт технику с высоким чеком, а портрет уходит в соцсети посетителя — стоимость привлечения падает.
Journal: заметки, написанные у прилавка
Журнал и адаптив
- Задача
- Дать причину возвращаться между покупками и сохранить голос на мобильном.
- Ограничение
- Контент ведёт один человек; мобильных заходов больше, чем десктопных.
- Решение
- Журнал заметок о находках — часы одного человека, а не съёмочная смена. Мобильная версия сохраняет бумагу, зерно и кислотные акценты без упрощения до «белого списка».
- Эффект
- Поисковый трафик и возвраты растут без роста производственной нагрузки.
- ×Не делали фотогалерею — нет прав, нет бюджета и мгновенное устаревание.
- ×Не делали маркетплейс-сетку: это возврат на поле цены.
- ×Не делали тёмную «аудиофильскую» тему — визуальный код десятков конкурентов.
- ×Не делали вау-анимации без функции: их не переживёт поддержка одним человеком.
- ×Не ставили стоковую музыку — только треки лейбла-партнёра с чистыми правами.
#f4ecdc
Кремовая бумага
#f5d312
Кислотный жёлтый
#ec3a13
Вермильон
#1cc4dd
Циан
#1b1712
Чернильный
- Дисплей
- Archivo Black
- Интонация
- Playfair Display Italic
- Интерфейс
- Space Grotesk
- Текст
- Work Sans
- Магазин выведен из ценовой войны: выбор стал эмоциональным и кураторским
- Портрет работает как подарок и как бесплатный пост в соцсетях посетителя
- Listening Room переводит трафик в визит, где продаётся дорогая техника
- Commission монетизирует сам фирменный стиль — продукт, которого нет у конкурента
- Через год у магазина будет коллекция сотен портретов: мерч, выставка, обложки
Проект живёт в сети — можно посмотреть вживую
Смотреть сайт ↗