FutureBox — кейс Астратек

Сайт / интерактивный 3D

01 / Логика сайта

Продукт в центре.
Выбор — по делу.

Собрали многостраничный сайт вокруг трёх сценариев: выбрать модель, рассмотреть её в деталях и подобрать аренду.

Модельный ряд

Серийные модели и сравнение форматов.

Интерактивный 3D

Цвет, ракурс и механика козырька.

Аренда

Срок, оснащение и условия в одном сценарии.

Серийные модели / единая логика карточек

Классик / Про / Мастер

02 / Интерактивный 3D-обзор

Полный интерфейс 3D-обзора: модель, палитра, козырёк и масштабирование

Свободный обзор 360°Выбор цвета корпусаОткрытие козырька

Классик: закрытый козырёк — Закрытый козырёк

Классик: открытый козырёк — Открытый козырёк

Один продукт. Несколько состояний. Прямо в браузере.

03 / Аренда

Срок. Оснащение.
Понятный тариф.

Разложили предложение на последовательный выбор. Срок и сезон помогают сравнивать комплектации без длинной таблицы.

Выбор срока, сезона и комплектации аренды

1Выберите срок

2Уточните сезон

3Сравните оснащение

Стоимость и состав предложения остаются рядом с выбором.

04 / Проекты и компании

Реальные проекты.
Узнаваемые бренды.

Показываем фудтраки в работе: фотографии проектов, переключение историй и спокойная лента компаний.

Увеличение фотографий / Смена проектов / Лента логотипов

05 / Адаптивность и детали

Один язык.
Любой экран.

Та же иерархия на мобильном. Плавные переходы, раскрытия и отклики поддерживают действие и не спорят с контентом.

Мобильная версия: Модельный ряд — Модельный ряд

Единая навигация. Плавные переходы. Удобные формы.

06 / Управление через ВЕРС

Сайт живёт.
Команда управляет.

Визуальный редактор и AI-помощник работают с контекстом блока. Изменения можно проверить до публикации и найти в истории.

Визуальный редактор ВЕРС с выбранным блоком страницы

Контекст — рядом с действием.

Выбрать блок → поставить задачу.

Публикация — отдельное решение.

Черновик → предпросмотр → сайт.

07 / Визуальный язык

Меньше шума.
Больше продукта.

Графит, светлые поверхности и точечный оранжевый. Одна система для каталога, аренды, форм и 3D.

Аа Бб 0123

OnestИнтерфейсная типографика

Графит

#24282C

Поверхность

#F2F3F4

Вторичный текст

#7C8287

Акцент

#F45118

Мягкие границы. Сдержанный контраст. Воздух вокруг продукта.

08 / Роадмэп проекта

ЭТАП 02 — ВПЕРЕДИ

От обзора —
к своей конфигурации.

Развитие продукта — отдельным следующим этапом.

01 / ТЕКУЩИЙ ЭТАП

Сайт и 3D-обзор

Модельный ряд, аренда, проекты и интерактивный «Классик».

02 / ЗАПЛАНИРОВАНО

Полноценный конфигуратор
всех моделей

Модель, габариты, цвет и оснащение — в едином сценарии настройки.

FutureBox — многостраничный сайт и интерактивный 3D