К содержимому

разбор · концепт · автосервис

Сайт автосервисасрок и стоимость

Инженерный стиль и прозрачность: рентген автомобиля, табло постов, заказ-наряд, калькулятор ТО и запись с календарём. Многостраничный сайт с реалистичными фото.

задача

Что нужно было сделать

Независимому сервису премиальных автомобилей нужен сайт, который сразу отличает его от «гаражей»: показывает, что делают с машиной, сколько это стоит и почему этому можно верить. Главные действия: записаться, посчитать ТО, понять, как устроен ремонт.

Что вошло в работу

  • 5 страниц: главная, услуги и цены, мастерская, запись, политика (плюс страница 404)
  • Статичный сайт, написанный кодом (Next.js): без CMS и админки, прайс и тексты лежат в данных
  • 15 реалистичных фотографий: мастерская, детали, процесс, пространства, портрет инженера
  • Рентген автомобиля, табло постов, заказ-наряд, калькулятор ТО с классами, скидками и окном
  • Запись с календарём на 45 дней, слотами и подтверждением
  • Заставка-спидометр, плавная прокрутка, диагональная шторка, курсор-прицел
  • Адаптивная вёрстка 320–1920 px, тесты (57) и проверка статической сборки

как выглядит

Сайт автосервиса: экраны и схемы

56 материалов из собранного концепта: клик по картинке открывает её крупно. Это скриншоты живого демо, а не макеты.

Десктоп

Экраны и состояния интерактива на широком экране.

Заставка-спидометр: стрелка и счётчик идут от 0 до 100, затем шторка уходит вверх
Первый экран: «Сервис, где всё видно», кадр мастерской и плашка живого поста
Рентген автомобиля: схема сверху, точка «Двигатель и жидкости», цена и время
Рентген: точка «Тормоза» — что проверяем и сколько стоит отдельно
Рентген: точка «Шины и колёса», список всех точек под схемой
«Пять шагов»: заголовок и начало горизонтальной ленты
Лента на вертикальной прокрутке: приёмка и диагностика
Лента: согласование и ремонт
Лента: выдача и карточка-призыв записаться
Табло постов: шесть постов с этапами и прогрессом в реальном времени
Заказ-наряд: отчёт мастера с фото и ценой по каждой работе
Заказ-наряд: клиент добавил рекомендацию, итог пересчитался
Заказ-наряд: согласование отправлено мастеру (демонстрация)
Калькулятор ТО: класс «Бизнес», две работы, скидка за комплекс и ближайшее окно
Калькулятор: класс «Премиум» и четыре работы, скидка 12%
Четыре обещания: гарантия, осмотр, старые детали, цена без сюрпризов
Частые вопросы: раскрывающиеся ответы
Призыв записаться на фоне моторного отсека
Подвал: телефон, адрес, часы, лента «протектора» и огромное слово KAMBER
Курсор-прицел: рамка с уголками догоняет указатель и сжимается над кнопкой
Шапка при прокрутке вверх: плотная панель со статусом постов
Меню на весь экран: крупные ссылки, адрес и часы
Диагональная шторка при переходе между страницами
Страница услуг: «Цены без звёздочек» и кадр стены инструмента
Прайс по классу автомобиля: цена, время и состав работы
Прайс для класса «Премиум»: цены и время пересчитаны
Калькулятор на странице услуг
Страница мастерской: «Инженерное бюро с подъёмниками»
Главный инженер и принципы сервиса
Оборудование: подъёмники, диагностика, шины, чистота
Мозаика фотографий без пустых мест
Просмотр фото на весь экран: стрелки, свайп, счётчик
Команда: шесть ролей
Страница записи: «Выберите окно»
Запись, шаг 1: класс автомобиля
Запись, шаг 2: работы
Запись, шаг 3: календарь на 45 дней, воскресенье закрыто
Запись, шаг 4: время; длинные работы — только утром
Запись, шаг 5: понятные ошибки в полях
Экран подтверждения записи (в концепте ничего не отправляется)

Планшет и телефон

Та же страница на узких экранах: вёрстка перестраивается, управление остаётся удобным для пальца.

Планшет: первый экран
Планшет: рентген автомобиля
Планшет: калькулятор
Телефон: первый экран
Телефон: меню на весь экран
Телефон: рентген и список точек
Телефон: заголовок «Пять шагов»
Телефон: заказ-наряд
Телефон: калькулятор
Телефон: запись

Схемы и палитра

Как устроена страница, из чего собран дизайн и что на что реагирует.

