INDEPENDENT WEB DEVELOPERCASE 02PRODUCT LANDING

PROJECT 02 / PRODUCT LANDING / REDESIGN CONCEPT

DKR
Series X.

Как превратить паспорт оборудования в маршрут решения: от цикла мойки по контуру до проверки площадки и расчёта проекта.

SHOWCASE-КОНЦЕПЦИЯ · МАКЕТ, НЕ КЛИЕНТСКИЙ ЗАПУСК
Смотреть живой прототип ↗Концепт · откроется в новой вкладке
Первый экран концепта DKR Series X: заголовок «Мойка, которая видит контур» и фотография портала
ЗАДАЧА

Превратить лендинг оборудования в маршрут решения, а не каталог характеристик.

РЕШЕНИЕ

Пять вопросов покупателя, пять типов доказательств, один сценарий обращения.

СДЕЛАНО

Структура, арт-дирекшн, высокодетальный HTML-прототип, адаптив и состояния калькулятора.

01 / ЗАДАЧА

Продаётся не портал. Продаётся проект.

DKR Series X — портальная роботизированная мойка: портал движется вдоль автомобиля, считывает геометрию кузова и объединяет мойку, обработку колёс, составы и сушку в один цикл. Только покупает её не человек, выбирающий мойку по каталогу. Это предприниматель или инвестор, который решает, встанет ли оборудование на его площадке и сойдётся ли экономика его проекта.

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

ФОРМУЛИРОВКА ЗАДАЧИ

После страницы посетитель должен уметь проверить свою площадку и запросить расчёт — а не просто «узнать о преимуществах оборудования».

Эта формулировка стала критерием. Оценивалась не убедительность первого экрана, а полнота ответов и связность шагов: после каждого блока у посетителя должен появляться следующий вопрос и понятный способ его закрыть.

02 / АРХИТЕКТУРА

Структура выведена из вопросов покупателя.

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

ВОПРОС 01

Что это за оборудование?

ДОКАЗАТЕЛЬСТВО

Четыре операции как один цикл по контуру

СЕКЦИЯ → ДЕЙСТВИЕ

Рабочий цикл«Увидеть цикл»

ВОПРОС 02

Что оно умеет и как устроено?

ДОКАЗАТЕЛЬСТВО

Устройство, узлы и паспортные параметры

СЕКЦИЯ → ДЕЙСТВИЕ

УстройствоСверить с задачей

ВОПРОС 03

Встанет ли на моей площадке?

ДОКАЗАТЕЛЬСТВО

Габариты, коммуникации и схема бокса

СЕКЦИЯ → ДЕЙСТВИЕ

Готовность площадки«Проверить мой объект»

ВОПРОС 04

Сойдётся ли экономика?

ДОКАЗАТЕЛЬСТВО

Расчёт на своих данных, с ограничениями

СЕКЦИЯ → ДЕЙСТВИЕ

Экономическая модель«Обсудить расчёт»

ВОПРОС 05

Кто уже это сделал и что будет после?

ДОКАЗАТЕЛЬСТВО

Объекты, маршрут поставки и сервис

СЕКЦИЯ → ДЕЙСТВИЕ

Объекты и поставкаЗапрос проекта

Порядок секций — не «сначала преимущества, потом форма». Это рост обязательств: понять продукт, проверить применимость, оценить экономику, обсудить проект. Основные CTA ведут в один сценарий; второстепенные действия не конкурируют с ним в каждой секции.

Секция рабочего цикла DKR Series X: четыре операции как одна траектория
Операции показаны как один цикл, а не как каталог функций. Слева — мойка по геометрии кузова, справа — колёса и составы, ниже — контурная сушка. Изображение — макет концепта.

03 / ВИЗУАЛЬНАЯ СИСТЕМА

Синяя линия — это движение портала.

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

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

PAPER#F2F0E9
GRAPHITE#15191B
PATH#1768E8
NIGHT#11191D
SIGNAL#F4D64E

DISPLAY Barlow Condensed 700–900 /TEXT Manrope 400–700 /DATA DM Mono 400–500

Тёмная инженерная секция: устройство портала и паспортные параметры
Тёмный разворот отделяет паспорт оборудования от маркетингового рассказа. Рядом с каждой цифрой — пояснение, что именно она означает.

04 / ИНЖЕНЕРНАЯ ЧЕСТНОСТЬ

Габарит портала — не габарит помещения.

