Концепт студии · 2025

«Ноктюрн»

Коктейльный бар · сайт заведения

ЗадачаКарта в PDF, афиша в соцсетях, бронь по телефону, который вечером никто не берёт.

Ниша: Коктейльный бар в Санкт-Петербурге
Что делали: Структура, тексты, дизайн, анимации, вёрстка
Заявки: В концепте форма демонстрационная. В работе бронь уходит администратору в Telegram
Статус: Концепт студии: бар, карта и цены вымышлены
Стек: HTML · Tailwind CSS · Alpine.js · GSAP · Lenis

Главная мысль

Меню, афиша и бронь — один путь гостя, поэтому они на одной странице.

38 коктейлей в PDF никто не дочитает

Гость открывает карту в PDF, увеличивает, теряется где-то в середине и закрывает. Список на странице не лучше: пролистать 38 карточек в поисках «чего-нибудь несладкого на джине» — это работа, а не выбор.

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

Если сочетания нет, гость не видит пустой экран. Он видит «спросите бармена» и кнопку сброса. На телефоне панель свёрнута и не съедает первый экран.

Карта «Ноктюрна» с фильтром «Виски»: в сетке остались только подходящие коктейли

Раздел «Коктейли»: панель фильтров по базе, вкусу и крепости над сеткой карточек — На десктопе панель открыта всегда, на телефоне — по кнопке.

Карта коктейлей на телефоне: фильтры и первые карточки — На десктопе панель открыта всегда, на телефоне — по кнопке.

Афиша, на которую нельзя записаться

Обычно событие на сайте — просто текст. Чтобы прийти, гость должен позвонить и объяснить, на какой вечер он хочет попасть.

У нас кнопка «Записаться» стоит у каждого вечера. Она переносит гостя к брони и заполняет форму за него: дата подставлена, в комментарии уже написано, на что он идёт. Остаётся выбрать, сколько будет человек.

Вечер в афише
Гость листает ближайшие вечера и жмёт «Записаться» у нужного.
Форма уже заполнена
Дата и название вечера перенеслись в бронь сами — ничего не надо перепечатывать.
Детали
Гость меняет число гостей и зал. Больше от него ничего не требуется.
Готово
Гость видит, что заявка принята. Администратор получает её с датой и поводом и подтверждает стол.

Бар продаёт полумрак. Сайт обязан его передать

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

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

Зал после заката#0A0A08
Янтарь#D3862E
Табачный дым#9A8B78

Заголовки · Cormorant GaramondПолумрак и тёплый свет
Текст · OnestКарта меняется дважды в год

В карточке — состав с граммовкой

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

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

Раскрытая карточка коктейля «Ноктюрн»: состав, вкус и крепость

Карта и афиша обновляются без вёрстки

Коктейли, вечера, кухня и часы работы лежат в одном файле данных. Новый коктейль — восемь строк, новый вечер — шесть, дизайн при этом трогать не нужно. В концепте эти строки правим мы, в рабочем проекте то же делается в админке.

Коктейль добавили, а фотосессия ещё впереди? Карточка не ломается: на месте фото появляется плашка «Коктейль на фотосессии».