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.

OpenDesignDesign e produzione
Ufficiale
Narrazione culturale immersiva5 sezioni
Design di sito web per tour notturno di Kaifeng: fiume illuminato dalle lanterne e introduzione al tour notturno
Kaifeng-1 · Sequenza di scene acquisitaScreenshot 1 di 5

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.

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 scena iniziale completa abbina il titolo cinese da esposizione al fiume, alle luci della città e alla navigazione in cinque capitoli.
La scena iniziale completa abbina il titolo cinese da esposizione al fiume, alle luci della città e alla navigazione in cinque capitoli.

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.

La scena poetica completa affianca versi selezionabili e relativo contesto alla rappresentazione della città fluviale.
La scena poetica completa affianca versi selezionabili e relativo contesto alla rappresentazione della città fluviale.
  1. 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.

  2. 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.

  3. 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.

La scena del mercato riunisce controlli atmosferici e piccole storie quotidiane in una singola vista completa del capitolo.
La scena del mercato riunisce controlli atmosferici e piccole storie quotidiane in una singola vista completa del capitolo.
Come la sequenza dei capitoli cambia il ruolo del visitatore
CapitoloInvito principaleRuolo nella sequenza
Porta e ponteEntra nella città e scopri un verso poeticoDefinisce il luogo e introduce l'interazione di lettura successiva.
Mercato notturnoScegli uno spettacolo o una storia quotidianaAumenta l'attività mantenendo ogni azione legata all'ambientazione della strada.
PoesiaLeggi, scegli e porta con te un versoRallenta il ritmo e crea una piccola scelta persistente.
Lancio delle lanterneInvia il messaggio scelto nella scenaPorta 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

  1. Scarica e installa OpenDesign

    Scarica l'app desktop, installala e completa la configurazione. Crea un progetto per il tuo design.

    Scarica OpenDesign
  2. 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 suggerito

    Crea 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.

  3. 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.

  4. 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.

  5. 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.

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows