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.
LLM Arena sep. 2026
Notas del caso- Modelo
- GPT 6 Sol
- Tarea de diseño
- Crear un recorrido nocturno multilingüe e interactivo por una Bianjing imaginada de la era Song.
- Resultado
- Sitio web
Diseñado para
- Sitios web de narrativa culturalConvierte la interpretación histórica en un recorrido digital atmosférico y navegable.
- Experiencias de exposiciones digitalesConecta una tipografía narrativa sobredimensionada con escenas, capítulos y estados locales adaptables.
- Reportajes editoriales interactivosExplora cómo un mundo fijo de Three.js puede sostener una historia extensa.
Aspectos destacados
- Ciudad fluvial persistenteUna ciudad animada permanece detrás de las cinco transiciones de capítulo.
- Orientación multilingüeLos controles en chino, inglés y japonés permanecen visibles durante todo el recorrido.
- De la poesía a los farolesUna línea china seleccionada pasa de la lectura al desenlace.
Vista previa del sitio web para recorridos nocturnos por Bianjing
1 / 6
Cómo el sitio web para recorridos nocturnos por Bianjing construye su mundo
Bianjing Night Tour Website Design presenta una noche imaginada en la Bianjing de la era Song mediante cinco capítulos conectados. Su interpretación cultural contemporánea toma el carácter urbano de Along the River During the Qingming Festival y los escenarios nocturnos de la poesía clásica. No es un recorrido real, un servicio de reservas ni una reconstrucción históricamente verificada.
El hero establece de inmediato el recurso central: “Sigue un río de luz de faroles durante una noche en Bianjing”. Una ciudad fluvial persistente de Three.js se sitúa detrás de la capa editorial, mientras que el indicador de capítulo, el control Day / Night y el selector de idioma hacen que la experiencia se lea como un único recorrido, no como cinco páginas inconexas.
La evidencia visual muestra un contraste deliberado entre una ciudad azul oscura, la cálida luz de las ventanas y una tipografía crema sobredimensionada. Esa escala proporciona a cada capítulo un registro emocional inconfundible, pero también reduce el espacio disponible para controles densos. Por ello, el diseño coloca los grupos de interacción debajo o junto a la afirmación principal, en vez de competir con ella.
Una interpretación contemporánea
La fuente identifica material pictórico de dominio público, versos clásicos de dominio público e ilustraciones inspiradas en la era Song creadas con IA. Estos elementos establecen una interpretación diseñada del lugar, no una prueba de que las calles, edificios o el recorrido representados existieran tal como se muestran.
Ese límite resulta útil para los equipos culturales: la experiencia puede tomar prestadas atmósferas visuales y poéticas, manteniendo explícito su encuadre. La nota final repite esa distinción al describir una imaginación contemporánea, en lugar de presentarse como representación de un lugar real.
Dónde encaja este patrón de narrativa cultural
Este caso resulta adecuado para organizaciones culturales, equipos editoriales y diseñadores de experiencias que desarrollan una narrativa digital guiada a partir de archivos visuales. Demuestra cómo explorar un lugar mediante secuencia, atmósfera y contexto interpretativo, en vez de recurrir a un mapa convencional o una página de destino.
Los cinco capítulos crean un modelo de ritmo útil. Los visitantes conocen primero la ciudad en la Puerta del Agua, cruzan el Puente Arcoíris, entran en el mercado, se detienen con la poesía junto al agua y terminan con los faroles que regresan. Cada parada cambia el sujeto, mientras la ciudad subyacente conserva la continuidad.
Interpretación guiada por el archivo
Usa una pintura de dominio público como referencia visual y rodéala de una nueva escena atmosférica. En el capítulo del mercado, la imagen de archivo aparece debajo de la escena activa mediante la ruta “Ver obra completa”, de modo que el material de archivo apoya la interpretación sin sustituirla.
Exposición basada en capítulos
Convierte una historia extensa en cinco momentos diferenciados y navegables. La navegación persistente 01–05 proporciona orientación, mientras que etiquetas de capítulo como “Té · Seda · El sonido de la calle” establecen un foco sensorial cambiante.
Lectura de poesía interactiva
Permite que los lectores seleccionen una línea, en lugar de tratar la poesía como decoración estática. El desenlace de los faroles del río lleva la línea probada “海上明月共潮生。” a un momento de liberación mayor, vinculando la lectura con la escena final.
Cómo cinco capítulos comparten una única ciudad animada
La página utiliza un único lienzo animado fijo con seis capturas a pantalla completa que representan el hero y los cinco capítulos. Una tira de navegación ligera se deriva de esa escena continua, mientras que la carga original de la galería permanece sin cambios. Esta estructura permite que la ciudad persista mientras avanza la capa editorial.
Los controles son intencionadamente estables. Chinese, EN y 日本語 permanecen en la navegación superior, junto a Day / Night y los números de capítulo. Los controles de idioma señalan un sistema de diseño multilingüe, mientras que la evidencia proporcionada no establece la integridad ni el comportamiento en tiempo de ejecución de cada traducción.
Capa estable
La ciudad fluvial y la navegación de capítulos conservan la orientación mientras el visitante cambia de foco.
Capa cambiante
La selección del mercado y de los faroles proporciona una respuesta local sin requerir una página nueva.
Capa editorial
Los titulares grandes y las descripciones breves de escena controlan el ritmo emocional de cada estado.
| Elemento observado | Efecto en el lector | Contrapartida |
|---|---|---|
| Escena fluvial persistente | Mantiene la continuidad espacial entre capítulos | Puede competir con el texto y los controles |
| Cuatro controles del mercado | Añade una relación local de causa y respuesta | Aumenta la densidad de interacción |
| Línea china seleccionada | Conecta la lectura con el desenlace | Requiere cuidado con el idioma y la legibilidad del estado |
De la puerta al puente
El primer capítulo sitúa al visitante en la Puerta del Agua, entre niebla, aleros superpuestos y una barca que emerge de la oscuridad. El segundo replantea el mismo río como un cruce: faroles en el Puente Arcoíris, barcas bajo él y siluetas en la cubierta. Reutilizar el agua hace legible la transición, mientras que el cambio de umbral a paso mantiene el relato en movimiento.
Estado del mercado y respuesta local
El capítulo del mercado introduce cuatro controles: Tea Seller, Silk Shop, Iron Flowers y Fireworks. El estado probado de Fireworks cambia el mensaje local, lo que muestra cómo una pequeña interacción puede alterar el significado de una escena estable. La contrapartida es la densidad: cuatro controles, texto explicativo y la escena visual compiten con el título de capítulo sobredimensionado.
Navegación del poema y regreso
El capítulo de poesía cambia el ritmo de la actividad callejera a la lectura atenta. Comienza con “Mooring by Maple Bridge at Night”, identifica a Zhang Ji y Tang, y ofrece controles de poema anterior y siguiente con una posición visible 1 / 4. La navegación continúa después hacia “Chant of the Evening River”, convirtiendo la poesía en una secuencia y no en una sola cita.
Qué demuestra el sitio web para recorridos nocturnos por Bianjing
El artefacto proporcionado es una experiencia digital guiada por el diseño, representada mediante capturas a pantalla completa de una escena fija de Three.js. Las capturas demuestran la composición visible, las etiquetas, el orden de los capítulos y estados probados como Fireworks y la línea seleccionada de los faroles del río. Por sí solas no demuestran servicios de backend, reservas, datos persistentes del usuario ni el comportamiento de una plataforma en producción.
El principal desafío de diseño consiste en equilibrar la atmósfera con la legibilidad. La tipografía editorial sobredimensionada hace memorables los capítulos y favorece un ritmo de lectura pausado, pero las áreas densas, como los controles del mercado y las tarjetas de poemas, necesitan suficiente contraste, espaciado y adaptación responsiva para seguir siendo legibles. El cambio entre día y noche y los controles multilingües deben evaluarse como estados de interfaz, no darse por supuestos debido a su presencia visual.
El panel de descubrimiento de faroles también modela una interpretación responsable. Señala explícitamente que un poema citado de Hangzhou no trata sobre Bianjing y ofrece el verso por sus arces ribereños, sus luces de pesca y su atmósfera nocturna en una barca. Esa nota conserva la asociación poética sin presentarla como evidencia geográfica.
Cómo crear un diseño de sitio web para recorridos nocturnos por Bianjing en OpenDesign
Define la escena continua
Construye un lienzo de ciudad fluvial que pueda sostener cinco encuadres de capítulo: Puerta del Agua, Puente Arcoíris, Mercado Nocturno, Poesía junto al agua y Desenlace de los faroles del río. Mantén persistentes el indicador de capítulo y los controles de idioma. Comprueba que cada encuadre tenga un sujeto distintivo, mientras el río, la luz de los faroles y la profundidad de la ciudad sigan conectando la secuencia.
Prompt sugeridoCrea un sitio web multilingüe de relato nocturno sobre una ciudad histórica imaginada. Usa una única escena fluvial persistente, al estilo de Three.js, detrás de cinco capítulos a pantalla completa: Puerta del Agua, Puente Arcoíris, Mercado Nocturno, Poesía junto al agua y Desenlace de los faroles del río. Incluye controles en chino, inglés y japonés, un control Day / Night, números de capítulo, titulares editoriales sobredimensionados y un área compacta de interacción local. Añade cuatro opciones de mercado —Tea Seller, Silk Shop, Iron Flowers y Fireworks—, con un mensaje local modificado para Fireworks. Añade un lector de poemas con cuatro posiciones y lleva una línea china seleccionada al estado final de los faroles. Trata toda la historia como una interpretación contemporánea, no como un recorrido real, un flujo de reservas ni una reconstrucción verificada. Mantén legible el texto visible con movimiento reducido y no presupongas almacenamiento en backend.
Ajusta la densidad de interacción
Usa el capítulo del mercado para comprobar el equilibrio entre atmósfera y acción. Mantén comprensibles los cuatro controles junto al título grande y haz que la respuesta probada de Fireworks sea claramente local, sin cambiar todo el recorrido. En el capítulo de poesía, muestra el título, la atribución, la posición 1 / 4 y la relación entre anterior y siguiente, sin permitir que la escala decorativa oculte el verso.
Revisa el recorrido de principio a fin
Revisa cada encuadre de capítulo en anchos de escritorio y reducidos. Verifica que el cambio de idioma conserve el capítulo actual, que la presentación con movimiento reducido mantenga legibles el contexto de la escena y los controles, y que una línea seleccionada siga siendo identificable al llegar al Desenlace de los faroles del río. Confirma que la nota sobre el poema de Hangzhou permanezca vinculada a su cita y que la obra de archivo se presente claramente como material de referencia.
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 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
Diseño web de restauración forestal
Explora Second Spring: una rama caída interactiva da paso a relatos del bosque, un plan de restauración y formas simuladas de colaborar.
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.
Sitio web