Site web
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.
LLM Arena sept. 2026
Notes de cas- Modèle
- GPT 6 Sol
- Tâche de design
- Créer un voyage nocturne multilingue et interactif à travers une Bianjing imaginaire de l’époque des Song.
- Résultat
- Site web
Conçu pour
- Sites web de narration culturelleTransformez l’interprétation historique en un parcours numérique atmosphérique et navigable.
- Expériences d’exposition numériqueReliez une typographie narrative surdimensionnée à des scènes, des chapitres et des états locaux réactifs.
- Fonctionnalités éditoriales interactivesExplorez comment un univers Three.js fixe peut porter un récit long format.
Points forts
- Ville fluviale persistanteUne ville animée reste présente derrière les cinq transitions de chapitre.
- Orientation multilingueLes contrôles en chinois, en anglais et en japonais restent visibles tout au long du parcours.
- De la poésie aux lanternesUne ligne chinoise sélectionnée accompagne le lecteur de la lecture jusqu’à la conclusion.
Aperçu du site web de visite nocturne de Bianjing
1 / 6
Comment le site web de visite nocturne de Bianjing construit son univers
La conception du site web de visite nocturne de Bianjing présente une nuit imaginaire dans la Bianjing de l’époque des Song à travers cinq chapitres reliés. Son interprétation culturelle contemporaine puise son caractère urbain dans Le Jour de la fête de Qingming au bord de la rivière et dans les décors nocturnes de la poésie classique. Il ne s’agit ni d’une véritable visite, ni d’un service de réservation, ni d’une reconstitution historiquement vérifiée.
Le héros établit immédiatement le dispositif central : « Suivez une rivière de lumière de lanternes jusqu’à une nuit à Bianjing. » Une ville fluviale persistante en Three.js se tient derrière la couche éditoriale, tandis que l’indicateur de chapitre, le contrôle Day / Night et le sélecteur de langue font lire l’expérience comme un seul voyage plutôt que comme cinq pages sans lien.
Les éléments visuels montrent un contraste délibéré entre une ville bleu sombre, la lumière chaude des fenêtres et une typographie crème surdimensionnée. Cette échelle donne à chaque chapitre une tonalité émotionnelle reconnaissable, mais réduit aussi l’espace disponible pour les contrôles denses. La conception place donc les groupes d’interaction sous ou à côté de l’énoncé principal, au lieu de lui faire concurrence.
Une interprétation contemporaine
La source identifie des éléments picturaux du domaine public, des vers classiques du domaine public et des illustrations inspirées des Song créées par IA. Ces ingrédients établissent une interprétation conçue du lieu, et non la preuve que les rues, les bâtiments ou le voyage représentés ont existé tels qu’ils sont montrés.
Cette limite est utile aux équipes culturelles : l’expérience peut emprunter des atmosphères visuelles et poétiques tout en explicitant son cadre. La note finale répète cette distinction en décrivant une évocation contemporaine plutôt qu’en se substituant à un lieu réel.
Dans quels contextes ce modèle de narration culturelle trouve sa place
Ce cas convient aux organisations culturelles, aux équipes éditoriales et aux concepteurs d’expériences qui développent un récit numérique guidé à partir d’archives visuelles. Il montre comment explorer un lieu par la séquence, l’atmosphère et le contexte interprétatif plutôt que par une carte conventionnelle ou une page de destination.
Les cinq chapitres créent un modèle de rythme utile. Les visiteurs rencontrent d’abord la ville à la Porte de l’Eau, traversent le Pont arc-en-ciel, entrent dans le marché, s’arrêtent avec la poésie au bord de l’eau et terminent avec le retour des lanternes. Chaque étape modifie le sujet tandis que la ville sous-jacente préserve la continuité.
Interprétation guidée par les archives
Utilisez une peinture du domaine public comme référence visuelle tout en l’entourant d’une nouvelle scène atmosphérique. Dans le chapitre du marché, l’image source apparaît sous la scène active via le parcours « View full artwork », afin que le matériau d’archive soutienne l’interprétation sans la remplacer.
Exposition structurée en chapitres
Transformez un récit long format en cinq moments distincts et navigables. La navigation persistante 01–05 fournit un repère, tandis que des intitulés comme « Tea · Silk · The Sound Of The Street » installent un point de mire sensoriel changeant.
Lecture de poésie interactive
Laissez les lecteurs sélectionner une ligne plutôt que de traiter la poésie comme une simple décoration statique. La conclusion avec les lanternes fluviales emporte la ligne testée « 海上明月共潮生。 » vers un moment de libération plus ample, reliant la lecture à la scène finale.
Comment cinq chapitres partagent une même ville animée
La page utilise une seule toile animée fixe avec six captures en plein écran représentant le héros et les cinq chapitres. Une bande de navigation légère est dérivée de cette scène continue, tandis que l’importation originale de la galerie reste inchangée. Cette structure permet à la ville de persister tandis que la couche éditoriale progresse.
Les contrôles sont volontairement stables. Chinese, EN et 日本語 restent dans la navigation supérieure, aux côtés de Day / Night et des numéros de chapitre. Les contrôles de langue signalent un système de conception multilingue, tandis que les éléments fournis ne permettent pas d’établir l’exhaustivité ni le comportement à l’exécution de chaque traduction.
Couche stable
La ville fluviale et la navigation des chapitres préservent l’orientation tandis que le visiteur change de point d’attention.
Couche changeante
La sélection du marché et celle des lanternes produisent une réponse locale sans nécessiter de nouvelle page.
Couche éditoriale
Les grands titres et les courtes descriptions de scène contrôlent le rythme émotionnel de chaque état.
| Élément observé | Effet sur le lecteur | Compromis |
|---|---|---|
| Scène fluviale persistante | Maintient la continuité spatiale entre les chapitres | Peut concurrencer les textes et les contrôles |
| Quatre contrôles du marché | Ajoute une relation locale de cause à effet | Augmente la densité d’interaction |
| Ligne chinoise sélectionnée | Relie la lecture à la conclusion | Nécessite une attention particulière à la lisibilité de la langue et de l’état |
De la Porte au Pont
Le premier chapitre place le visiteur à la Porte de l’Eau, avec de la brume, des avant-toits superposés et une embarcation surgissant de l’obscurité. Le deuxième recadre le même fleuve comme un lieu de traversée : lanternes sur le Pont arc-en-ciel, bateaux dessous et silhouettes sur le pont. La réutilisation de l’eau rend la transition lisible, tandis que le passage du seuil à la traversée fait avancer le récit.
État du marché et retour local
Le chapitre du marché introduit quatre contrôles : Tea Seller, Silk Shop, Iron Flowers et Fireworks. L’état Fireworks testé modifie le message local, montrant comment une petite interaction peut changer le sens d’une scène stable. Le compromis concerne la densité : quatre contrôles, un texte explicatif et la scène visuelle rivalisent tous avec le titre de chapitre surdimensionné.
Navigation du poème et retour
Le chapitre de poésie modifie le rythme, passant de l’activité de la rue à une lecture rapprochée. Il commence par « Amarrage près du pont aux érables, la nuit », identifie Zhang Ji et les Tang, et propose des contrôles de poème précédent et suivant avec une position visible 1 / 4. La navigation se poursuit ensuite vers « Chant du fleuve du soir », faisant de la poésie une séquence plutôt qu’une citation unique.
Ce que démontre le site web de visite nocturne de Bianjing
L’artefact fourni est une expérience numérique guidée par la conception, représentée par des captures en plein écran d’une scène Three.js fixe. Les captures prouvent la composition visible, les intitulés, l’ordre des chapitres et des états testés tels que Fireworks et la ligne de lanternes fluviales sélectionnée. Elles ne prouvent pas à elles seules l’existence de services côté serveur, d’une réservation, de données utilisateur persistantes ou d’un comportement de plateforme en production.
Le principal défi de conception consiste à équilibrer l’atmosphère et la lisibilité. La typographie éditoriale surdimensionnée rend les chapitres mémorables et soutient un rythme de lecture lent, mais les zones denses comme les contrôles du marché et les cartes de poèmes ont besoin de suffisamment de contraste, d’espacement et d’adaptation réactive pour rester lisibles. Le changement jour/nuit et les contrôles multilingues doivent être évalués comme des états d’interface, et non déduits de leur seule présence visuelle.
Le panneau de découverte des lanternes modélise également une interprétation responsable. Il précise explicitement qu’un poème cité de Hangzhou ne porte pas sur Bianjing, et propose les vers pour leur évocation des érables fluviaux, des lumières de pêche et d’une nuit sur une embarcation. Cette note préserve l’association poétique sans la présenter comme une preuve géographique.
Comment créer une conception de site web de visite nocturne de Bianjing dans OpenDesign
Définir la scène continue
Construisez une seule toile représentant une ville fluviale, capable d’accueillir cinq cadrages de chapitre : Porte de l’Eau, Pont arc-en-ciel, Marché nocturne, Poésie au bord de l’eau et Final des lanternes fluviales. Conservez l’indicateur de chapitre et les contrôles de langue persistants. Vérifiez que chaque cadrage possède un sujet distinct, tandis que le fleuve, la lumière des lanternes et la profondeur de la ville continuent de relier la séquence.
Invite suggéréeCréez un site web narratif nocturne multilingue consacré à une ville historique imaginaire. Utilisez une scène fluviale persistante de style Three.js derrière cinq chapitres en plein écran : Porte de l’Eau, Pont arc-en-ciel, Marché nocturne, Poésie au bord de l’eau et Final des lanternes fluviales. Intégrez des contrôles en chinois, en anglais et en japonais, un contrôle Day / Night, des numéros de chapitre, des titres éditoriaux surdimensionnés et une zone d’interaction locale compacte. Ajoutez quatre choix de marché — Tea Seller, Silk Shop, Iron Flowers et Fireworks — avec un message local modifié pour Fireworks. Ajoutez un lecteur de poèmes avec quatre positions, puis reportez une ligne chinoise sélectionnée dans l’état final des lanternes. Présentez toute l’histoire comme une interprétation contemporaine, et non comme une véritable visite, un parcours de réservation ou une reconstitution vérifiée. Gardez les textes visibles lisibles en mode mouvement réduit et n’assumez pas l’existence d’un stockage côté serveur.
Affiner la densité de l’interaction
Utilisez le chapitre du marché pour tester l’équilibre entre atmosphère et action. Gardez les quatre contrôles compréhensibles à côté du grand titre et faites en sorte que la réponse testée de Fireworks soit clairement locale, sans modifier l’ensemble du voyage. Dans le chapitre de poésie, affichez le titre, l’attribution, la position 1 / 4 et la relation précédent/suivant, sans laisser l’échelle décorative masquer les vers.
Vérifier le parcours de bout en bout
Examinez chaque cadrage de chapitre sur ordinateur et aux largeurs étroites. Vérifiez que le changement de langue conserve le chapitre actuel, que la présentation en mouvement réduit maintient le contexte de la scène et la lisibilité des contrôles, et qu’une ligne sélectionnée reste identifiable lorsqu’elle atteint le Final des lanternes fluviales. Confirmez que la note sur le poème de Hangzhou reste attachée à sa citation et que les œuvres d’archives sont clairement présentées comme des sources.
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.
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
Design de site pour restaurant de fondue chinoise
Yàn Huǒ présente la fondue chinoise à travers un menu de spécialités avec prix, une galerie de la salle et des informations pratiques avant la réservation.
Site web