Site web
Conception de site web de visite nocturne de Kaifeng
Suivez une rivière éclairée par des lanternes à travers cinq chapitres de Bianjing After Dark, de la porte de la ville et du marché nocturne jusqu’à la poésie et au lâcher de lanternes.
LLM Arena sept. 2026
Notes de cas- Modèle
- Claude Opus 5.5
- Tâche de design
- Créer un parcours interactif éclairé par des lanternes à travers un Bianjing imaginé de l’époque Song.
- Résultat
- Site web
Conçu pour
- Narration culturelleRelier scènes, textes et petites actions autour d’un même lieu.
- Expositions numériquesGuider les visiteurs à travers une séquence thématique sans tunnel de réservation.
- Poésie interactiveFaire d’un vers sélectionné un élément d’une scène ultérieure.
Points forts
- Cinq chapitres le long d’une même rivièreUne scène urbaine persistante relie la porte, le pont, le marché et la conclusion.
- Un vers qui voyageLe poème sélectionné réapparaît sous la forme d’une note personnelle sur une lanterne.
- Un changement de rythmeLes effets du marché cèdent la place à une lecture plus calme avant l’action finale.
Explorer la visite nocturne de Bianjing
1 / 5
Une conception de site web de visite nocturne de Kaifeng racontée en cinq chapitres
Bianjing After Dark présente une ville imaginée comme un rouleau peint nocturne. L’ouverture associe de grands caractères chinois à gauche à une rivière éclairée par des lanternes, à des bâtiments en bois et à des reflets. Les accents dorés et les fenêtres illuminées se détachent sur le décor bleu foncé. L’invitation principale consiste à entrer dans la séquence, non à rechercher une destination ou à réserver une visite.
Le même univers de ville fluviale se poursuit derrière les chapitres suivants. Le défilement modifie simultanément la caméra et le texte au premier plan, tandis que la navigation supérieure et la barre latérale de chapitres numérotés restent disponibles. Cela crée une continuité entre la porte, le pont, le marché, la poésie et la scène finale des lanternes, sans exiger une page distincte pour chaque étape.
La typographie comme partie intégrante de la scène
Les grands titres chinois sont disposés en regroupements verticaux compacts, laissant la plus grande partie de l’écran à la rivière et aux bâtiments. Une identité visuelle anglaise plus petite se trouve sous le titre d’ouverture. Leurs échelles différentes établissent un ordre de lecture sans chercher à donner à chaque langue le même poids visuel dans un espace identique.
Deux façons de savoir où l’on se trouve
La navigation supérieure nomme les activités, tandis que la barre de droite numérote les cinq chapitres. Les noms expliquent le contenu d’une étape ; les numéros indiquent sa position dans la séquence. Cette double orientation est utile, car l’arrière-plan visuel est continu et peut sinon rendre les limites entre chapitres difficiles à repérer.
La lumière comme motif visuel récurrent
Les grilles de fenêtres, les lanternes suspendues et les reflets répètent des points lumineux chaleureux dans toute la scène. L’action finale de lâcher de lanternes utilise le même objet, visible depuis le début. Elle ressemble ainsi à la conclusion de l’histoire visuelle établie, plutôt qu’à un effet sans rapport ajouté à la fin.
Reporter une sélection poétique dans la scène des lanternes
Le chapitre de poésie modifie la nature de la participation. Au lieu de déclencher un nouveau spectacle de marché, le visiteur choisit un poème, puis un vers. Le vers sélectionné est répété dans une zone de note distincte et reporté dans la scène finale. Ce petit état relie deux chapitres : la lecture produit plus tard une conséquence visible.
La source place une attribution et une note de contexte à côté du poème, et pas uniquement sur une page de crédits. Elle explique que les vers des Song du Sud sont empruntés pour leur imagerie de nuit éclairée par des lanternes, et non présentés comme un témoignage historique sur Bianjing. Cette distinction permet à l’expérience d’utiliser une écriture évocatrice sans faire passer une association artistique pour une preuve documentaire.
Proposer un choix de lecture délimité
Deux onglets de poèmes maintiennent la sélection à une taille compréhensible d’un seul regard. Chaque poème possède sa propre attribution et son propre contexte. Le visiteur n’a pas besoin de consulter une archive ni d’ouvrir une page de lecture distincte pour faire un choix important dans cette courte expérience.
Répéter le vers choisi avant de poursuivre
La zone de note reprend le vers sélectionné sous le poème. Cette confirmation est utile, car les lignes cliquables restent entourées d’autres vers. L’action de continuer peut ensuite conduire au chapitre des lanternes avec un texte précis déjà sélectionné.
Donner à la conclusion deux actions liées
Le chapitre final propose une lanterne céleste et une lanterne fluviale à côté de la note reportée. Toutes deux s’intègrent à l’univers établi, tandis que leurs directions différentes en font des choix distincts. L’action de relecture est séparée, afin que la répétition du parcours urbain ne soit pas confondue avec le lâcher d’une autre lanterne.
Rythmer le marché nocturne, la poésie et la scène finale
Le chapitre du marché est l’étape la plus active. Il propose des effets de fleurs de fer et de feux d’artifice, une commande d’appel de rue, ainsi que de courtes histoires associées au thé, à la soie et à un bateau. Ces interactions ne sont pas toutes équivalentes : certaines modifient l’atmosphère, tandis que d’autres modifient le texte. Les regrouper sous le marché donne à cette variété un cadre reconnaissable.
| Chapitre | Invitation principale | Rôle dans la séquence |
|---|---|---|
| Porte et pont | Entrer dans la ville et découvrir un vers de poésie | Établir le lieu et introduire l’interaction de lecture ultérieure. |
| Marché nocturne | Choisir un spectacle ou une histoire du quotidien | Accroître l’activité tout en reliant chaque action au cadre de la rue. |
| Poésie | Lire, choisir et conserver un vers | Ralentir le rythme et créer un petit choix persistant. |
| Lâcher de lanternes | Envoyer la note choisie dans la scène | Résoudre la sélection précédente par une action finale visible. |
Une visite nocturne artistique, pas une reconstitution historique
Il s’agit d’une expérience numérique fictive inspirée par l’imagerie des villes fluviales, la poésie et l’imagination contemporaine. Ses scènes urbaines ne constituent pas une reconstitution précise, et la source identifie ses illustrations comme créées par une IA. L’aperçu conserve les interactions locales fournies ; il n’ajoute ni billetterie, ni itinéraire réel, ni carte historique vérifiée. La galerie est un ensemble ordonné de scènes rendues au fil du défilement, et non une simple capture d’écran ordinaire de l’intégralité du document.
Comment créer une conception de site web de visite nocturne de Kaifeng dans OpenDesign
Définir le parcours avant d’ajouter des effets
Commencez par définir l’objectif de cinq chapitres et un objet qui les relie. Ici, les lanternes apparaissent dans tout le décor, tandis qu’un vers choisi donne une signification précise à la fin. Rendez ces relations explicites dès la première demande.
Invite suggéréeCréez une conception de site web de visite nocturne de Kaifeng pour une expérience fictive appelée Bianjing After Dark. Utilisez une ville fluviale continue éclairée par des lanternes, avec une eau bleu foncé, des bâtiments en bois aux tons chauds et de grands titres d’affichage chinois. Organisez cinq chapitres à faire défiler : porte de la ville, pont, marché nocturne, poésie et lâcher de lanternes. Conservez une navigation nommée en haut et une barre latérale de chapitres numérotés. Faites proposer au marché quelques effets visuels locaux ainsi que de courtes histoires sur le thé, la soie et les bateaux. Dans le chapitre de poésie, permettez au visiteur de sélectionner un vers attribué et de l’afficher à nouveau dans la note finale d’une lanterne. Ajoutez des actions distinctes pour une lanterne céleste et une lanterne fluviale, ainsi qu’une relecture. Indiquez clairement qu’il s’agit d’une création artistique, et non d’une reconstitution historique ou d’un véritable service de visite. Préservez un parcours de lecture compréhensible lorsque les animations sont réduites.
Suivre le vers sélectionné d’un chapitre à l’autre
Choisissez un autre vers, allez jusqu’à la fin et vérifiez que le même texte y apparaît. Modifiez le poème et répétez la vérification. Ce test évalue directement le lien narratif, au lieu de traiter chaque chapitre comme un effet visuel indépendant.
Vérifier le texte selon chaque position de caméra
Examinez les scènes du pont, du marché et de la poésie avec l’intégralité du texte et des commandes visibles. Les fenêtres lumineuses et les reflets peuvent se trouver derrière des lignes différentes lorsque la caméra se déplace. Affinez le fond ou le cadrage du texte sans aplatir toute la scène dans une superposition sombre.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception de site web de visite nocturne de Bianjing
Un voyage nocturne interactif à travers une Bianjing imaginaire de l’époque des Song, associant une ville fluviale persistante, la poésie, les lanternes et un rythme narratif multilingue par chapitres.
Site web
Design de site carrières
Huit scènes lunaires pour le site carrières Kimi : transitions au défilement et candidature illustrée.
Site web
Design de site portfolio créatif
Le portfolio fictif de Maya Rowan articule cartes de projets, pratique et notes.
Site web
Design de site web de restauration forestière
Découvrez Second Spring, où une branche tombée interactive mène à des récits de terrain en forêt, à un plan de restauration et à des moyens simulés de contribuer.
Site web