задача
Что нужно было сделать
Кофейне с собственной обжаркой нужна страница, которая сразу показывает, чем она отличается: свежая обжарка в зале. Главные действия: забронировать столик, посмотреть меню и заказать зерно по подписке.
Что вошло в работу
- Одна страница: обжарка, меню, зерно, как мы работаем, вопросы, контакты (формы и аналитика входят в основу лендинга)
- Интерактивный блок «обжарка»: ползунок меняет зерно, кривую температуры, вкусовые ноты и баланс вкуса
- Меню с вкладками и ценами, карточки лотов зерна
- Калькулятор подписки: размер пачки, помол и частота пересчитывают цену на лету
- Форма брони столика с проверкой полей и экраном подтверждения
- Авторская графика и анимации с учётом prefers-reduced-motion
- Статичный сайт на Next.js: без CMS и админки, адаптивная вёрстка 320–1920 px
как выглядит
Сайт кофейни: экраны и схемы
29 материалов из собранного концепта: клик по картинке открывает её крупно. Это скриншоты живого демо, а не макеты.
Десктоп
Экраны и состояния интерактива на широком экране.
Планшет и телефон
Та же страница на узких экранах: вёрстка перестраивается, управление остаётся удобным для пальца.
Схемы и палитра
Как устроена страница, из чего собран дизайн и что на что реагирует.
срок
≈ 19 дней
стандартный, без ускорения
стоимость
58 000 ₽ – 67 000 ₽
расчётная цена 58 363 ₽
страниц
1
1 в составе
дизайн
премиум
анимации, 3d, авторские эффекты
стоимость
Почему именно 58 363 ₽
Основа: лендинг
21 750 ₽
1 стр. в составе
Лендинг: одна страница под одну задачу — привести гостя в кофейню или к заказу зерна. Формы и аналитика входят в основу.
Дизайн: премиум
+ 7 613 ₽
×1,4 к основе и страницам
Премиум: авторская графика и анимации в дизайне — выше типового уровня, поэтому наценка к основе. Сами эффекты оплачиваются отдельно, ниже.
Интерактивный первый экран
+ 12 000 ₽
обжарка: ползунок, зерно, кривая температуры, живое табло
Это авторская механика, а не типовой блок: ползунок меняет зерно, кривую температуры, вкусовые ноты и баланс вкуса, плюс табло и вращающийся бейдж.
Курсор, анимации и эффекты прокрутки
+ 9 000 ₽
курсор-зерно, появление из размытия, параллакс, живой заголовок
Собственный курсор с инерцией и «щелчком», анимации входа и эффекты при прокрутке: отдельно проектируются, отлаживаются под устройства и отключаются при prefers-reduced-motion.
Горизонтальный блок и полноэкранные сцены
+ 5 000 ₽
лента «день», сцена с зёрнами, искры и фоны
Лента, которая едет по прокрутке страницы без дрожи, и полноэкранные блоки с фоновой графикой требуют отдельной вёрстки и проверки на разных экранах.
Калькулятор подписки и бронь столика
+ 3 000 ₽
пересчёт цены на клиенте, форма с экраном подтверждения
Интерактивная логика на клиенте: цена пересчитывается на лету, форма проверяет поля и показывает понятное подтверждение.
итого по расчёту
58 363 ₽
Расчётная цена — 58 363 ₽. Верхняя граница 67 000 ₽ — запас на доработки по ходу. Окончательная цена фиксируется в договоре после согласования макета.
срок
Почему ≈ 19 дней
Основа: лендинг
7 дн.
типовой срок
Дизайн: премиум
+ 1,4 дн.
×1,2 к сроку
Интерактивный первый экран
+ 5 дн.
индивидуальная разработка
Курсор, анимации и эффекты прокрутки
+ 3 дн.
индивидуальная разработка
Горизонтальный блок и полноэкранные сцены
+ 2 дн.
индивидуальная разработка
Калькулятор подписки и бронь столика
+ 1 дн.
индивидуальная разработка
Срок лендинга с коэффициентом премиального дизайна плюс время на индивидуальные эффекты. Сроки считаются в рабочих днях после согласования ТЗ и предоплаты.
Это концепт, а не работа реального клиента: компания и данные вымышлены. Цена и срок — оценка по нашему калькулятору для параметров этого проекта: статичный сайт, написанный кодом, без CMS, админки и CRM, стандартный срок. Индивидуальные работы, которых нет в калькуляторе (эффекты, интерактив), оценены отдельными строками выше. Свой проект можно посчитать так же — результат будет совпадать с разбором.
