Портфолио

Услуги

О нас

Блог

Контакты

Кейс

Магазин красок Imagine Colors: цвет как отдельный продукт

Интернет-магазин премиальных интерьерных и фасадных красок. Восемь продуктов, три объёма у каждого — и 1320 оттенков, где каждый цвет живёт отдельной страницей со своим адресом, HEX и RGB.

Imagine Colors, премиальные интерьерные и фасадные краскиДизайн и арт-дирекция · Фронтенд · Интеграция с WooCommerce · Анимация по скроллу2026

Задача

Краска — товар, который выбирают не по названию, а по цвету. Обычный магазин с сеткой карточек эту задачу не решает: человек ищет не «Low Lustre 118», а конкретный оттенок для своей стены.

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

Второе требование — премиальность на уровне ощущения. Бренд верхнего ценового сегмента не может выглядеть как типовая витрина на конструкторе.

Смотреть вживую

imagine-colors.ru

↗

1320

оттенков, у каждого свой адрес, HEX и RGB

объёма в карточке: цена и артикул меняются на лету

ролика в первом экране — интро и бесконечный луп

конструкторов: тема написана под проект

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

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

Роликов на самом деле два. Первый играет один раз и рассказывает историю с появлением хамелеонов, затем он растворяется, и под ним остаётся короткий луп с той же сценой. Так первый экран не превращается в назойливую петлю на пять секунд.

Второй ролик — короткий луп

1320 цветов, и у каждого своя страница

Веер оттенков перенесён в сайт целиком: цвета сгруппированы по семействам, ищутся по названию, коду IC и по HEX. Это не картинка палитры, а раздел, по которому можно ходить.

У каждого оттенка отдельный адрес и своя страница: крупная заливка, точные HEX и RGB, номер страницы в бумажном веере, соседние тона и кнопки «заказать образец» и «заказать продукт». Цвет можно найти в поиске, отправить ссылкой дизайнеру и положить в избранное — отдельно от товаров.

Цифровой веер оттенков Imagine Colors с поиском по названию и HEX

Поиск по названию, коду IC или HEX

Страница цвета вместо строчки в каталоге

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

Рядом честная оговорка о том, что монитор передаёт цвет приблизительно, — для премиальной краски это не мелочь, а способ снять будущий спор о партии.

Страница оттенка IC 0042 «Розовый Антуанетты» с HEX и RGB

Карточка товара: объём меняет и цену, и артикул

Краска продаётся в трёх объёмах, и это не выпадающий список, а три карточки тары. Переключение меняет цену и артикул сразу, без перезагрузки — от 850 ₽ за пробник до 24 650 ₽ за галлон.

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

Три объёма: 3,78 л, 0,946 л и 0,35 л

Подбор оттенка не выходя из карточки

Описание, характеристики и документы

Избранное отдельно для товаров и для цветов

Карточка краски Low Lustre 118: галерея, выбор объёма и подбор цвета

Плитки съезжаются из диагонали

Блок преимуществ до прокрутки разложен диагональной лесенкой далеко вправо. Когда он попадает в кадр, восемь плиток съезжаются в ровную шахматку — фотографии интерьеров чередуются с пастельными карточками.

Прокрутку при этом никто не перехватывает: ни закрепления экрана, ни привязки анимации к колесу. Скроллишь вверх — плитки так же аккуратно разъезжаются обратно.

Блок преимуществ Imagine Colors: шахматка из фотографий и пастельных карточек

Оформление заказа переписано под товар

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

Оплатить можно онлайн или при получении. Справа всё время видно, что именно и на какую сумму заказано.

Оформление заказа Imagine Colors: способ получения, адрес и оплата на одном экране

На телефоне — свой ролик, не сжатый десктопный

Первый экран на телефоне перестроен: заголовок сверху, под ним вертикальное видео, снятое отдельно под этот формат. Горизонтальный кадр, ужатый до узкого экрана, показывал бы банки размером с ноготь.

Меню разворачивается на весь экран крупными пунктами, карточка товара складывается в одну колонку — галерея, объёмы, подбор цвета, кнопка.

Мобильный первый экран Imagine Colors с вертикальным роликом

Полноэкранное мобильное меню Imagine Colors

Что получилось

Магазин, в котором цвет продаётся наравне с краской: его ищут, разглядывают, откладывают в избранное и заказывают образцом, ещё не выбрав саму банку.

Товарная часть работает на стандартном движке магазина — склад, варианты, заказы, промокоды. Своё написано там, где типовое решение не подходит: система оттенков, подбор цвета внутри карточки и оформление заказа в один экран.

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

1320

страниц оттенков

товаров, каждый в трёх объёмах

точек продаж на карте контактов

страниц вместе с каталогом и заказом

Стек

WordPress

WooCommerce

GSAP ScrollTrigger

PHP

nginx + PageSpeed

вопросы

Спрашивают чаще всего

Зачем цвету отдельная страница? Их же 1320.

Потому что цвет ищут отдельно от краски. Человек приходит с запросом «розовый как у Антуанетты», а не «Low Lustre 118». Отдельный адрес у каждого оттенка означает, что его находит поиск, им можно поделиться ссылкой с дизайнером и заказать выкрас, ещё не выбрав саму банку. Страницы собираются из одного шаблона, поэтому их количество на трудоёмкость почти не влияет.

Почему WooCommerce, а не своя система?

У магазина обычный товарный контур: восемь позиций, три объёма у каждой, склад, заказы, промокоды. Писать это с нуля — тратить бюджет на то, что давно работает. Своё здесь другое: подбор цвета, страницы оттенков и оформление заказа — их мы сделали под проект поверх стандартного магазина.

Первый экран с видео — это не тяжело?

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

Сколько заняла разработка?

Такой магазин — это дизайн, вёрстка, каталог с вариантами товара, система цветов и переписанное оформление заказа. Сроки и стоимость зависят от объёма каталога и от того, есть ли готовый контент: напишите нам, посчитаем по вашей задаче.

другие работы