ГРАНЬ.
Уход начинается с деталей.
Мой вклад
Концепция, структура, визуальный дизайн, тексты и разработка с помощью Codex. Адаптация, взаимодействия, проверка и публикация.
Формат
Авторский концепт сайта
Главная / Подбор ухода — экран опубликованной версии
Контекст
Грань — самостоятельный концепт сайта детейлинг-студии. Страница должна передать внимание к автомобилю и помочь посетителю понять, какое направление ухода соответствует его задаче.
Задача
Передать характер студии и выстроить путь от задачи владельца автомобиля до подготовленного обращения.
Границы проекта
Действующей студии и коммерческого заказчика в проекте нет. Автомобильные изображения созданы ИИ. Сравнение иллюстрирует идею, а форма готовит текст без отправки и записи. Показатели продаж и конверсии не заявляются.
Решения в деталях
Реальные экраны публичной версии. Каждый можно открыть крупнее.
Автомобиль задаёт характер
Первый экран должен восприниматься как автомобильный проект и сохранять понятный переход к уходу.
Крупная фотография, тёмный фон, живая типографика и золотистые акценты образуют композицию. На телефоне фотография располагается под текстом, а меню раскрывает разделы страницы.
От задачи к направлению ухода
Посетитель может знать, что хочет изменить, но не знать название подходящей услуги.
Три понятные задачи переключают направление, фотографию, состав работ и выбор в форме. Пояснения помогают оценить применимость и ограничения. Плавная смена изображений отвечает на действие пользователя; стрелки клавиатуры поддерживают тот же выбор.
Путь по интерфейсу
Сценарий, проверенный в опубликованном демо.
Выбрать задачу
«Освежить салон» раскрывает уход за салоном и подставляет направление в форму.
Понять состав ухода
Посетитель видит этапы, ограничения и факторы стоимости; сравнение до/после показывает иллюстрацию эффекта.
Подготовить обращение
Имя, автомобиль и пожелания собираются в текст для копирования. Форма не отправляет сообщение и не оформляет запись.
Что получилось
Опубликованный адаптивный концепт с работающим подбором услуг, сравнением, FAQ и подготовкой обращения. Код открыт на GitHub, публикация связана с Vercel.
- Структура, дизайн и тексты страницы
- Десктопная и мобильная композиции
- Подбор ухода, сравнение и анимации взаимодействий
- Публичный сайт и открытый репозиторий
Авторский концепт, не сайт действующей студии. Изображения созданы ИИ. Форма только готовит текст: данные не отправляются, запись и расчёт не выполняются.
Попробовать проект