Hata Bagata
A home-style Ukrainian restaurant with an open-fire dining room. Atmosphere like that only sells through pictures.
Measured on the live site, exactly as a visitor sees it.
Ruslan Display
HeadingsAa
- Хата БагатаRegular 400
АБВГҐДЕЄЖЗИІЇЙ abcdefghijklm 0123456789
Montserrat
Body textAa
- Хата БагатаRegular 400
- Хата БагатаMedium 500
- Хата БагатаBold 700
АБВГҐДЕЄЖЗИІЇЙ abcdefghijklm 0123456789
Corner radii
- 10 px
- circle
Buttons: 10 px
Type scale
- AaH2, 46.5 px
- AaH3, 37 px
- AaLead, 29 px
- AaBody, 18.5 px
Contrast
- 13.6 : 1text on background, AAA
- 7.8 : 1button label, AAA
Shadows
A soft neutral shadow
Context
Hata Bagata has run as a family Ukrainian restaurant in downtown Ivano-Frankivsk since 2016. The building holds several rooms: a main hall with a traditional interior, banquet halls for 14 to 50 guests, a rib room with an open fire, and a 150 m² kids' room called Khatynka. Live music plays in the hall on weekends.
The Challenge
Restaurants get judged in a few seconds of scrolling. Hata Bagata had a home-style Ukrainian menu, dishes cooked over open fire in its rib room, and a colorful interior with embroidered vyshyvankas and clay pottery, but nothing to show it with. The menu lived in a laminated folder, and social posts vanished into feeds.
The constraint
The menu changes often, and the site couldn't require a developer for every edit. So the menu on the site is photographed spreads of the paper menu, and delivery ordering is split off into its own lightweight web app.
The decisions, pinned where they live
Why we made it this way.
A viburnum branch with berries frames every block on the site and jumps from one edge of the page to the other, carrying through the folk theme of the menu and the interior.
Each hall gets one large portrait shot next to two stacked horizontal ones. The grid breaks the rhythm of identical tiles.
The photos show a waitress in a vyshyvanka with clay pottery and the real interior of the hall, shot specifically for the site.
Embroidered rushnyk towels and clay pottery repeat across the photos of every hall: each shoot was dressed the same way, so the halls read as one restaurant.
A viburnum branch with berries frames every block on the site and jumps from one edge of the page to the other, carrying through the folk theme of the menu and the interior.
Each hall gets one large portrait shot next to two stacked horizontal ones. The grid breaks the rhythm of identical tiles.
The photos show a waitress in a vyshyvanka with clay pottery and the real interior of the hall, shot specifically for the site.
Embroidered rushnyk towels and clay pottery repeat across the photos of every hall: each shoot was dressed the same way, so the halls read as one restaurant.
What we did, and why
Every hall shown in real photos
The main hall, the banquet halls and the rib room each get their own block with real photos of staff, guests and table settings. Under each block, a "Detaily" button opens a window with another gallery and a link to book a table.
Delivery works like a shop window
On the delivery page, every dish sits in its own card with a photo on a wood background, ingredients and a price in hryvnias, while a filter at the top splits the menu into sides, soups, salads and hot dishes. Orders go into a cart and check out with an address, a choice of delivery or pickup, and a payment method.
A menu of pages instead of a catalog
The menu page holds photographed spreads of the paper menu, sorted into tabs: Osnovne, Banket, Reberna and Dytiache. The owners update the menu by swapping out a page photo, with no code changes and no call to a developer.
The SEO thinking behind it
All content in the source HTML
Text about the halls, the menu and the dishes ships as finished HTML from a Python server, with no client-side build. Search engines see the content without running a single script.
Organization with social links
JSON-LD Organization markup with the site address and Instagram and Facebook links in sameAs connects the site to the restaurant's social pages.
A local search term in title and meta
The title and meta description open with the phrase "ресторан української кухні," and meta keywords lists "ресторан франківськ" and "хата багата" for local search.
Where it landed
The restaurant's atmosphere finally exists online, and guests arrive already knowing what they want to order.
A closer look
Click any frame to open it full screen.