Sitio web
Diseño de sitio web de reservas para restaurantes
Ember & Pepper combina platos de la casa e información para la visita con un cuadro de diálogo de reserva para quienes estén listos para reservar.
LLM Arena sep. 2026
Notas del caso- Modelo
- GPT 5.6 Sol
- Tarea de diseño
- Página de destino de un restaurante local de hot pot con reserva
- Resultado
- Sitio web
Diseñado para
- Sitios web de restaurantesConecta la comida, el ambiente y la información práctica para la visita.
- Interfaces de reservaDiseña un acceso a la reserva sin ocultar el contexto del restaurante.
- Identidad de marca para hosteleríaTransmite una identidad gastronómica regional mediante los titulares y las imágenes.
Aspectos destacados
- Dos puntos de entrada en la sección principalReserva de inmediato o explora el menú antes de decidirte.
- Tres platos de la casaLas entradas numeradas presentan el caldo, la ternera y una selección de verduras.
- Un bloque práctico para la visitaEl horario, la última hora para sentarse y los datos de ubicación aparecen junto a la reserva.
- Cuadro de diálogo de reserva contextualRecopila la solicitud de visita sin navegar a otra página.
Explora el sitio web del restaurante
1 / 4
Un sitio web de restaurante con dos puntos de partida
Ember & Pepper comienza con una fotografía de hot pot y Heat with a heartbeat. La frase aporta ambiente; la etiqueta más pequeña Chongqing Born · New York Fired explica el concepto gastronómico y la ubicación. Separar esas funciones permite que la página mantenga un titular memorable sin obligar a un nuevo visitante a adivinar qué sirve el restaurante.
En la sección principal aparecen juntas dos acciones: Reserve your table y Explore the menu. Responden a distintos grados de disposición. Un cliente habitual puede abrir de inmediato el cuadro de diálogo de reserva, mientras que alguien que esté eligiendo restaurante puede examinar primero la comida. La misma acción Reserve también aparece en la navegación, y Book dinner vuelve a mostrarse cerca de la información para la visita.
Presenta el menú sin fingir que está completo
Born for the broth presenta tres platos de la casa numerados en lugar de un menú completo para pedir. Cada entrada explica una función dentro de la comida: una base, un corte de carne o una selección equilibrada de setas y verduras de hoja. La sección puede ayudar a entender el restaurante, pero no ofrece información suficiente para calcular la cuenta de una cena.
| Entrada del menú | Información específica | Qué queda sin responder |
|---|---|---|
| 01 · Nine-Spice Red Broth | Sebo de ternera, chiles tostados y granos verdes de pimienta de Sichuan; etiquetado como House signature. | La página no especifica un nivel de picante seleccionable ni el precio de la porción. |
| 02 · Hand-Cut Marbled Beef | Cortes finos y una sugerencia de cocción de ocho segundos; etiquetado como Market cut. | El comensal aún necesita conocer el tamaño real de la porción y el precio. |
| 03 · Mountain Mushroom Basket | Setas, raíz de loto y verduras de hoja; etiquetado como From the market. | La descripción del plato por sí sola no determina si es adecuado para una dieta concreta o en relación con los alérgenos. |
Sitúa la información para la visita cerca del acceso a la reserva
Meet us downtown pasa de la expresión de marca a la logística. El bloque de visita ofrece dos intervalos de apertura y una regla independiente sobre la última hora para sentarse. Que la última hora para sentarse sea 45 minutos antes del cierre es importante, porque una hora de apertura no equivale a una hora de reserva disponible. Situar esta distinción cerca de Book dinner ayuda al comensal a formular una consulta mejor informada.
Repite una acción cuando el lector disponga de un contexto nuevo
La acción de reserva de la sección principal aparece antes del menú. Book dinner aparece después de las secciones de comida y ambiente, cuando el visitante dispone de más información. Es una repetición útil: la acción vuelve a aparecer en un punto de decisión, en lugar de exigir un largo desplazamiento de vuelta a la primera pantalla.
Usa un cuadro de diálogo para una solicitud acotada
La interfaz de reserva solicita datos de la visita y de contacto mientras mantiene detrás la página del restaurante. Un campo de fecha y selectores de hora y número de comensales proporcionan controles adecuados para distintos tipos de información. Un diseño para producción también tendría que explicar la disponibilidad, la validación y lo que ocurre después de enviar la solicitud.
Haz que los pies de foto del ambiente se correspondan con las imágenes reales
La sección The Room utiliza una cuadrícula fotográfica asimétrica y pies de foto sobre una iluminación cálida, reuniones alrededor de la mesa y caldo rojo. Varias fotos son primeros planos de comida en lugar de vistas literales del comedor. El diseño aporta variedad, pero un restaurante real debe usar imágenes que respondan a la pregunta que plantea cada pie de foto. Quien quiera ver el espacio necesita ver el espacio, no otro plato atractivo.
Prototipo de reserva, no un servicio de restaurante en funcionamiento
Ember & Pepper es la identidad de un restaurante ficticio. Su dirección, número de teléfono y datos operativos son contenido de muestra, como indica la propia página. El cuadro de diálogo de reserva es una demostración local de front-end y no crea ninguna reserva, no consulta la capacidad en tiempo real ni envía un correo electrónico de confirmación. La etiqueta GPT 5.6 Sol identifica la exportación de evaluación proporcionada, no una puntuación de rendimiento verificada.
Cómo crear un diseño de sitio web de reservas para restaurantes en OpenDesign
Define el recorrido del comensal y el acceso a la reserva
Indica a OpenDesign qué datos necesita un comensal que visita el sitio por primera vez antes de reservar y qué acción puede realizar de inmediato un cliente habitual. Este prompt de ejemplo describe un prototipo nuevo basado en el patrón visible.
Prompt sugeridoCrea un diseño de sitio web de reservas para un restaurante ficticio de hot pot de Chongqing. Empieza con una fotografía de comida a todo lo ancho, una etiqueta breve con el tipo de cocina y la ciudad, y un gran titular serif de dos líneas. Coloca Reservar una mesa junto a Explorar el menú para que los comensales puedan elegir entre reservar y obtener más información. A continuación, incluye tres platos de la casa numerados que describan el caldo, una selección de ternera y una cesta de setas. Añade una galería asimétrica del ambiente con fotografías que se correspondan con sus pies de foto. Agrupa el horario de apertura, la política sobre la última hora para sentarse, la dirección y el teléfono cerca de otra acción de reserva. La acción Reservar debe abrir un cuadro de diálogo con un campo de fecha, un selector de hora, un selector del número de comensales y campos de contacto. Incluye estados vacío, no válido y enviado localmente. Identifica los datos del restaurante y el envío como contenido de demostración; no des a entender que hay disponibilidad real ni que se ha completado una reserva en el restaurante.
Haz explícitos los estados de la reserva
Pide a OpenDesign que muestre un formulario vacío, un error por campos sin completar y una respuesta de demostración claramente identificada. Conserva los valores introducidos cuando falle la validación. Especifica que la tecla Escape debe cerrar el cuadro de diálogo y que el foco debe volver al botón que lo abrió.
Revisa la información antes de la acción de reserva
Comprueba que la hora de cierre y la última hora para sentarse no contradigan las franjas horarias ofrecidas. Sustituye los datos comerciales de muestra solo después de confirmarlos. Usa una ventana gráfica estrecha para asegurarte de que el cuadro de diálogo permita desplazarse y que sus controles de confirmación y cierre sigan siendo accesibles.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de sitio web para restaurante de hotpot
Yàn Huǒ presenta el hotpot mediante un menú de especialidades con precios, una galería del comedor e información para la visita antes de reservar.
Sitio web
Diseño de sitio web para recorridos nocturnos por Bianjing
Un recorrido nocturno interactivo por una Bianjing imaginada de la era Song, que combina una ciudad fluvial persistente, poesía, faroles y un ritmo de capítulos multilingüe.
Sitio web
Diseño de sitio web de empleo
Un estudio de empleo de Kimi construido a partir de ocho escenas lunares, con transiciones vinculadas al desplazamiento y un proceso de solicitud ilustrado.
Sitio web
Diseño de portafolio creativo
El portafolio ficticio de Maya Rowan conecta proyectos, métodos de trabajo y notas.
Sitio web