HTML, стили и скрипт в одном документе: без сборки, зависимостей и фреймворков. Переносится копированием файла.
Кейс / 02 · VERDA
Витрина, где мебель продаёт кадр
Лендинг мастерской дизайнерской мебели VERDA: герой-фото с точками товара и цены, выбор отделки с живым пересчётом, запись в шоурум — один HTML-файл, без фреймворков.
- СтекHTML / CSS / JS
- ТипЛендинг-презентация
Задача
Мастерской премиум-мебели нужна витрина, где продаёт фотография, а не абзацы текста: клиент из соцсетей должен сразу увидеть вещь, её материал и цену — и одним движением записаться в шоурум.
Что сделал
Лендинг-презентация: герой-фото зала с точками-метками товара (название, материал, цена прямо на фото), коллекция-bento, выбор отделки с пересчётом стоимости на лету, форма на каталог и приглашение в шоурум.
Что получилось
Весь сайт — один HTML-файл: ноль фреймворков и сборщиков, стеклянные плашки на чистом CSS, точки работают на hover и фокусе, форма забирает контакт на каталог и шоурум.
01 / Контекст и задача
Мебель продаёт кадр
VERDA — мастерская дизайнерской мебели: собственный цех, массив дерева, ручная сборка. Аудитория приходит из соцсетей и сарафана и решает за первые секунды: «моё — не моё». Классический каталог с сеткой карточек эту аудиторию не убеждает — ей нужна подача, как в глянцевом интерьерном журнале.
Задача — лендинг-презентация, где главный экран показывает мебель в живом интерьере, товар опознаваем и оценён прямо на фото, а путь до шоурума занимает одно движение.
02 / Интерфейс: почему так
UIФото как главный интерфейс
- D1
Точки-метки на живом фото
На герое — реальный интерьер, а точки с наведением показывают вещь, материал и цену (кресло Musa, стол Rhea). Витрина отвечает на главный вопрос «что это и сколько» до первого скролла, как консультант в шоуруме.
- D2
Отделка пересчитывает цену
Свотчи дуба, ореха, ясеня и чёрного дуба меняют название и стоимость на лету: клиент примеряет материал к своему интерьеру, не набирая менеджера. Образцы обещано привезут домой — барьер решения снят.
- D3
Bento-коллекция
Четыре вещи собраны в сетку разного калибра: флагманское кресло занимает большой модуль, остальные — компактные. Важность вещи показана размером кадра, а не порядком в прайсе.
- D4
Стекло поверх фото — без библиотек
Плашки с blur и подсветкой собраны на чистом CSS (backdrop-filter): премиальная подача не стоила ни одного килобайта JavaScript.
- D5
Спокойная типографика
Manrope сверхлёгких начертаний и глубокий зелёный акцент: ни одного крика — премиум считывается из воздуха страницы, а не из бейджей «премиум».
03 / Технические решения
Что внутри
Hotspots живут на hover и focus-within: работают с клавиатуры и не ломаются на тач-экранах, где тап открывает метку.
Свотчи несут название и цену в data-атрибутах, один обработчик обновляет карточку. Новая порода — одна строка разметки.
Архитектура работы
Витрина
→
Выбор
→
Заявка
04 / Результат
Витрина в одном файле
Собран лендинг-презентация, которая работает как цифровой шоурум: товар виден и оценён на герое, отделка примеряется без звонка, форма забирает контакт на каталог и визит. Весь сайт — один файл без зависимостей, открывается мгновенно даже на слабом мобильном.
Что бы измеряли
- Клики по точкам-меткам: какая мебель собирает интерес на герое.
- Долю посетителей, сменивших отделку, — вовлечённость в материал.
- Конверсию визит → e-mail в форме каталога.
- Гипотеза для проверки: фото-герой с ценами даёт больше целевых заявок, чем классическая сетка товаров.