Sitio web
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.
LLM Arena sep. 2026
Notas del caso- Modelo
- Qwen 3.8 Max
- Tarea de diseño
- Página de destino de un restaurante local de hotpot con reserva
- Resultado
- Sitio web
Diseñado para
- Diseño de sitios web gastronómicosExplica una cocina regional mediante platos e imágenes específicos.
- Diseños de menús para restaurantesPresenta juntos los nombres, los detalles de preparación y los precios.
- Páginas de destino para hosteleríaPasa de una primera impresión a la planificación práctica de la visita.
Aspectos destacados
- Un plato principalUna tarjeta de caldo más grande y la etiqueta Imprescindible establecen el punto de partida.
- Cinco especialidades con precioLas descripciones de los ingredientes ayudan a los lectores a diferenciar las opciones del menú.
- Una galería fotográfica asimétricaEl salón, la comida compartida y la barra de salsas cumplen funciones visuales diferentes.
- Información de visita agrupadaLos horarios, el contexto de transporte y los datos de contacto aparecen uno junto a otro.
Explora el sitio web de hotpot
1 / 4
Un sitio web de hotpot que explica la comida
Yàn Huǒ presenta un restaurante ficticio de hotpot de Chongqing mediante una secuencia de información cada vez más práctica. Where Fire Meets Flavor ofrece la primera impresión. La etiqueta con el tipo de cocina y la ciudad establece el concepto. A continuación, el menú responde a una pregunta más útil: ¿qué pondría realmente alguien en la olla?
Este diseño de sitio web para restaurante de hotpot funciona mejor cuando el texto menciona los ingredientes y los detalles de preparación. El sebo de vacuno, los granos de pimienta identificados por su nombre y la carne de vacuno cortada tan fina como el papel comunican más que una promesa genérica de comida auténtica. Dan a las tarjetas del menú algo que explicar, mientras que los precios permiten a los visitantes comparar las cinco opciones destacadas sin abrir otra pantalla.
Haz que el caldo sea el punto de partida del menú
The Essentials no es una cuadrícula uniforme de platos intercambiables. Classic Chongqing Broth recibe una tarjeta más grande y la insignia Must Try. Las otras cuatro opciones se sitúan alrededor de ese elemento principal. Esto refleja cómo la página presenta una comida compartida de hotpot: se elige la base y después se conocen los ingredientes que la acompañan.
| Artículo | Detalle visible del menú | Por qué facilita la elección |
|---|---|---|
| Classic Chongqing Broth · $28 | Base de sebo de vacuno, ocho horas de cocción a fuego lento y especias identificadas por su nombre. | Explica el carácter de la base en lugar de depender de la palabra picante. |
| Premium Wagyu Beef · $38 | Lonchas tan finas como el papel y una sugerencia de cocción de ocho segundos. | Describe cómo se prepara y se utiliza el ingrediente en la mesa. |
| Wild Mushroom Platter · $18 | Enoki, seta de cardo, shiitake y oreja de Judas. | Hace que una fuente variada resulte más concreta que una simple etiqueta de categoría. |
| Seafood Selection · $32 | Langostinos, albóndigas de pescado, almejas y aros de calamar. | Muestra qué contiene la selección antes de que un comensal tenga que preguntar. |
| Beef Tripe · $16 | Una descripción de textura crujiente y tierna. | Ofrece un punto de referencia sensorial para un ingrediente desconocido. |
Conecta el menú, el ambiente del comedor y la información para la visita
Menu, Gallery y Visit son enlaces de navegación directa; Book a Table abre el acceso a la reserva. Por lo tanto, la página permite tanto una lectura completa como un acceso directo. Quien ya conozca la comida puede ir directamente a los horarios, mientras que alguien que no esté familiarizado con el concepto puede recorrer las secciones en orden.
Utiliza el tamaño de la galería para asignar una función a cada imagen
La imagen vertical del salón establece el entorno. Las imágenes más pequeñas muestran a personas alrededor de la olla y una barra de salsas, mientras que la imagen más ancha del caldo devuelve la atención a la comida. Esto resulta más informativo que repetir cuatro primeros planos similares, siempre que un restaurante real utilice fotografías que representen fielmente su espacio.
Coloca la información práctica en grupos paralelos
La sección de visita separa Hours, Find Us y Contact en tres columnas. Hours utiliza distintas horas de cierre para lunes–jueves, viernes–sábado y domingo. La dirección incluye información sobre el transporte. Estos datos responden a distintas preguntas de planificación y siguen siendo más fáciles de consultar cuando no están ocultos en un único párrafo.
Trata la reserva como una solicitud con un paso siguiente
El acceso a la reserva recopila los datos de la visita y de contacto. Sus campos visibles son un punto de partida, no una prueba de disponibilidad en tiempo real. Una adaptación para producción debe diferenciar entre enviar una solicitud y recibir una mesa confirmada, y debe explicar qué sucede cuando no se puede ofrecer la hora solicitada.
A qué renuncia la tarjeta de menú más grande
La tarjeta sobredimensionada del caldo otorga a la base un papel visual destacado, pero también hace que esta sección sea más alta que una lista de menú compacta. Esa contrapartida es visible en la captura de pantalla completa. Es adecuada para una presentación promocional, pero resulta menos eficiente para alguien que quiera comparar rápidamente muchos platos. Un menú de restaurante más extenso necesitaría un patrón más denso en lugar de repetir este tamaño de tarjeta para cada artículo.
Qué puede mostrar este prototipo de restaurante
Yàn Huǒ es contenido de muestra para un restaurante, no la ficha de un establecimiento real. Las afirmaciones sobre el menú, los precios, la dirección y los datos de funcionamiento pertenecen al prototipo y deben verificarse antes de usarlos en el mundo real. El formulario no crea una reserva ni envía un correo electrónico. Qwen 3.8 Max es la etiqueta del modelo proporcionada por el propietario; aquí no se afirma ningún número de generaciones, puntuación de referencia ni resultado comercial medido.
Cómo crear un diseño de sitio web para restaurante de hotpot en OpenDesign
Describe la comida antes que el estilo visual
Proporciona a OpenDesign un ejemplo de cocina, un plato principal y un menú breve con descripciones diferenciadas. El siguiente prompt nuevo utiliza la estructura de información de esta página sin afirmar que reproduce su historial de generación original.
Prompt sugeridoCrea un diseño de sitio web para un restaurante de hotpot ficticio de barrio. Utiliza una paleta oscura y cálida, y una fotografía de comida a todo lo ancho detrás de un titular breve con tipografía serif. Coloca encima una etiqueta con el tipo de cocina y la ciudad, y debajo una acción para reservar una mesa. Crea un menú de cinco especialidades con precios y descripciones específicas de los ingredientes. Asigna al caldo una tarjeta más grande y una insignia de Imprescindible, junto con otros cuatro platos más pequeños. Añade una galería asimétrica: una foto vertical del salón a la izquierda, dos fotos más pequeñas de la experiencia de los comensales en la parte superior derecha y, debajo, una foto ancha del hotpot. Agrupa Horarios, Cómo llegar y Contacto en columnas paralelas. Incluye un cuadro de diálogo de reserva con campos de visita y contacto. Mantén el menú legible en teléfonos y etiqueta todos los datos del establecimiento y las respuestas de reserva como contenido ficticio de demostración, sin integración con un restaurante real.
Revisa el menú a tamaño completo y con ancho de teléfono
Compara la tarjeta destacada del caldo con los otros cuatro platos más pequeños. Pide a OpenDesign que conserve los nombres, las descripciones y los precios sin depender de texto recortado. En teléfonos, mantén junta la información relacionada y acorta la disposición vertical si la tarjeta principal retrasa el acceso a todos los demás platos.
Conecta la información de la visita con un estado de reserva claro
Revisa los horarios entre semana y de fin de semana junto a las horas de reserva ofrecidas. Especifica errores para los campos obligatorios, un cuadro de diálogo que pueda cerrarse y una confirmación explícita de demostración. Antes de adaptarlo para un establecimiento real, confirma su dirección, precios, imágenes y proveedor de reservas.
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 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.
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