Карта сайта: пять разделов и их блоки
Палитра и шрифты концепта
Путь автомобиля: пять шагов
Как считает калькулятор: цена, время, скидка, окно
Что на сайте интерактивно
Весь набор: 15 реалистичных кадров, сгенерированных по подробным описаниям
  • срок

    ≈ 40 дней

    стандартный, без ускорения

  • стоимость

    154 000 ₽ – 177 000 ₽

    расчётная цена 153 813 ₽

  • страниц

    5

    5 в составе

  • дизайн

    премиум

    анимации, 3d, авторские эффекты

стоимость

Почему именно 153 813 ₽

  • Основа: корпоративный сайт

    48 750 ₽

    5 стр. в составе

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

  • Дизайн: премиум

    + 17 063 ₽

    ×1,4 к основе и страницам

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

  • Арт-дирекция и фотосъёмка

    + 14 000 ₽

    15 реалистичных кадров, сводные листы, нарезка и сжатие

    Сайт сервиса держится на доверии, а доверие — на честных фото: подбор сюжетов, описания камеры и света, генерация, нарезка, подписи alt и сжатие до ~1 МБ на весь набор.

  • Заставка, плавная прокрутка, переходы

    + 12 000 ₽

    спидометр, инерционный скролл, диагональная шторка

    Сквозные эффекты на всех страницах с отключением при prefers-reduced-motion: заставка за сессию, плавная прокрутка и шторка при каждом переходе.

  • Рентген автомобиля

    + 12 000 ₽

    схема сверху, 7 точек осмотра с ценой и временем

    Интерактивная схема с точками, панелью деталей и дублирующим списком для клавиатуры и телефона: объясняет, что проверяют, сколько стоит и сколько займёт.

  • Калькулятор ТО и прайс по классам

    + 14 000 ₽

    класс, работы, скидка за комплекс, ближайшее окно

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

  • Запись с календарём

    + 11 000 ₽

    45 дней, слоты по длительности работ, подтверждение

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

  • Табло постов и заказ-наряд

    + 12 000 ₽

    статусы в реальном времени, согласование работ с фото

    Демонстрация личного кабинета: табло из шести постов, которое живёт по времени, и заказ-наряд, где клиент сам согласует обязательные и рекомендованные работы.

  • Шапка, меню и курсор-прицел

    + 8 000 ₽

    скрывается и возвращается, меню на весь экран, подписи

    Шапка меняет состояние при прокрутке и показывает свободные посты, полноэкранное меню и свой курсор для мыши.

  • Галерея с просмотром

    + 5 000 ₽

    мозаика без дыр, просмотр на весь экран

    Просмотр фото со стрелками, свайпом и клавиатурой с возвратом фокуса.

итого по расчёту

153 813 ₽

Расчётная цена — 153 813 ₽. Верхняя граница 177 000 ₽ — запас на доработки по ходу. Окончательная цена фиксируется в договоре после согласования макета.

срок

Почему ≈ 40 дней

  • Основа: корпоративный сайт

    14 дн.

    типовой срок

  • Дизайн: премиум

    + 2,8 дн.

    ×1,2 к сроку

  • Арт-дирекция и фотосъёмка

    + 4 дн.

    индивидуальная разработка

  • Заставка, плавная прокрутка, переходы

    + 3 дн.

    индивидуальная разработка

  • Рентген автомобиля

    + 3 дн.

    индивидуальная разработка

  • Калькулятор ТО и прайс по классам

    + 4 дн.

    индивидуальная разработка

  • Запись с календарём

    + 3 дн.

    индивидуальная разработка

  • Табло постов и заказ-наряд

    + 3 дн.

    индивидуальная разработка

  • Шапка, меню и курсор-прицел

    + 2 дн.

    индивидуальная разработка

  • Галерея с просмотром

    + 1 дн.

    индивидуальная разработка

Срок многостраничного сайта с коэффициентом премиального дизайна плюс время на интерактив, фото и запись. Сроки считаются в рабочих днях после согласования ТЗ и предоплаты.

честно

Это концепт, а не работа реального клиента: компания и данные вымышлены. Цена и срок — оценка по нашему калькулятору для параметров этого проекта: статичный сайт, написанный кодом, без CMS, админки и CRM, стандартный срок. Индивидуальные работы, которых нет в калькуляторе (эффекты, интерактив), оценены отдельными строками выше. Свой проект можно посчитать так же — результат будет совпадать с разбором.

Посчитаем ваш проект?

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