Портфолио · мастерская стеклопластика · Сочи

Топ-Форма — изделие собирают прямо на сайте

Мастерская делает изделия из стеклопластика на заказ: катера, купели, вазоны, стойки ресепшн, декорации. Я сделал сайт, где клиент не читает про изделие, а собирает его: крутит 3D-модель, примеряет цвет и размер. Всё, что он выбрал, уходит в заявку — мастеру не нужно выспрашивать заново.

16 посадочных страниц14 фирменных блоков — ни один не повторяется54 из 54 проверок на телефонах
Обсудить свой проект
top-forma.ru
3D-конфигуратор на главной Топ-Формы: вазон «Волна» в цвете морской волны, страница перекрасилась под выбранный гелькоут
// задача

Как продать то,
чего ещё нет

Каждое изделие делают под заказчика. Готового товара на складе нет — его нельзя сфотографировать и поставить в каталог с ценой. Клиенту нужно представить своё изделие до того, как он напишет.

как обычно
  • Галерея чужих работ и «цена по запросу» — своё изделие приходится воображать
  • Одна страница «Услуги» на всё: катера, купели, скульптуры вперемешку
  • Форма «Опишите задачу» — потом мастер полдня выясняет форму, цвет и размер
  • Обещание «сделаем любое» без единого доказательства
у Топ-Формы
  • Изделие собирают в 3D или на схеме — и сразу видят результат
  • 16 посадочных страниц: под каждое направление своя страница для поиска
  • Выбор клиента сам попадает в заявку: форма, цвет, размер, сценарий
  • Сложное объяснено картинкой: разрез корпуса, план стойки сверху, человек рядом с вазоном
// как выбирали

Три разных сайта
до первой строки кода

Я собрал три макета в радикально разных стилях: «Тёмная мастерская», «Чертёж» и «Шоурум» с 3D. Выбрали шоурум. Потом сделал одну посадочную страницу и только после одобрения растиражировал шаблон на остальные.

Три макета сайта Топ-Формы: тёмная мастерская, чертёж на миллиметровке и шоурум с 3D-моделью
24.09 — три макета28.09 — выбран «Шоурум»29.09 — пилот посадочной, первую версию переделал целиком06.10 — клиент утвердил главную в своей редакции08.10 — 54 из 54 на телефонах
// что сделал

Не рассказать,
а дать примерить

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

01

3D-конфигуратор на главной

Пять форм — куб, конус, чаша, волна, шар, — пять цветов гелькоута, глянец или мат. Модель можно покрутить пальцем или мышью, а вся страница перекрашивается под выбранный цвет. Кнопка «Хочу такое» переносит собранное изделие в заявку.

3D-конфигуратор Топ-Формы: чаша в цвете «Кирпич», панель выбора формы и цвета гелькоута
02

Примерочная на посадочной

На странице стоек ресепшн выбирают форму и длину — схема сверху перестраивается и считает, сколько администраторов поместится. У вазонов рядом стоит человек ростом 175 см, у катеров примеряют цвет борта и полосы. Так устроены 8 посадочных, и везде выбор уходит в заявку.

Блок «Форма стойки — вид сверху»: полукруглая стойка 3,6 м, два рабочих места, выбор добавляется в заявку
03

Сложное — одной картинкой

Почему у ремонта лодки нет цены «от N рублей»? Две пробоины снаружи выглядят одинаково, а внутри одна над стрингером. Переключатель «Снаружи / Внутри» показывает разрез корпуса — и человек сам понимает, зачем мастеру фото повреждения.

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

Телефон — не уменьшенная копия

На телефоне главная начинается с плиток 8 направлений, а на посадочных кнопка «Прислать проект» сразу открывает выбор фото или чертежа. Каждую страницу проверил на трёх экранах — 320, 360 и 390 пикселей: ничего не вылезает, текст не мельче 12 пикселей, кнопки не меньше 24.

Мобильная версия страницы «Стойки ресепшн»: заголовок, кнопка «Прислать проект» и мессенджеры

Фото на сайте — иллюстрации до съёмки реальных работ

// результат

3D на сайте
без потери скорости

Трёхмерная модель обычно тормозит сайт. Здесь 3D-движок вынесен в отдельный модуль: он грузится только на главной и не задерживает отрисовку текста. Посадочные страницы его не качают вообще.

81из 100 — скорость главной с 3D на телефоне
85из 100 — скорость главной на компьютере
100из 100 — посадочные на телефоне и компьютере
1,5 сдо главного блока на телефоне — даже с 3D

Сайт ещё не запущен, поэтому трафика и заявок пока нет. Покажу их здесь после запуска — не раньше.

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

// зачем это вам

Что кейс
доказывает

Если вы делаете на заказ, сайт должен помогать клиенту представить результат.

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

Что под капотом

Подробности для тех, кто хочет проверить уровень. Остальным можно пропустить.

Astro — статическая сборка, на сервере только готовые HTML-файлы. Переходы между страницами — нативные View Transitions браузера, без JS-роутера. 3D — three.js, отдельный модуль около 130 КБ (gzip), подключается динамическим импортом только на главной. Интерактивные блоки посадочных — по 1–3 КБ скрипта каждый.
Модели не загружаются файлами — они строятся в коде из профиля вращения, поэтому весят ноль байт. Форма меняется плавным перетеканием, шар собирается по дуге — иначе у полюсов внутренняя стенка пробивала бы внешнюю. Для полупрозрачного гелькоута в «Истории изготовления» есть отдельный проход глубины: без него сквозь стенку просвечивали дно и швы. Плотность пикселей ограничена двумя — на телефонах с экраном 3x модель не рендерится впустую в полтора раза крупнее.
Один шаблон и по файлу на страницу: заголовок, описание, панели, шаги, вопросы и тип фирменного блока. У каждой страницы разметка Service, FAQPage и BreadcrumbList. Всё, что ещё не подтвердил клиент, помечено в файле и на сайт не выводится — из этих пометок автоматически собирается список вопросов к мастерской.
На каждый фирменный блок — свой автотест в Playwright: формы конфигуратора, примерка цвета, план стойки (места не налезают друг на друга), разрез корпуса. Отдельный прогон по всем 18 страницам на трёх телефонах ловит то, что глазом не видно: элемент шире экрана, из-за которого браузер уменьшает всю страницу, текст мельче 12 пикселей, кнопки меньше 24.

Нужен такой же
уровень исполнения?

Опишите проект — покажу, какой из кейсов ближе всего к вашей нише, и вернусь со структурой, сроком и сметой.

01Рассказываете задачуТЗ, пример сайта или пара слов о проекте и цели.
02Аудит и сметаСтруктура, стек, сроки и цена — фиксируем план.
03Разработка и запускСайт сразу под рост в поиске, с аналитикой и поддержкой.
Отвечу в течение рабочего дня · без спама