Site web
Design de site web narratif sur un temple
Parcourez Kage, un temple de montagne imaginaire raconté à travers une architecture au clair de lune, de paisibles notes sur les jardins et des vues rapprochées du travail du bois.
LLM Arena sept. 2026
Notes de cas- Modèle
- Astra
- Tâche de design
- Créer une promenade nocturne cinématographique dans un temple de montagne imaginaire de Kyoto.
- Résultat
- Site web
Conçu pour
- Narration architecturalePrésentez un lieu à travers l’arrivée, l’espace et les détails des matériaux.
- Éditorial immersifAssociez une scène continue à de courtes sections de lecture au rythme maîtrisé.
- Études de design culturelExplorez un cadre imaginaire sans laisser entendre qu’il s’agit d’un lieu réel.
Points forts
- Cinq distances d’observation distinctesLe parcours va de l’arrivée aux jardins, puis à une vue rapprochée du travail artisanal.
- Scène et image fixeDes illustrations agrandissables ajoutent des détails à côté de l’architecture en direct.
- Une conclusion contemplativeL’action finale invite à refaire le parcours plutôt qu’à effectuer une réservation.
Explorez la promenade nocturne dans le temple
1 / 5
Un design de site web narratif sur un temple structuré autour d’une promenade nocturne
Kage présente un temple de montagne imaginaire de Kyoto sous une lune orange surdimensionnée. De grands caractères crème occupent la partie gauche, tandis que des fenêtres à la lumière chaleureuse et des marches en pierre conduisent vers l’architecture. La pluie, les surfaces bleu foncé et les touches de rouge discrètes installent l’atmosphère nocturne. Dès l’ouverture, le lieu est présenté comme imaginaire, avant même que le visiteur n’atteigne l’explication plus détaillée à la fin.
Les cinq chapitres font évoluer ce que le visiteur est invité à observer : l’arrivée, le seuil, le jardin, l’artisanat et la lueur persistante. L’arrière-plan est un environnement rendu continu, et non une photographie principale différente pour chaque section. À mesure que la caméra s’approche du bâtiment, le texte passe de l’entrée dans un lieu à l’observation de ses matériaux.
Des fenêtres chaleureuses dans un paysage froid
Les cloisons et les lanternes éclairées constituent les zones les plus chaleureuses de la scène. Elles attirent l’attention vers les entrées, les marches et les surfaces en bois, tandis que le paysage environnant reste plus discret. La lune reprend cette couleur chaude à une échelle bien plus grande, reliant le bâtiment au ciel plutôt que d’introduire une autre touche colorée sans rapport.
Un grand titre et une petite colonne de lecture
Le titre d’affichage s’étend sur plusieurs lignes courtes, mais le texte d’accompagnement reste dans un bloc étroit en dessous. Ces deux échelles remplissent des fonctions différentes : le titre instaure une ambiance, tandis que le court paragraphe nomme des détails comme le cèdre, la pierre et la lumière des lanternes, que l’on peut retrouver dans la scène.
Une sensation persistante de progression
Le rail latéral marque cinq étapes et les libellés au premier plan répètent le chapitre en cours. Des liens nommés en haut offrent un accès plus direct au temple, aux jardins et à l’artisanat. Grâce à ces repères, la page peut conserver une atmosphère visuelle sans demander au visiteur de déduire toute la navigation des mouvements de caméra.
Associer un temple rendu à des images fixes agrandissables
Les chapitres consacrés au seuil et à l’artisanat placent une petite image fixe dans la partie inférieure droite de la composition. Un signe plus centré et une légende de figure la distinguent de la scène plus grande située derrière. L’image fixe peut être ouverte séparément, offrant un autre niveau de détail visuel sans remplacer le contexte spatial du chapitre.
Dans la vue consacrée à l’artisanat, la scène en direct s’approche de la structure en bois éclairée, tandis que la vignette montre une composition plus paisible mêlant intérieur et jardin. Les deux images n’ont pas besoin de prétendre provenir de la même prise de vue. L’une permet au visiteur de se situer dans le parcours ; l’autre concentre l’attention sur les surfaces, la lumière et l’atmosphère.
Faites clairement reconnaître la petite image comme une action
Le signe plus est placé dans l’image plutôt qu’uniquement dans sa légende. L’invitation reste ainsi visible avant même la lecture du petit texte. La légende de figure numérotée apporte une tonalité éditoriale, mais sa taille signifie que l’image et le symbole doivent assurer l’essentiel de la perception de l’action possible.
Donnez au détail son propre espace de lecture
L’ouverture de l’image fixe la sépare de l’association visuellement chargée entre architecture, titre et pluie. Une commande de fermeture dédiée permet de revenir à la promenade. Pour une adaptation, les vérifications importantes concernent les dimensions de l’image en plein format, l’accès au clavier et la fiabilité du retour, et non une animation d’ouverture plus élaborée.
Ne confondez pas ambiance et documentation
Les images fixes font partie d’une présentation imaginaire. Une image convaincante de structure en bois ne constitue pas la démonstration d’une méthode de construction réelle ni d’un bâtiment existant. La description du lieu fictif donnée par la source fournit aux visuels le cadre approprié : ils étayent une étude de design, et non un relevé architectural.
Faire évoluer le rythme de l’arrivée à la lueur persistante
Kage n’ajoute aucune transaction à la fin de la promenade. Le chapitre final propose Walk once more, puis une section sur la philosophie du projet explique qu’il n’existe ni réservation ni destination à visiter. Ce choix est important : l’expérience peut employer le langage visuel d’un site web de destination sans induire le visiteur en erreur en lui faisant attendre un séjour réel.
| Chapitre | Point d’attention visible | Apport du texte |
|---|---|---|
| Arrivée | Temple, lune et chemin d’approche | Une invitation à entrer dans un lieu explicitement présenté comme imaginaire. |
| Seuil | Porte, marches et lumière chaleureuse | L’idée de passer de la ville à un cadre plus paisible. |
| Jardins | Gravier, pierre et mousse | De petites observations qui récompensent le ralentissement. |
| Artisanat | Bois et cloisons en papier éclairées | Des détails sur les matériaux plutôt qu’une nouvelle description générale du paysage. |
| Lueur persistante | Une vue finale et une action permettant de recommencer | Une conclusion contemplative qui clarifie la vocation non commerciale de l’expérience. |
Ce que comprend l’expérience du temple imaginaire
La source propose une promenade nocturne rendue localement, une navigation par chapitres, des commandes pour les images fixes et une explication finale. Les libellés de coordonnées, d’heure et de météo appartiennent à la présentation fictive ; ils ne constituent ni un service météo en direct ni des informations vérifiées sur un lieu. Aucun parcours de réservation ni résultat mesuré auprès des visiteurs n’est fourni. La galerie conserve des vues complètes des chapitres sous forme de séquence de scènes, et non de capture conventionnelle d’une page entière.
Comment créer un design de site web narratif sur un temple dans OpenDesign
Donnez un sujet différent à chaque chapitre
Décrivez ensemble le parcours et la séquence de lecture. L’arrivée peut montrer le bâtiment dans son ensemble, tandis que les chapitres suivants examinent le seuil, le jardin et les matériaux. Les changements de caméra ont ainsi une raison d’être qui va au-delà de l’affichage d’un autre angle séduisant.
Invite suggéréeCréez un design de site web narratif sur Kage, un temple de montagne de Kyoto explicitement présenté comme imaginaire. Utilisez un paysage nocturne bleu foncé, la lumière chaleureuse de cloisons en papier, des marches en pierre, une pluie discrète et une lune orange. Construisez cinq chapitres à faire défiler : arrivée, seuil, jardins, artisanat et lueur persistante. Placez de grands titres crème à gauche, avec de courts blocs de lecture en dessous ; gardez accessibles les numéros de chapitre et la navigation nommée. Passez d’une vue éloignée du temple aux détails du jardin et à la construction en bois éclairée. Ajoutez deux images fixes agrandissables avec des légendes de figure et des commandes de fermeture explicites. Terminez par une action permettant de recommencer le parcours et une courte explication précisant qu’il s’agit d’une expérience numérique fictive sans service de réservation. Veillez à ce que le texte reste lisible sur chaque scène et prévoyez un parcours avec mouvements réduits. Traitez les coordonnées, l’heure et la météo comme des libellés fictifs, et non comme des données en direct.
Examinez la scène et l’image fixe comme deux vues distinctes
Ouvrez chaque vignette et vérifiez que sa composition complète reste pertinente au grand format. Revenez au chapitre et confirmez que le titre, la vignette et la navigation active sont toujours cohérents. Intégrez les vues détaillées au récit plutôt que d’introduire une galerie d’images sans rapport.
Préservez la lisibilité au point le plus lumineux
Examinez en particulier le chapitre consacré à l’artisanat : les cloisons en papier à la lumière chaleureuse peuvent créer un arrière-plan lumineux derrière le texte crème. Ajustez délibérément la zone de texte ou le cadrage de la caméra. Lisez ensuite l’explication finale sans animation et vérifiez que la nature fictive du lieu reste parfaitement explicite.
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