Разработка интернет-магазина · Рязань
ПианоПлюсСайт, который играет — каждая клавиша открывает страницу магазина
Магазин музыкальных инструментов в Рязани: больше 15 тысяч товаров и почти три сотни брендов — от цифровых пианино до гитарных струн. Команда студии разработала для магазина интернет-магазин с собственным дизайном — дорогим и спокойным, как концертный зал, и продающим, как маркетплейс. Нажмите на клавишу — откроется страница сайта.
- 15 400+
- товаров каталога с ценами и остатками поставщика
- 289 брендов
- от Yamaha до мастерских народных инструментов
- 22 раздела
- с иллюстрациями в одном стиле
- Все страницы
- от главной до 404 — собственный дизайн
Задача
Партитура
в три ноты
Магазин хотел современный и дорогой сайт с эффектами и анимацией — но главное, чтобы он продавал, а не просто красиво выглядел. Мы записали задачу как партитуру: три ноты, по которым собран каждый экран.
- Нота 1Дорого, но спокойноТёмно-зелёный лак, слоновая кость и латунь — как в хорошем зале. Анимация мягкая: инструменты проступают, а не выпрыгивают.
- Нота 2Продаёт, а не показываетКарточка товара — как на маркетплейсе, блок покупки всегда под рукой, заказ — на одной странице, звонок и «купить в 1 клик» — в одно касание.
- Нота 3Новая каждая страницаНе только главная: каталог, бренды, корзина, доставка, контакты, новости, окна, плашка cookie и даже страница «не найдено».
Фирменный язык
Лак, латунь
и слоновая кость
Цвета взяты у концертного рояля: тёмно-зелёный лак корпуса, латунь педалей и слоновая кость клавиш. Заголовки — классический Cormorant Garamond, как в нотных изданиях; тексты, цены и кнопки — чёткий Manrope. Сквозные мотивы — скрипичный ключ, нотный стан и мягкие волны звука. Нажмите на клавиши палитры.
Первый экран
Инструменты —
как круги по воде
На первом экране сайта инструменты по очереди проступают в центре акустических волн — каждый в своём месте сцены, раз в несколько секунд, и так же медленно растворяются. Одновременно видно не больше двух. Подпись «Выбираем…» и строка разделов следуют за инструментом. Владелец просил плавнее и спокойнее — мы приглушили волны и блики, чтобы эффект не спорил с каталогом.
Иллюстрации
22 раздела —
одна студия
Для каждого раздела каталога нарисована иллюстрация в едином стиле: тёмно-зелёная студия и тёплый латунный свет. Они встречают покупателя в меню каталога, на главной и в шапках разделов — и связывают 15 тысяч разных товаров в один магазин. Это иллюстрации, а не фотографии товаров. Наведите — карточка повернётся названием.
01Клавишные
02Гитары
03Ударные
04Духовые инструменты
05Аккордеоны, Баяны
06Смычковые инструменты
07Народные инструменты
08Арфы и аксессуары
09Перкуссия
10Гитарные струны
11Гитарные аксессуары
12Звуковое оборудование
13Тюнеры, метрономы, камертоны
14Микрофоны и радиосистемы
15Наушники
16Студийное оборудование
17Трансляционное оборудование
18Световое оборудование
19Генераторы эффектов
20Коммутация
21Аксессуары
22Ноты, самоучители
Главная
Главная —
в десять частей
Главная ведёт покупателя от впечатления к покупке: первый экран, разделы, популярное и новинки, цифры магазина, сервис «от выбора до первой ноты», бренды, рассказ о магазине и новости. Цифры считаются из каталога, а не вписаны вручную. Выберите часть — окно сайта прокрутится к ней.
Карточка товара
Три колонки —
как на маркетплейсе
Покупатели привыкли к карточкам больших маркетплейсов, поэтому товар устроен так же: слева галерея, в центре короткая справка, справа — блок покупки, который едет вместе со страницей. Ниже — описание, характеристики и ленты похожих, сопутствующих и просмотренных товаров.
1
2
3
Каталог
15 тысяч товаров —
в одном ритме
Товары, цены и остатки приходят от оптового поставщика Lutner и обновляются сами — магазину не нужно переносить их вручную. Дизайн мы строили под этот поток: любая из 15 тысяч карточек, с длинным названием или без фото, выглядит аккуратно, а описания с видео от поставщика подстраиваются под экран телефона.
Число товаров, брендов и разделов — по каталогу сайта на 22 октября 2026 года.
Магазин
От раздела
до заказа
Покупатель проходит путь от раздела каталога до оформления заказа — и на каждом шаге видит тот же магазин: крупные заголовки на тёмном фоне, светлые карточки, латунные акценты и зелёные кнопки. Заказ оформляется на одной странице, без лишних переходов.
Крупный заголовок на тёмном фоне, подразделы плашками, фильтры и сортировка — в одну строку, карточки с ценой и кнопкой «В корзину».
Открыть на сайте ↗Детали
Даже ошибка —
в тональности
На странице «не найдено» нота выпала из партитуры, а под цифрами 404 стоит маленькое пианино: на нём можно сыграть гамму мышью, пальцем или цифрами клавиатуры. Попробуйте здесь — это тот же инструмент, что на сайте. Рядом — окно «Купить в 1 клик» и плашка cookie в стиле магазина.
Эта нота выпала
из партитуры
Живой сайт
Страницы —
одним голосом
У внутренних страниц общая шапка: тёмно-зелёная полоса с крупным заголовком и хлебными крошками. Дальше у каждой своя подача: доставка и «О компании» — карточками и цитатами, контакты — с картой, новость — с галереей фотографий. Наведите на окно — страница прокрутится.
На телефоне
Музыкальный магазин —
в кармане
На телефоне — та же шапка с поиском и корзиной, меню каталога с иллюстрациями разделов и нижняя панель: главная, каталог, поиск, избранное и корзина всегда под пальцем. Карточки, фильтры и оформление заказа перестраиваются под узкий экран. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь тактов —
одна команда
Над магазином работала команда студии: разбор, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Новый сайт включали на работающем магазине — заказы принимались, а каталог, цены и адреса страниц остались прежними.
- Такт 1РазборСобрали пожелания магазина и примеры сайтов, которые ему нравятся, прошли путь покупателя на компьютере и телефоне, разобрали каталог поставщика и тексты страниц.
- Такт 2КонцепцияМагазин как концертный зал: тёмно-зелёный лак, слоновая кость и латунь, спокойная анимация и продающая логика маркетплейса.
- Такт 3Дизайн-системаЦвета, шрифты Cormorant Garamond и Manrope, кнопки, карточки, отступы и скругления — один набор для всех страниц.
- Такт 4Шапка и менюОдна шапка для компьютера и телефона, меню каталога с иллюстрациями разделов, мобильное меню и нижняя панель.
- Такт 5ГлавнаяПервый экран с инструментами в волнах, разделы, ленты товаров, цифры магазина, сервис, бренды и новости.
- Такт 6Каталог и товарРазделы, бренды, карточка товара в три колонки, ленты похожих и просмотренных товаров, корзина и оформление.
- Такт 7СтраницыДоставка, «О компании», контакты с картой, новости и страница 404 с пианино; тексты страниц оформлены без потери смысла.
- Такт 8Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям владельца магазина.
Довели на приёмке
- Первый экран стал спокойнее: волны, блики и ноты приглушены, инструменты сменяются плавно
- Вместо прежнего «салюта» инструментов — по одному в волнах, не больше двух сразу
- Окно «Купить в 1 клик» открывается поверх затемнения, а не под ним
- Убран нижний блок «Остались вопросы?» — он повторял призыв в подвале
- Подпись «Интернет-магазин музыкальных инструментов» — рядом с логотипом
- Ленты товаров на странице товара листаются и после подгрузки
Работает как раньше
- Каталог поставщика
- Цены и остатки
- Корзина и оплата
- Адреса страниц
- Тексты страниц
- Видео в описаниях
Итог
Магазин инструментов,
который звучит
Главная, шапка и подвал, меню каталога, разделы, бренды, карточка товара, корзина и оформление, доставка, «О компании», контакты, новости, окна и страница 404 — в одном стиле и с одной логикой покупки. Сайт спокойный и дорогой, как концертный зал, и удобный, как маркетплейс.