- Created a sustainability page with detailed eco-friendly practices and certifications. - Added a contacts page featuring multiple communication channels and company details. - Introduced a comprehensive technical requirements document covering Core Web Vitals and SEO best practices. - Developed a glossary of terms related to performance, SEO, technical development, and marketing.
101 lines
3.7 KiB
Markdown
101 lines
3.7 KiB
Markdown
---
|
||
tags:
|
||
- сайт
|
||
- страница
|
||
- конфигуратор
|
||
- ar
|
||
- визуализация
|
||
url: /configurator/
|
||
created: 2026-02-16
|
||
---
|
||
|
||
# 🎨 Конфигуратор фасада
|
||
|
||
> [!tip] Роль страницы
|
||
> Главный дифференциатор (конкуренты: Feldhaus Klinker, Ströher). Увеличивает время на сайте в 3-5 раз. Ключевой конверсионный инструмент.
|
||
|
||
## Мета-данные
|
||
|
||
| Поле | Значение |
|
||
|---|---|
|
||
| **Title** | `Конфигуратор фасада — Визуализируйте кирпич на вашем доме \| {Бренд}` |
|
||
| **Description** | `Онлайн-конфигуратор фасада: выберите кирпич, тип кладки и цвет затирки. Посмотрите, как будет выглядеть ваш дом. AR-режим на мобильном.` |
|
||
| **Schema** | `WebApplication` + `BreadcrumbList` |
|
||
|
||
---
|
||
|
||
## Блоки / Функциональность
|
||
|
||
### 1. Выбор шаблона / загрузка фото
|
||
|
||
- **10+ шаблонов домов:**
|
||
- Одноэтажный
|
||
- Двухэтажный
|
||
- Коттедж
|
||
- Таунхаус
|
||
- Коммерческое здание
|
||
- **ИЛИ** загрузка своего фото фасада
|
||
- AI-сегментация: автоматическое выделение зон стен
|
||
|
||
---
|
||
|
||
### 2. Панель продуктов
|
||
|
||
- Каталог текстур из [[02 — Каталог]] с превью
|
||
- Фильтр: цвет / формат / коллекция
|
||
- Drag & drop текстуры на зоны фасада
|
||
- Возможность разных текстур на разных зонах (цоколь отдельно)
|
||
|
||
---
|
||
|
||
### 3. Настройки кладки
|
||
|
||
| Параметр | Варианты |
|
||
|---|---|
|
||
| Тип кладки | Ложковая / Фламандская / Штабельная / Ёлочка |
|
||
| Цвет затирки | 10+ вариантов (визуальные swatches) |
|
||
| Ширина шва | 8 / 10 / 12 мм |
|
||
|
||
- Рендеринг в реальном времени (WebGL / WebGPU)
|
||
|
||
---
|
||
|
||
### 4. Панель финализации
|
||
|
||
- **Сохранить проект** (аккаунт или по ссылке)
|
||
- **Скачать рендер** (PDF / PNG)
|
||
- **Поделиться ссылкой** (unique URL)
|
||
- ==**«Заказать образцы выбранных продуктов»**== (primary CTA)
|
||
- `Рассчитать стоимость` → [[10 — Калькулятор расхода]]
|
||
- `Найти дилера` → [[05 — Представительства]]
|
||
|
||
---
|
||
|
||
### 5. AR-режим (mobile only)
|
||
|
||
- «Наведите камеру на стену»
|
||
- WebXR overlay текстуры на реальную поверхность
|
||
- Progressive enhancement: работает как 2D на слабых устройствах
|
||
|
||
> [!note] Технология 2026
|
||
> WebXR API + 8th Wall / AR.js. Без установки приложения.
|
||
|
||
---
|
||
|
||
## Технические требования
|
||
|
||
- [ ] WebGL / WebGPU для рендеринга
|
||
- [ ] Lazy load конфигуратора (не блокировать LCP первого экрана)
|
||
- [ ] Progressive enhancement: 2D fallback на low-end
|
||
- [ ] Mobile-first (большинство пользователей — смартфоны)
|
||
- [ ] PWA-возможности для офлайн-работы (выставки, стройки)
|
||
|
||
---
|
||
|
||
## Связанные страницы
|
||
|
||
- [[02 — Каталог]]
|
||
- [[03 — Карточка товара]]
|
||
- [[10 — Калькулятор расхода]]
|
||
- [[05 — Представительства]]
|