Сайт-каталог для фабрики вхідних дверей — 700+ моделей

Подробности проекта

Кейс: создание сайта-каталога для компании по продаже дверей

Клиент: ALLUM, фабрика входных и межкомнатных дверей, Киев.
Сфера: собственное производство и продажа дверей, шоу-рум и склад.
Что делали: сайт-каталог под ключ — бриф, структура, дизайн, вёрстка, программирование.
Сайт: dveri.1001-lead.agency
Реклама: не запускалась — в этом проекте наша работа заканчивается на сайте.

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

Этап 1: Бриф — что выяснить перед созданием сайта по дверям

Начинаем не с макета, а с разговора. Задача брифа — вытащить то, что владелец знает наизусть и потому не считает важным. Обычно именно это и продаёт.

Разбираем по частям:

• Продукт. Из чего сделана дверь, какая сталь, какой утеплитель, какие замки, чем модель за 11 399 ₴ отличается от модели за 21 900 ₴.
• Производство. Своё оно или перепродажа. У ALLUM своё — это стало первым пунктом на первом экране, потому что снимает главный страх «а вдруг перекупщики».
• Возражения. Что спрашивают чаще всего: сроки, размеры, установка, что делать со старой дверью.
• Аудитория. Кто покупает: квартира или частный дом, новостройка или замена старой двери. Отсюда деление каталога на «в квартиру» и «на улицу».
• Конкуренты. Что показывают они и чего у них нет.

Из брифа сразу вышли четыре тезиса, которые стоят на первом экране: собственное производство, рассрочка 0% до 6 месяцев, 700+ моделей в наличии с доставкой за 30 минут, изготовление нестандартных размеров за 7 дней. Это не придуманные преимущества — это ответы на реальные вопросы покупателей.

Этап 2: Сбор материалов и фото для каталога дверей

Каталог на 700+ моделей невозможно собрать «по ходу дела». До вёрстки нужен весь массив данных, иначе на середине проекта выясняется, что у половины моделей нет фото или веса полотна.

• Фотографии. Каждая модель — в нескольких ракурсах и в интерьере, а не только «дверь на белом фоне». Человек примеряет дверь к своему подъезду и коридору.
• Характеристики. Размер, толщина полотна, сталь, замки, утеплитель, вес, класс взломостойкости, огнестойкость.
• Цены. Основная, старая (для показа скидки) и платёж по рассрочке.
• Цвета. Для каждой модели — доступная палитра плюс вариант «любой цвет».
• Допуслуги. Утепление короба, замена листа, замена плёнки, монтаж, ночная задвижка — с ценами.

Материалы приводим к одному виду: одинаковые пропорции фото, единый порядок характеристик, один формат записи цены. Без этого каталог выглядит как склейка из разных источников, и доверия к нему нет.

Этап 3: Прототип сайта-каталога дверей

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

Что закладывали:

• Порядок экранов. Оффер → каталог → технологии → визуализация → замер → отзывы → шоу-рум → контакты. Сначала то, за чем пришли, потом аргументы.
• Структура каталога. Два типа дверей и четыре ценовых сегмента: эконом, стандарт, премиум, люкс. Человек с бюджетом 10 000 ₴ и человек с бюджетом 25 000 ₴ идут разными путями.
• Карточка модели. Что видно сразу, что раскрывается по клику, где стоят кнопки.
• Точки захвата. Где предлагаем оставить контакт и что даём взамен — на каждом экране свой повод.

Прототип согласовываем до дизайна. Это единственный этап, где правки почти ничего не стоят.

Этап 4: Дизайн сайта для фабрики дверей

Дверь — товар про безопасность и надёжность. Отсюда тёмная гамма, кирпич и металл в фоне, красный акцент на действиях. Дизайн здесь не украшение, а способ сказать «это серьёзно» до того, как человек прочитает первое слово.

• Товар крупно. Фото двери занимает большую часть карточки. Всё остальное — подпись к нему.
• Цена читается первой. Новая цена крупная и красная, старая — зачёркнута рядом.
• Метки-ярлыки. «Топ продаж», «Акция», «Рассрочка 0%» — они помогают выбрать тому, кто не разбирается в дверях.
• Одна кнопка на карточке. «Подробнее» — не заставляем решать на этапе просмотра.

Этап 5: Разработка каталога дверей с фильтром

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

• Модели как записи в админке. Каждая дверь — карточка с полями: цена, старая цена, платёж, размеры, замки, вес, цвета, галерея. Добавить модель — заполнить форму, а не звать разработчика.
• Фильтр по параметрам. Тип двери, диапазон цены ползунком, ценовая категория, стиль. Подбор идёт без перезагрузки страницы.
• Адаптив. Отдельная проработка мобильной вёрстки: с телефона смотрят каталог лёжа на диване, и там карточка должна читаться так же, как на десктопе.
• Скорость. Сжатие изображений и отложенная загрузка — иначе каталог с сотнями фото открывается вечность.
• Служебные страницы. Доставка и монтаж, оплата и рассрочка, портфолио работ, новости, сотрудничество для дилеров, контакты с картой.

Маркетинговые инструменты конверсии на сайте по продаже дверей

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

• PDF-каталог как лид-магнит. «Закрытая распродажа со скидками до 70%» — файл в обмен на телефон. Человек ещё не готов покупать, но уже готов посмотреть цены. Каталог уходит в Viber или Telegram, и переписка начинается сама.
• Две кнопки в карточке. «Заказать дверь» — для готовых. «Вызвать замерщика» — для тех, кто сомневается: бесплатный выезд ни к чему не обязывает, а менеджер уже в квартире клиента.
• Бесплатная 3D-визуализация. Дверь в интерьере покупателя. Повод оставить контакт для того, кто выбирает между двумя моделями.
• Рассрочка отдельным блоком. Платёж в месяц показан прямо в карточке рядом с ценой. Дверь за 11 399 ₴ и «1 899 ₴ в месяц» — разные решения по сложности.
• Допуслуги в карточке. Утепление, замена плёнки, монтаж, задвижка — средний чек растёт до того, как заявка ушла менеджеру.
• Мессенджеры вместо формы. Viber и Telegram на видных местах: часть людей не звонит принципиально.
• Шоу-рум и отзывы. Адрес, фотографии зала и отзывы покупателей — для тех, кому нужно потрогать дверь руками.

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

Результат: сайт-каталог для компании по продаже дверей

Фабрика ALLUM получила сайт-каталог, который работает как первый менеджер: показывает 700+ моделей, фильтрует их по деньгам и стилю, называет цену и платёж по рассрочке и забирает контакт девятью разными способами.

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

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

Как мы это делали — по шагам

Механика, по которой собран этот проект, разобрана отдельно:

• Сайт-каталог для продажи дверей: что в нём должно быть — бриф, сбор материалов, фильтр, карточка модели и девять форм захвата.