Yùyàn

Hospitality

2026

Client

Emily B.

Client confidentiality — Selected names and identifying details have been changed to anonymise the client. Yùyàn presents a contemporary restaurant through its food, atmosphere and attention to detail. An image-led experience connects an explorable menu with practical visit information and a focused reservation request.

Project showcase

A complete homepage scroll-through and selected views of the restaurant website. Captured September 2026.

Project Focus

Restaurant identity · Interactive menu · Reservation requests · Motion design · Next.js development

The Challenge

The goal was to communicate the character of the restaurant without making guests work for the essentials. Food photography and atmosphere needed room, while the menu, dietary information, opening hours and reservation route had to remain easy to find on both desktop and mobile.

The Solution

An editorial layout pairs generous imagery with structured menu and dining sections. Dietary filters, allergen labels and section navigation make the menu useful beyond its visual presentation. A reservation form brings date, party size and dining preferences into one request, supported by clear contact information and visit details.

What we built

The features behind the experience.

/001

An editorial first impression

Large food images, a restrained dark palette and carefully paced typography introduce the restaurant before practical details take over. Signature dishes and the tasting experience each have their own space.

/002

A menu guests can actually explore

The à la carte menu is organised by category, with dietary filters and clear prices. Dish tags and allergen labels keep useful detail close to each item instead of hiding it in a separate document.

/003

Navigation that follows the menu

The menu navigation highlights the section being viewed. On smaller screens it becomes a horizontal list, keeping the same structure without squeezing a desktop sidebar onto a phone.

/004

Different ways to spend the evening

Dedicated sections introduce à la carte dining, the tasting menu, the chef’s counter and wine pairings. Visitors can understand the options before choosing an experience in the reservation form.

/005

A considered reservation request

Guests choose a date, time, party size and dining experience, with space for an occasion and a note. The request is checked against opening hours, lead time and the booking window. It remains a request for the restaurant to confirm, rather than a promise of an available table.

/006

Useful details at the right moment

Opening status, contact information and answers to common questions help guests plan a visit. The location map is loaded only after the visitor permits external media.

/007

Motion with a consistent rhythm

Image reveals, parallax, text transitions and a full-screen gallery carry the visual language between pages. Hover details and page transitions add movement around the photography and typography.

/008

A foundation for day-to-day updates

Menu, restaurant details and opening hours are held in structured content files. Next.js, React and TypeScript support the site, with server-side form validation and a Resend integration for reservation emails when configured.

The approach

How the experience comes together.

Set the atmosphere, then make it useful

The landing page introduces the food and the character of the restaurant. Menu and reservation routes remain easy to find as the visitor moves through the imagery.

Give the menu a readable structure

Categories, dietary filters, prices and allergen information turn a large menu into something guests can browse at their own pace. Separate tasting and pairing sections explain the longer dining experiences.

Connect interest to a clear request

The reservation journey collects the details the restaurant needs, checks the requested slot and explains that the team will confirm the table. Contact details provide another route when the form is not suitable.

Build the details into one system

Shared content, reusable layouts and a consistent motion language connect the homepage, menu, story and contact pages. Responsive navigation and image layouts adapt that system to smaller screens.

In motion

See the experience unfold.

A recorded walkthrough of the page, from the first impression to the final section.

Scroll walkthrough · No audio · Use the player controls to pause, seek or enter fullscreen.

A closer look.

03 views

01Signature courses — large images give the food room to speak.

02The menu — a focused view of dishes and categories.

03The story — an introduction to the restaurant and its approach.

The Outcome

A restaurant website that connects atmosphere with the decisions guests make before a visit: what to eat, which experience to choose and how to request a table. The existing screenshots and walkthrough show the visual direction, while the menu and reservation tools provide the practical foundation underneath it.