Хата Багата
Ресторан домашньої української кухні із залом біля відкритого вогню. Таку атмосферу можна продати лише картинкою.
Усе знято з живої версії сайту, такою, якою її бачить відвідувач.
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 перелічує «ресторан франківськ» і «хата багата» для локального пошуку.
Що вийшло
Атмосфера ресторану тепер є онлайн. Гості приходять, уже знаючи, що замовлять.
Ближчий погляд
Натисни на кадр, і він відкриється на весь екран.