top of page

How to turn a website into a natural extension of the restaurant experience

  • 2 days ago
  • 6 min read



The starting point

El Jardín is one of those places that stays with you: soft light, lush greenery, the sea in the background, and a kitchen that honours Spanish tradition with calm precision and care. The dining room experience is warm, intimate and meticulously attended.


However, its digital presence did not fully support that feeling. The website displayed the menu as a PDF, there were barely any images of the dishes, and the booking system was not integrated, forcing users to jump between different channels to find what they needed. The magic you could sense on Instagram was lost as soon as you arrived on the site.

El Jardín's Desktop & Mobile Homepage (Before)



Objective: a digital experience to match the table

The challenge was clear: create a website that felt like stepping into the restaurant. Not just “showing information”, but gently guiding future guests from discovery all the way to reservation.

We set five goals:

  1. Reflect the restaurant’s essence: tradition, calm and attention to detail.

  2. Make table reservations easy directly from the website.

  3. Give prominence to the menu, the chef and the setting.

  4. Offer clear information on allergens and how dishes are prepared.

  5. Design a system that is easy for the restaurant’s own team to maintain and update, without relying on third parties for menu or content changes.

With these goals as a foundation, the next step was to translate them into a coherent visual and navigational experience.




Restaurant Website Design:

Warmth, clarity and a gentle pace

For the visual design, I took the menu, the interiors and the natural light in the space as a starting point. From there, a palette of warm, natural tones emerged, paired with typography that feels elegant yet approachable. The result is a website that doesn’t shout; it quietly supports the experience.

The structure was organised so that navigation feels intuitive and fully responsive, so the experience remains clear and considered across desktop, tablet and mobile.


Homepage Design


A clear welcome where, in just a few seconds, visitors understand what kind of experience awaits them, how to book, and what makes El Jardín special. Everything is arranged so that the first impression is as pleasant as that first step into the restaurant.

A design concept for a restaurant website. The image shows an overview of the desktop and mobile homepage
El Jardín's Desktop & Mobile Homepage (Design Concept)



The old PDF becomes a living, browsable menu. Dishes are organised by category and each item has room to breathe: name, description, cost, dietary tags and allergens. Guests can explore at their own pace, without pinching to zoom or getting lost.


Overview of a desktop and mobile restaurant website immersive menu
El Jardín's Desktop & Mobile Menu (Design Concept)

On a curated selection of dishes, hovering over the image reveals a 360º animation of the plate, creating a more immersive and appetising effect. Behind the scenes, the menu is built on a dynamic CMS, designed so the restaurant team can easily update dishes, prices or categories as the seasons change.

Because there were no up-to-date photographs of all the dishes, I chose to use AI-generated images as a temporary solution, while leaving the structure ready to easily replace them with the restaurant’s own photography. The priority was to create a solid framework that can grow with the gastronomic project.

The website’s structure is designed so that these AI images are only a starting point and can be replaced with the restaurant’s own photography without any technical support.


Allergen information: peace of mind for guests, rigour for the restaurant

The website includes a system designed to display allergens and special requirements clearly, both in the main menu view and on each dish page. The goal is not only to comply with regulations, but to build trust: ensuring that anyone with specific needs feels considered and safe from the very first moment.


Overview of a desktop and mobile immersive menu where users can access more information about a dish, such as the name, description, allergens, photo and video
El Jardín's Desktop & Mobile Dish information (Design Concept)

The design anticipates the use of allergen icons and labels, ready to be configured according to the restaurant’s needs.



Table Reservations


Overview of a desktop and mobile restaurant booking or reservation system where users can place a reservation by selecting the number of guests, the date, time and other preferences
El Jardín's Desktop & Mobile Booking (Design Concept)

