EMBER — сайт ресторана на открытом огне
Концепт лендинга для ресторана, где продаёт атмосфера: огонь, дым и ощущение вечера, который хочется повторить. Задача сайта: довести гостя от первого впечатления до забронированного стола меньше чем за минуту.
- Тип
- Лендинг ресторана, концепт
- Роль
- UX/UI-дизайн, фронтенд, копирайтинг, арт-дирекшн фото
- Стек
- HTML, CSS, JavaScript без фреймворков
- Год
- 2026
Задача
Сайты ресторанов обычно либо перегружены (PDF-меню, слайдеры, всплывающие окна), либо превращаются в визитку без действия. Гость приходит с одним вопросом: «хочу сюда сегодня, есть ли стол?», а ответ спрятан за звонком.
Для ресторана с сильной концепцией сайт должен сначала передать настроение, а затем не мешать бронированию: без лишних шагов, без выбора прошедшего времени и без сюрпризов с большой компанией.
Это концепт-проект: заказчик и отзывы вымышлены, а решения и функциональность — настоящие и работают на опубликованном сайте.
Для кого
Пара на вечер
Решает здесь и сейчас с телефона. Нужны: атмосфера за 3 секунды, цены, свободное время сегодня.
Организатор события
Ищет площадку для 8–40 человек. Нужны: форматы событий, закрытый зал, понятный следующий шаг.
Гурман
Сравнивает рестораны. Нужны: кухня, шеф, происхождение продуктов, отзывы.
Ключевые решения
Тёмная тема из сценария, а не из категории
Сайт открывают вечером и в полумраке. Тёмный фон с тёплым золотом повторяет свет углей и не слепит. Контраст второстепенного текста поднят до читаемого: тёмная тема не оправдание серому по чёрному.
Типографика как интерьер
Cormorant Garamond с курсивом для заголовков даёт ресторанную «рукописность», а Manrope в тексте даёт чистую читаемость цен и описаний. Цены вынесены вправо и выровнены, чтобы меню сканировалось, как в карте.
Фото вместо декора
От декоративных градиентов отказался в пользу сгенерированных фото с единой светотенью: огонь, шеф, зал. Каждое фото отвечает на вопрос гостя, а не заполняет место.
Меню без PDF
Пять позиций сезонного меню прямо на странице. Этого достаточно, чтобы понять кухню и чек, без загрузки файла на телефоне.
Что работает
- Бронирование с валидной логикой: дата не раньше сегодня и не дальше 60 дней, время только из будущих слотов по московскому времени, если на сегодня мест нет — подсказка выбрать другую дату.
- Счётчик гостей 1–12 с доступными кнопками; от 9 человек форма сама предлагает закрытый зал. Это мягкий апсейл банкета.
- Живой статус «Сейчас открыто / закрыто» с временем открытия, обновляется каждую минуту.
- Подтверждение с деталями брони человеческим языком: «Максим, стол на 10 гостей: воскресенье, 13 сентября в 15:30».
- Ошибки называют поле и возвращают фокус в него; состояния «Отправляем…» и «Готово» не дают отправить форму дважды.
Качество
Сайт свёрстан на чистых HTML, CSS и JavaScript: без фреймворков и сборки. Страница открывается мгновенно и легко переносится на любой хостинг или CMS.
- Адаптивная вёрстка от 360 px, мобильное меню с закрытием по Esc.
- Доступность: видимый фокус, подписи у всех полей, роли и живые области для экранных дикторов, учёт настройки «уменьшить движение».
- Контент виден без JavaScript: анимации появления включаются только когда скрипт загрузился.
- SEO и превью ссылок: описание страницы, Open Graph-картинка, иконка вкладки.
Что дальше
- Подключить реальный сервис бронирования (например, через API) вместо демо-отправки.
- Перевести изображения в WebP/AVIF и добавить srcset.
- A/B-тест: бронирование в первом экране против текущей схемы «атмосфера → бронь».