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

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

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

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

задача

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

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

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

  • 6 страниц: главная, меню, шеф, зал и события, бронь, политика (плюс страница 404)
  • Статичный сайт, написанный кодом (Next.js): без CMS и админки, контент и цены лежат в данных
  • 19 реалистичных фотографий: зал, бар, кухня, шеф, вино, блюда; сводные листы и нарезка
  • Заставка, плавная прокрутка, шторка при переходах, раскрытие слов и шторки у фото, параллакс
  • Лента «Семь актов» на горизонтальной прокрутке, скрабинг текста манифеста
  • Шапка-капсула, меню на весь экран с превью, свой курсор для мыши
  • Меню с вкладками и ценами, бронь с календарём и слотами, заявка на событие
  • Адаптивная вёрстка 320–1920 px, тесты (47) и проверка статической сборки

как выглядит

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

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

Десктоп

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

Заставка при первом заходе: буквы ESSE выезжают из-под маски, линия заполняется
Первый экран: кадр зала, заголовок выезжает по словам, шапка прозрачная
Манифест: слова проявляются по мере прокрутки
«Семь актов»: заголовок, цена дегустации и начало ленты
Горизонтальная лента на вертикальной прокрутке: первые акты
Лента: середина ужина — тюрбо, утка, оленина
Лента: десерт и карточка-переход в полное меню
Зал и кухня: композиция из двух фото и текста
Свой курсор: кольцо с подписью «смотреть» над фотографией
Шеф-повар с цитатой на главной
Вино и бар: фото сомелье и три причины заглянуть
Бронь на весь экран на фоне свечи и бокала
Подвал: огромное слово ESSE, адрес, часы, навигация
Шапка-капсула: при прокрутке вверх лента сжимается в плавающую капсулу
Меню на весь экран: крупные ссылки, фото меняется при наведении
Шторка при переходе между страницами
Страница меню: кадр сервировки и заголовок
Меню, вкладка «Дегустация»: семь актов и фото справа
Наведение на блюдо меняет фото справа
Вкладка «Карта»: блюда с метками V и GF и ценами
Вкладка «Вино»: по бокалу и бутылки
Вкладка «Бар»: коктейли и напитки без алкоголя
Страница шефа: кадр открытой кухни и имя
История шефа: портрет и текст, фото закреплено при прокрутке
Три принципа кухни: продукт, огонь, терпение
Один день на кухне: шесть пунктов с временем
Команда: шесть ролей
Страница зала: отдельный зал со сводами
Пять комнат: фото и описание парами
Мозаика фотографий без пустых мест
Просмотр фото на весь экран: стрелки, свайп, счётчик
События: три формата и заявка
Заявка на событие: понятные ошибки в полях
Страница брони: кадр со свечой
Бронь: число гостей и календарь, закрытые дни зачёркнуты
Бронь: свободные слоты, занятые зачёркнуты
Бронь: ошибки в контактах, плавающий итог
Экран подтверждения брони (в концепте ничего не отправляется)

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

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

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

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

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

Весь набор: 19 реалистичных кадров, сгенерированных по подробным описаниям
Карта сайта: шесть разделов и их блоки
Палитра: ночь, вино, латунь; шрифты Prata и Jost
Эффекты и где они работают
Как сделаны фотографии: от промпта до сайта
Путь брони стола: от гостей до подтверждения
  • срок

    ≈ 38 дней

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

  • стоимость

    163 000 ₽ – 187 000 ₽

    расчётная цена 162 863 ₽

  • страниц

    6

    5 в составе + 1 дополнительная

  • дизайн

    премиум

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

стоимость

Почему именно 162 863 ₽

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

    48 750 ₽

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

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

  • Страницы сверх состава

    + 3 000 ₽

    1 × 3 000 ₽

    Шестая страница сверх состава — отдельная вёрстка и наполнение, поэтому доплата за одну страницу.

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

    + 18 113 ₽

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

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

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

    + 18 000 ₽

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

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

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

    + 16 000 ₽

    буквы ESSE, инерционный скролл, шторка между страницами

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

  • Лента «Семь актов», скрабинг текста, параллакс

    + 14 000 ₽

    горизонтальная прокрутка на композиторе, слова проявляются по скроллу

    Анимации на CSS scroll-timeline без дрожи плюс запасной вариант на JS для браузеров без поддержки; раскрытие слов и шторки у фото.

  • Шапка-капсула, меню на весь экран, курсор

    + 12 000 ₽

    три состояния шапки, превью фото в меню, точка и кольцо с подписями

    Шапка меняет форму при прокрутке и прячется; полноэкранное меню с превью; свой курсор для мыши с подписями над фото и ссылками.

  • Меню с вкладками и живым фото

    + 10 000 ₽

    дегустация, карта, вино, бар; липкое фото при наведении

    Четыре раздела с ценами и метками, управление с клавиатуры, адрес с #wine открывает нужную вкладку, фото справа меняется вслед за блюдом.

  • Бронь стола

    + 15 000 ₽

    календарь на 60 дней, слоты, форма, экран подтверждения

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

  • Галерея с просмотром и заявка на событие

    + 8 000 ₽

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

    Просмотр фото со стрелками, свайпом и клавиатурой, возврат фокуса; отдельная форма заявки на банкет с проверкой и подтверждением.

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

162 863 ₽

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

срок

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

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

    14 дн.

    типовой срок

  • Страницы сверх состава

    + 0,5 дн.

    1 × 0,5 дн.

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

    + 2,9 дн.

    ×1,2 к сроку

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

    + 4 дн.

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

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

    + 4 дн.

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

  • Лента «Семь актов», скрабинг текста, параллакс

    + 3 дн.

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

  • Шапка-капсула, меню на весь экран, курсор

    + 3 дн.

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

  • Меню с вкладками и живым фото

    + 2 дн.

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

  • Бронь стола

    + 3 дн.

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

  • Галерея с просмотром и заявка на событие

    + 2 дн.

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

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

честно

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

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

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