Sito web
Design di sito web per tour notturno di Kaifeng
Segui un fiume illuminato dalle lanterne attraverso i cinque capitoli di Bianjing After Dark, dalla porta della città e dal mercato notturno fino alla poesia e al lancio delle lanterne.
LLM Arena settembre 2026
Note sul caso- Modello
- Claude Opus 5.5
- Attività di design
- Crea un viaggio interattivo illuminato dalle lanterne attraverso una Bianjing immaginaria di epoca Song.
- Output
- Sito web
Pensato per
- Narrazione culturaleCollega scene, testi e piccole azioni attorno a un unico luogo.
- Mostre digitaliGuida i visitatori attraverso una sequenza tematica senza un funnel di prenotazione.
- Poesia interattivaPermetti a un verso selezionato di diventare parte di una scena successiva.
Caratteristiche principali
- Cinque capitoli lungo un unico fiumeUna scena urbana persistente collega la porta, il ponte, il mercato e il finale.
- Un verso che viaggiaLa poesia selezionata ricompare come messaggio personale sulla lanterna.
- Un cambio di ritmoGli effetti del mercato lasciano spazio a una lettura più raccolta prima dell'azione finale.
Esplora il tour notturno di Bianjing
1 / 5
Il design di un sito web per un tour notturno di Kaifeng narrato in cinque capitoli
Bianjing After Dark presenta una città immaginaria come un rotolo pittorico orizzontale notturno. L'apertura abbina caratteri cinesi di grandi dimensioni sulla sinistra a un fiume illuminato dalle lanterne, edifici in legno e riflessi. Accenti dorati e finestre illuminate risaltano sull'ambientazione blu scuro. L'invito principale è entrare nella sequenza, non cercare una destinazione o prenotare un tour.
Lo stesso mondo urbano e fluviale prosegue sullo sfondo dei capitoli successivi. Lo scorrimento modifica contemporaneamente la visuale e il testo in primo piano, mentre la navigazione superiore e la barra dei capitoli numerata rimangono disponibili. Ciò crea continuità tra la porta, il ponte, il mercato, la poesia e la scena conclusiva delle lanterne senza richiedere una pagina separata per ogni tappa.

La tipografia come parte della scena
I grandi titoli cinesi sono disposti in raggruppamenti verticali compatti, lasciando la parte più ampia dello schermo al fiume e agli edifici. Sotto il titolo iniziale compare il marchio in inglese, in dimensioni più ridotte. Le diverse scale stabiliscono un ordine di lettura senza cercare di attribuire a ogni lingua lo stesso peso visivo nel medesimo spazio.
Due modi per sapere dove ti trovi
La navigazione superiore indica le attività per nome, mentre la barra laterale destra numera i cinque capitoli. I nomi spiegano cosa contiene una tappa; i numeri ne indicano la posizione nella sequenza. Questo orientamento ripetuto è utile perché lo sfondo visivo è continuo e, altrimenti, potrebbe rendere difficile individuare i confini tra i capitoli.
La luce come motivo visivo ricorrente
Griglie di finestre, lanterne sospese e riflessi ripetono punti di luce calda in tutta la scena. L'azione finale di lancio utilizza lo stesso oggetto visibile fin dall'inizio. Appare come la conclusione della storia visiva già impostata, anziché come un effetto estraneo aggiunto alla fine.
Portare la poesia selezionata nella scena delle lanterne
Il capitolo dedicato alla poesia cambia la modalità di partecipazione. Invece di attivare un altro spettacolo del mercato, il visitatore sceglie una poesia e poi un verso. Il verso selezionato viene ripetuto in un'area separata per il messaggio e trasferito nella scena conclusiva. Questo piccolo elemento di stato collega due capitoli: la lettura produce una conseguenza visibile più avanti nel tour.
La fonte colloca l'attribuzione e la nota di contesto accanto alla poesia, non soltanto in una pagina dei crediti. Spiega che i versi dei Song meridionali sono ripresi per le loro immagini evocative delle notti illuminate dalle lanterne, anziché essere presentati come una testimonianza storica di Bianjing. Questa distinzione consente all'esperienza di usare una scrittura evocativa senza far passare un'associazione artistica per una prova documentaria.