The booking experience is one of the most sensitive touchpoints for any restaurant. Compared with the previous website, fragmented experience across different tools, the entire journey now lives on the website. Guests can select date, time and party size without leaving the site. The restaurant manages availability from a single dashboard, and guests receive a confirmation email aligned with the restaurant’s visual identity, closing the loop in a coherent way. Each reservation generates a confirmation email personalised with the restaurant’s visual identity. This continuity creates something guests value deeply: a sense of order, professionalism and genuine care.


The flow is fully designed and ready to connect to whichever booking system the restaurant chooses (for example, its current provider or a new tool integrated into the platform). The solution is also prepared to connect with existing tools such as the Google Business profile and to manage tables visually from within the platform itself.


Guests explore the restaurant, review the menu and, when they are ready, book without being redirected to external platforms. The restaurant controls availability from its own dashboard.


About the Chef


Overview of a desktop and mobile chef biography for users to learn more about his or her career, purpose, story, etc.
El Jardín's Desktop & Mobile About the Chef (Design Concept)

A dedicated space for the career and culinary philosophy of the Chef, created to help guests understand who is behind each dish and why the gastronomic proposal is unique. In this way, diners don’t just see the menu, but also the person and story behind it. For now, this section presents the chef’s official photograph and a concise biography, with room to grow in the future.



Experience Gallery

Overview of a desktop and mobile website gallery where users can get an idea a walkthrough the restaurant and an idea of the experience.
El Jardín's Desktop & Mobile Gallery (Design Concept)

A visual gallery that captures the essence of the place: the garden, the tableware, the light, the details. It is not just a “photo album”, but a gentle, anticipatory walk through the restaurant.

In addition to images, public guest-created videos are embedded, helping to showcase the real experience through the diner’s own perspective.


Contact Form


Overview of a desktop and mobile contact us form where users can place special request or other enquiries 24/7
El Jardín's Desktop & Mobile Contact Form (Design Concept)

A simple form, accessible from any device, so visitors can send questions, special requests or event enquiries.

The forms are designed so the restaurant can easily adapt the questions to its needs (allergies, special occasions, celebrations, and more).

The page also allows for the inclusion of a phone number and email address for those who prefer more direct contact.

The entire architecture is designed to guide the user step by step, without losing them along the way.




Solution: a website that truly supports the real experience


With this new digital proposal, El Jardín moves from having a merely informative website to having a tool that:

  • Strengthens its brand and gastronomic positioning.

  • Reduces the effort required for guests to find what they need (menu, reservations, opening times, contact).

  • Increases the chances that a curious visit turns into a confirmed booking.

  • Serves as a foundation for adding new photos, videos and future gastronomic experiences.


More than a redesign, it is a digital staging aligned with what the restaurant already does so well beyond the screen.

Above all, it is designed to be a living website, easy for the restaurant team to update as the menu, the season or the experiences on offer evolve.

Ultimately, the experience now begins long before guests step through the restaurant door.

If your restaurant is in a similar place.

If you feel your website has fallen behind, that it no longer reflects the atmosphere of your dining room or the level of your cuisine, or that guests end up searching on social media because the site doesn’t give them what they need, you may need more than “just a new design”.

I can help you create a digital experience that:

  • Speaks the same language as your restaurant.

  • Brings together reservations, menu and contact into a natural, coherent journey.

  • Conveys the calm, taste and intention you bring to your work every day.


Your website can be much more than a business card: it can be the very first moment your future guests start to fall in love with your restaurant. And, as in this project, the idea is not just to design a beautiful website, but to build an integrated reservation and communication system that works in the reality of your restaurant’s day-to-day.

This is a concept project created to showcase my approach to designing digital experiences for premium restaurants and hotels. It is not an official site and should be understood purely as a design study.

Any third‑party media currently used as placeholders (images, videos or text) will be replaced by original or licensed material in any future live implementation. Rights to all referenced brands and assets remain with their respective owners. If you are the rights holder of any element shown here and have concerns about its use, please get in touch so I can address it immediately.

Comments


Commenting on this post isn't available anymore. Contact the site owner for more info.
bottom of page