В материалах об оборудовании легко смешать близкие по смыслу величины. На лендинге это превращается в недоверие: покупатель замечает, что цифры не сходятся, и делает вывод не о конкретной ошибке, а о качестве всего предложения.

Габарит портала9 × 4,2 × 3,25 м
≠
Габарит помещения9,5 × 4,5 × 4,2 м
Мощность двигателя18,5 кВт
≠
Присоединяемая мощность380 В / 30 кВт
Заявленная производительностьдо 15 авто/ч
≠
Загрузка объектапараметр бизнес-модели
Давление контурной мойкирабочий режим
≠
Давление насосапараметр оборудования

Эти различия перенесены в подписи и сноски: у каждого параметра есть свой контекст. Схема бокса обозначена как концептуальная и не заменяет монтажный чертёж; итоговые требования подтверждаются паспортом конкретной конфигурации. Для покупателя это не педантизм: ошибка в одном из параметров превращается в смету на переделку коммуникаций или в недостижимую окупаемость.

Секция готовности площадки: схема бокса с порталом и автомобилем, размеры и список условий
Схема отвечает на пространственный вопрос, список — на инженерный. Подпись «not to scale» и сноска о паспорте не дают схеме превратиться в обещание.

05 / ПОВЕДЕНИЕ

Результат появляется после данных, а не вместо них.

Экономический блок — не декоративный виджет с красивой цифрой. Это последовательность: поток, средний чек и рабочие дни дают выручку; расходы и налог — расчётный остаток; инвестиции и положительный остаток — простой срок окупаемости.

01ВЫРУЧКА

Поток × чек × рабочие дни. Появляется сразу — для неё достаточно трёх параметров.

02ОСТАТОК

Только после расходов и налоговой ставки. До этого — «недостаточно данных».

03ОКУПАЕМОСТЬ

Только после инвестиций и положительного остатка. Иначе срока не существует.

Логика появления результатов принципиальна. Пока не введены расходы, страница не показывает оптимистичный остаток. Пока не указаны инвестиции, срока окупаемости нет. Это защищает от главного соблазна таких калькуляторов — продать цифру, а не расчёт.

Ограничения модели обозначены прямо: это не финансовый прогноз; кредит, ремонт, сезонность, маркетинг и коммунальные платежи не учтены. Кнопка ведёт не к «заявке вообще», а к обсуждению расчёта, где предположения можно проверить.

Экономическая модель: параметры проекта и панель результата с недостающими данными
Выручка уже рассчитана, остаток и окупаемость — ещё нет. Пустые состояния объясняют, каких данных не хватает, вместо того чтобы подставлять значения по умолчанию.

06 / РЕАЛИЗАЦИЯ

Макет, который можно собрать.

Результат — не картинка в Figma, а высокодетальный HTML-прототип: реальная типографика, сетка, адаптив, состояния формы и калькулятора. Его можно открыть на телефоне, проверить в браузере и передать в разработку без «дорисуем по ходу».

01Wireframe spec

Порядок секций, карта решений, поведение калькулятора и формы.

02Art direction

Палитра, типографика, правила траектории, сетка и плотность.

03HTML-прототип

Адаптив от 390 до 1440, состояния, фокус, reduced-motion.

В реализации учтены семантические секции, читаемая иерархия, клавиатурный фокус и аккуратные пустые состояния калькулятора. CMS не добавлялась: для одной страницы это лишний слой — контент и правила живут в коде и не разъезжаются при правках.

Мобильная версия первого экрана DKR Series X
Мобильная версия: тот же маршрут и та же иерархия, другая композиция. Макет концепта.

07 / ГРАНИЦЫ

Что доказывает кейс — и чего он не доказывает.

Это концепт-редизайн по публичным материалам DKR Group, а не клиентский запуск. Конверсия, заявки и выручка не измерялись и не заявляются; изображения — макет, а не скриншоты работающего сайта.

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

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

ПРИНЦИП

Дизайн не должен изображать результат. Он должен делать следующий шаг обоснованным.

Основа кейса: публичные материалы DKR Group. Концепт не связан с производителем и не является его проектом.

← К проектам

ПОХОЖАЯ ЗАДАЧА?

Сайт, который объясняет
и ведёт к действию?

Разберу, что именно должна объяснить страница, соберу структуру и доведу её до рабочего интерфейса. Подходит для сложного продукта, услуги или локального бизнеса.

jefo.work@gmail.com · Обычно отвечаю в течение 1–2 рабочих дней