Хата Багата
Ресторан домашней украинской кухни с залом у открытого огня. Такую атмосферу можно продать только картинкой.
Всё снято с живой версии сайта, в том виде, в каком её видит посетитель.
Ruslan Display
ЗаголовкиAa
- Хата БагатаRegular 400
АБВГҐДЕЄЖЗИІЇЙ abcdefghijklm 0123456789
Montserrat
ТекстAa
- Хата БагатаRegular 400
- Хата БагатаMedium 500
- Хата БагатаBold 700
АБВГҐДЕЄЖЗИІЇЙ abcdefghijklm 0123456789
Скругления
- 10 px
- круг
Кнопки: 10 px
Шкала текста
- AaH2, 46,5 px
- AaH3, 37 px
- AaЛид, 29 px
- AaТекст, 18,5 px
Контраст
- 13,6 : 1текст на фоне, AAA
- 7,8 : 1надпись на кнопке, AAA
Тени
Мягкая нейтральная тень
Контекст
«Хата Багата» работает как семейный ресторан украинской кухни в центре Ивано-Франковска с 2016 года. В здании несколько залов: главный зал с традиционным интерьером, банкетные залы на 14-50 человек, реберня с открытым огнём и детская комната «Хатинка» на 150 кв.м. По выходным в зале играет живая музыка.
Проблема
Ресторан оценивают за несколько секунд скролла. У «Хаты Багатой» было домашнее меню украинской кухни, блюда на открытом огне в реберне и колоритный интерьер с вышиванками и глиняной посудой, но показать это было нечем: меню жило в заламинированной папке, а посты в соцсетях исчезали в лентах.
Ограничение
Меню в ресторане меняется часто, и сайт не должен требовать разработчика на каждую правку. Поэтому меню на сайте это сфотографированные развороты бумажного меню, а заказ доставки вынесен в отдельное лёгкое веб-приложение.
Решения: там, где они живут
Почему мы сделали именно так.
Ветка калины с ягодами обрамляет каждый блок сайта и перескакивает с одного края страницы на другой, поддерживая народную тему меню и интерьера.
У каждого зала один крупный портретный кадр и рядом два горизонтальных столбиком. Сетка ломает ритм одинаковых плиток.
На фото официантка в вышиванке с глиняной посудой и настоящий интерьер зала, снятые специально для сайта.
Вышитые рушники и глиняная посуда повторяются на фотографиях всех залов: каждую съёмку одевали одинаково, чтобы залы читались как один ресторан.
Ветка калины с ягодами обрамляет каждый блок сайта и перескакивает с одного края страницы на другой, поддерживая народную тему меню и интерьера.
У каждого зала один крупный портретный кадр и рядом два горизонтальных столбиком. Сетка ломает ритм одинаковых плиток.
На фото официантка в вышиванке с глиняной посудой и настоящий интерьер зала, снятые специально для сайта.
Вышитые рушники и глиняная посуда повторяются на фотографиях всех залов: каждую съёмку одевали одинаково, чтобы залы читались как один ресторан.
Что мы сделали и почему
Каждый зал показан в реальных фото
У главного, банкетного и реберного залов отдельные блоки с настоящими фотографиями персонала, гостей и сервировки. Под каждым блоком кнопка «Детальніше» открывает окно с ещё одной галереей и переходом к брони столика.
Доставка устроена как витрина магазина
На странице доставки каждое блюдо стоит карточкой с фото на деревянном фоне, составом и ценой в гривнах, а фильтр сверху делит меню на гарниры, супы, салаты и горячие блюда. Заказ собирается в корзину и оформляется с адресом, выбором доставки или самовывоза и способом оплаты.
Меню страницами вместо каталога
На странице меню лежат сфотографированные развороты бумажного меню, разложенные по вкладкам «Основне», «Банкет», «Реберня» и «Дитяче». Хозяева обновляют меню, заменяя фото страницы, без правок кода и звонка разработчику.
Что за этим стоит по SEO
Весь контент в исходном HTML
Тексты залов, меню и блюд отдаются готовым HTML с сервера на Python, без сборки на клиенте: поисковик видит содержимое, не выполняя скрипты.
Organization с ссылками на соцсети
JSON-LD Organization с адресом сайта и ссылками на Instagram и Facebook в sameAs связывает сайт со страницами ресторана в соцсетях.
Локальный запрос в title и meta
Title и meta description начинаются с фразы «ресторан української кухні», а meta keywords перечисляет «ресторан франківськ» и «хата багата» для локального поиска.
Что получилось
Атмосфера ресторана наконец существует онлайн, и гости приходят уже зная, что закажут.
Взгляд поближе
Нажми на кадр: он откроется на весь экран.