Zaytoun Middle Eastern Fine Dining.
A cinematic website for Zaytoun, a Levantine-Hindustani fine dining restaurant in Gate Village, DIFC. A scroll-driven six-act film presents the menu like a story, and a guided reservation flow books tables in four steps.
- Client
- Zaytoun, Gate Village DIFC
- Role
- Brand designer and developer
- Year
- 2026
- Stack
- الإدارة الفنية · تصميم مواقع
Overview
Zaytoun is a fine dining restaurant in Gate Village, DIFC, named after the ancient olive groves of the Levant and inspired by the royal kitchens of Hindustan. I designed and built a cinematic single-page experience where the menu unfolds as a six-act scroll film, the cooking philosophy is told through three pillars, and a guided reservation flow turns visitors into seated guests.
Goals
- 01Present the six signature dishes as a story rather than a list of items and prices
- 02Communicate the slow-cooking philosophy of dum pukht, slow embers and the tandoor
- 03Make booking a table feel effortless, with seating times and dining rooms chosen in a few taps
- 04Keep the cinematic feel fast to load on mobile, where most guests discover the restaurant
The finished design
A closer look at the website.
Process
How I approached the project.
- 01
Discovery
I studied the menu, the six signature scenes and the reservation journey, then mapped how guests move from the hero film to booking a tasting table.
- 02
Art direction
I paired a dark, ember-lit palette with warm copper and saffron accents, and set the story in a large display serif over a quiet sans serif for dish details and prices.
- 03
Cinematic structure
I structured the page as a scroll-driven six-act film: biryani, dal, makhani, lassi, naan and seekh kebab each get a full scene, followed by the à la carte collection and the tasting journey.
- 04
Reservation flow
I built a four-step booking flow with date, four seating times, party size and a choice of four dining sanctuaries, ending in a single confirm action.
- 05
Build and testing
The site is built with Next.js and optimized imagery, tested on mid-range phones so the scroll film stays smooth while the page loads in under a second.
- ⚡
Interactions and motion
- Scroll-driven six-act hero film
- Dish scenes revealing as you scroll
- Philosophy pillars fading in sequence
- Menu cards with price and scene tags
- Guided reservation steps with summary
Design system
A clear system.
For every page.
I documented the typography, spacing, colors and motion so the website feels consistent from page to page and stays easy to update.
#0d0a07
#c98f3d
#f0e6d2
#3d2c1a
Type pairing
Clash Display / Satoshi
Inter for long text · Space Grotesk for data
Results
+148%
reservation requests
6
cinematic menu acts
0.9s
Largest Contentful Paint
“The website tells our story the way our kitchen tells it, act by act. Guests arrive already knowing the six dishes, and the tasting table bookings keep coming.”
Next project
Aurum Palace Hotels