Offri una scelta di lettura circoscritta
Due schede dedicate alle poesie mantengono la selezione abbastanza limitata da poter essere compresa a colpo d'occhio. Ogni poesia ha la propria attribuzione e il proprio contesto. Il visitatore non deve consultare un archivio né aprire una pagina di lettura separata per compiere una scelta significativa per questa breve esperienza.
Ripeti il verso scelto prima di continuare
L'area del messaggio ripropone il verso selezionato sotto la poesia. Si tratta di una conferma utile perché i versi cliccabili restano circondati dagli altri versi. L'azione per continuare può quindi condurre al capitolo delle lanterne con un testo specifico già selezionato.
Assegna al finale due azioni correlate
Il capitolo finale presenta una lanterna celeste e una lanterna fluviale accanto al messaggio trasferito. Entrambe sono coerenti con il mondo già definito, mentre le diverse direzioni le rendono scelte distinte. L'azione di riproduzione è separata, così ripetere il viaggio nella città non rischia di essere confuso con il lancio di un'altra lanterna.
Scandire il ritmo tra mercato notturno, poesia e scena conclusiva
Il capitolo del mercato è la tappa più dinamica. Offre effetti di fiori di ferro e fuochi d'artificio, un controllo per i richiami degli ambulanti e brevi storie associate al tè, alla seta e a una barca. Non sono tutte interazioni equivalenti: alcune modificano l'atmosfera, mentre altre cambiano il testo. Raggrupparle nel mercato conferisce alla varietà un'ambientazione riconoscibile.

| Capitolo | Invito principale | Ruolo nella sequenza |
|---|---|---|
| Porta e ponte | Entra nella città e scopri un verso poetico | Definisce il luogo e introduce l'interazione di lettura successiva. |
| Mercato notturno | Scegli uno spettacolo o una storia quotidiana | Aumenta l'attività mantenendo ogni azione legata all'ambientazione della strada. |
| Poesia | Leggi, scegli e porta con te un verso | Rallenta il ritmo e crea una piccola scelta persistente. |
| Lancio delle lanterne | Invia il messaggio scelto nella scena | Porta a compimento la selezione precedente attraverso un'azione conclusiva visibile. |
Un tour notturno artistico, non una ricostruzione storica
Questa è un'esperienza digitale immaginaria ispirata alle immagini delle città fluviali, alla poesia e all'immaginazione contemporanea. Le scene urbane non costituiscono una ricostruzione precisa e la fonte dichiara che le illustrazioni sono state create con l'IA. L'anteprima conserva le interazioni locali fornite; non aggiunge biglietteria, un itinerario reale o una mappa storica verificata. La galleria è un insieme ordinato di scene a scorrimento sottoposte a rendering, non una normale singola schermata dell'intero documento.
Come creare in OpenDesign il design di un sito web per un tour notturno di Kaifeng
Definisci il percorso prima di aggiungere gli effetti
Inizia con cinque finalità per i capitoli e un oggetto che li colleghi. Qui, le lanterne compaiono in tutta l'ambientazione, mentre un verso scelto conferisce al finale un significato specifico. Rendi esplicite queste relazioni nella prima richiesta.
Prompt suggeritoCrea il design di un sito web per un tour notturno di Kaifeng dedicato a un'esperienza immaginaria chiamata Bianjing After Dark. Usa una città fluviale continua, illuminata dalle lanterne, con acqua blu scuro, edifici in legno dai toni caldi e grandi titoli cinesi da esposizione. Organizza cinque capitoli a scorrimento: porta della città, ponte, mercato notturno, poesia e lancio delle lanterne. Mantieni in alto una navigazione con nomi e, sul lato, una barra dei capitoli numerata. Fai in modo che il mercato offra alcuni effetti visivi locali e brevi storie sul tè, sulla seta e sulle barche. Nel capitolo dedicato alla poesia, consenti al visitatore di selezionare un verso con attribuzione e mostralo di nuovo nel messaggio finale della lanterna. Aggiungi azioni separate per la lanterna celeste e la lanterna fluviale, oltre alla riproduzione del percorso. Indica chiaramente che l'opera è una rappresentazione artistica, non una ricostruzione storica né un vero servizio turistico. Quando il movimento è ridotto, mantieni un percorso di lettura leggibile attraverso i testi.
Segui il verso selezionato da un capitolo all'altro
Scegli un verso diverso, passa al finale e verifica che vi compaia lo stesso testo. Cambia poesia e ripeti la verifica. In questo modo si testa direttamente il collegamento narrativo, invece di trattare ogni capitolo come un effetto visivo indipendente.
Controlla il testo in ogni posizione della visuale
Esamina le scene del ponte, del mercato e della poesia con tutti i testi e i controlli visibili. Mentre la visuale si sposta, finestre luminose e riflessi possono trovarsi dietro righe diverse. Perfeziona lo sfondo o la cornice del testo senza appiattire l'intera scena con una sovrapposizione scura.
Esporta e ottieni un link di condivisione
Esporta il design completato, quindi usa Condividi in OpenDesign per ottenere un link di condivisione. Apri il link in una finestra del browser separata e verifica che la versione prevista e le sue risorse siano disponibili prima di inviarlo.



