A restaurant website is the same three pieces every time — menu, hours, booking. The design problem is making those three pieces feel like this restaurant and not a template. So I took one brief and answered it three ways: a neighbourhood trattoria, a busy mid-tier eatery, and a fine-dining room. Same Next.js and Tailwind foundation underneath all three; everything a customer feels is different.
Concept one — the neighbourhood trattoria
The casual anchor. A family-run Italian spot where the food photography does the selling and the layout gets out of the way. Big full-bleed imagery, a relaxed serif-and-sans pairing, and a booking call-to-action that sits in front of you without shouting. The menu runs as one scrollable list rather than tabs, because a casual spot reads like a story, not a database.
Concept two — the busy mid-tier eatery
The middle of the market is the awkward one. A modern North Indian place doing heavy lunch and dinner covers isn't casual and isn't fine-dining — and half its traffic is a phone deciding where to eat in the next ten minutes. So this one leans on structure instead of imagery: sticky tabbed menu categories, prices visible up front, and booking plus "order on WhatsApp" pinned where a thumb can reach them. Conversion over mood.
Concept three — the minimal fine-dining room
The high end is where a website earns its reservation. Photography recedes; the chef's name and the tasting-menu reservation come forward. A near-monochrome palette, oversized display type, a short curated menu instead of a catalogue, and one deliberate path to the booking page. The design spends its budget on whitespace and type scale — restraint is the signal.
Why three
The spread is the point. Casual, mid-tier, premium — same components, three completely different brand voices, all on one reusable foundation. That's the case I'd make to any restaurant owner: the stack is solved, the work is making it feel like yours. The deliverable here is the designs themselves.