Restaurant & wine bar · Marylebone, London
Lucciola Trattoria & Enoteca
A warm, characterful site for a Marylebone trattoria and wine bar. Booking a table starts on the first screen and ends with live time slots for each part of the restaurant, the menu filters for any diet, the wine list finds a match for your dish, and classes, private dining and gift cards can all be booked or priced online.
Type
Concept build
Year
2026
What I did
Web design, Build, Copywriting
Built with
Next.js 16, React 19, Tailwind CSS v4
The brief
A neighbourhood trattoria site that makes booking a table the first thing you see.
Restaurant sites are often a menu PDF and a booking widget hidden at the bottom. A neighbourhood trattoria needed something that felt like walking in: warm, a little theatrical, and with booking a table one tap away from the moment the page opens.
The approach
- 01
Put a quick booking bar (date, guests, time) straight into the hero, so the main job of the site takes seconds.
- 02
Added a “day at Lucciola” timeline that shows where the restaurant is right now, from pasta being rolled in the window to the late wine bar.
- 03
Gave private dining rooms and pasta classes their own sections, two of the most valuable things a restaurant sells.
- 04
Turned every part of the business into something you can do online: book a table, filter the menu, pair a wine, book a class, price a private party or send a gift card.
- 05
Built the look around the room itself: wine red, olive and terracotta, a soft serif and photography in arched frames.
Key features
What makes it work.
Table booking
Party size, date, where to sit (dining room, counter, terrace or bar) and live time slots marked open, few left or full.
Menu filters
Vegetarian, vegan, gluten-free and nut-free filters across the whole menu.
Wine pairing finder
Pick what you’re eating and the list shows what goes with it, by the glass or the bottle.
Class calendar
Eight weeks of pasta classes with seats left, booking and a waitlist.
Private dining planner
Guests, set menu and wine give a live estimate and suggest the right room.
Gift cards
An amount or an experience, three designs and a live preview with the message.
The full homepage
Scroll the whole page.
Scroll inside the window to see every section, top to bottom.
On mobile
Phone-first.
Most visitors arrive on a phone, so the mobile layout gets designed first, not squeezed in at the end.
Design system
Colour & type.
A small, deliberate palette and type pairing, used consistently across every page.
Wine
#6e2533
Olive
#5a633a
Terracotta
#c2653f
Cream
#f6f1e7
Lucciola Trattoria & Enoteca is a fictional business created to show this design. The site is fully built and working; reviews, prices and team details are example content.
Social content
The feed, to match.
Concept posts for Lucciola Trattoria & Enoteca, in the same fonts, colours and photography as the website, so the brand looks the same wherever people find it.
Dish of the day
Class promo
Next project
Ember & Brine
A seaside sauna club site with live beach conditions and a session finder
View case study
Want results like this for your business?
Tell me a bit about your business and what you need. You'll get a clear, no-obligation quote back.