Дизайн, код и AI в одних руках - проект под ключ
- Город
- Москва
- Опыт работы
- 6 лет
- На сайте с
- 2026 года
- Юридический статус
- Самозанятый
У верфи «Арт-Марин» есть производство винтажных катеров под ключ и страница ВКонтакте на 767 подписчиков. Сайта нет. Всё, что может узнать покупатель, лежит в ленте постов: цены двумя товарными карточками, прайс дополнительных опций — картинкой, фотографии готовых лодок вперемешку с репостами.
Проблема не в отсутствии страницы, а в том, что катер за полтора миллиона так не продаётся. Решение о такой покупке принимают не по описанию: человеку нужно увидеть свою лодку — своего цвета, со своей отделкой, со своим именем на корме — и понять, во что это обойдётся, до первого звонка.
Отдельно терялся самый сильный аргумент верфи. Судно до 200 кг с мотором до 8 кВт не подлежит регистрации в ГИМС, и права судоводителя на него не нужны. У покупателя это снимает два главных страха сразу, но во ВКонтакте это было подписью под одной из фотографий.
Задача: собрать сайт, который делает три вещи — снимает страх (регистрация и права не нужны), даёт потрогать продукт (конфигуратор и имя на борту) и говорит голосом самой верфи, а не голосом агентства.
Отдельное условие было техническим: страницу должно быть можно отправить в мессенджере и открыть с флешки. Значит — один файл, без внешних запросов, и работающий даже там, где скрипты отключены.
Две опоры вместо списка преимуществ. Первая — имя на борту. У всех построенных лодок верфи есть имена: Rosa, Privé, Joker, Ellisabeth. Имя выводится вручную и уходит под лак вместе с корпусом — снять его можно только вместе с палубой. На сайте имя набирается в поле и сразу встаёт на кормовую площадку в той же рукописной гарнитуре, что и на настоящих лодках. Вторая — конфигуратор. Пять цветов корпуса — это не квадратики рядом со списком, а пять настоящих фотографий лодок верфи: белая, алая, оливковая, бирюзовая, графитовая. Выбор меняет кадр целиком. Восемнадцать позиций прайса разложены по шести группам, каждая отметка падает в смету строкой с ценой, итог пересчитывается сразу.
Цифры вперёд текста. Четыре показателя — 0 регистрация, 0 права, 18 опций, 100% электро — вынесены отдельной полосой сразу под первым экраном, до всякого рассказа о верфи.
Устройство лодки объяснено в кадре. Вид сверху с шестью выносками и линиями к точкам: электромотор, кормовая площадка с именем, кресла с прострочкой, стрелочные приборы, палуба из реек, хромированная оковка носа. На узком экране выноски перестраиваются в нумерованный список.
Знак верфи не перерисован. Монограмма и словесный знак взяты из их же материалов и обведены по контуру в вектор — совпадение с оригиналом 0,96 по площади. Ни ручной перерисовки, ни растрового выреза из фотографии.
Тексты верфи оставлены дословно. «Вы, ваша вторая половинка и маленький капитан», «больше мест — больше сценариев» — подняты в цитаты. Их писал тот, кто эти лодки строит.
Режим без скриптов. Переключение цвета корпуса собрано на пяти radio и пятнадцати правилах :checked — конфигуратор работает во встроенном просмотрщике мессенджера, где JS не выполняется. Смета в этом режиме заменяется прайс-блоком с кнопкой звонка, меню — обычные якорные ссылки.
Один автономный файл. 3,4 МБ: тринадцать фотографий и три гарнитуры вшиты внутрь, ноль обращений наружу. 51 строка JS на весь сайт — имя на борту, пересчёт сметы и появление секций. Адаптив доведён до 412 px.
Одностраничный сайт на девять секций, собранный в один автономный HTML-файл. Живая версия: art-marine.netlify.app
Что получилось по цифрам: 18 позиций прайса в конфигураторе, 13 фотографий и 3 гарнитуры внутри файла, 8 векторных знаков, 51 строка JS, 15 CSS-правил на :checked, ноль внешних запросов, нижняя граница адаптива — 412 px.
Честно о статусе: это демо-макет, сделанный по моей инициативе как предложение верфи, а не сданный заказ. Внедрения нет, поэтому цифр по конверсии, заявкам и выручке здесь не будет и быть не может — любые такие цифры в подобном кейсе были бы выдуманы.
Что кейс показывает проверяемо: как я разбираю продукт до аргументов, как превращаю прайс в работающий инструмент вместо картинки, и что дизайн и продакшн-код здесь сделаны одним человеком. Тот же подход переносится на любой каталог с комплектациями — мебель, автомобили, оборудование, туры.
