2023-2024
︎Award | Case Study | Web Development | UI&UX | Tapestry
Institution: Cité internationale de la tapisserie d’Aubusson (UNESCO)
Role: Creative Director, Product Desinger, Web Developer, Illustrator
Vertu Maris
Open Call 2023-2024 « Les images déferlantes-Nouvelles figurations, récits tissés »The Verdu-maris project was designed for the Cité internationale de la tapisserie d’Aubusson (UNESCO) as part of the open project call "Les images déferlantes - Nouvelles figurations, récits tissés," focusing on the theme "Metaverse and Greenery."
The project selected and awarded, which features a massive tapestry narrating an ancient fictional prophecy. Combining endless scroll paintings and multi-act plays, the audience can reveal the story through digital scrolling.
The prophecy consists of 6 scenes, each corresponding to a poem; The project includes 3 main components:
- 6 x 2m x 1m illustrations for subsequent tapestry production.
- 1 x Interactive panoramic website.
- 6 x 360 AR/VR experience websites accessible through VR headsets.
The project aims to create a virtual world that transcends time and space by integrating modern digital technology with traditional art forms. Inspired by Aubusson's architecture and lifestyle, it merges these elements with an imaginary underwater city, creating a mysterious and dramatic future urban landscape that bridges the gap between land and sea.
#MetaverseGreenery #FictionalProphecy #WebToon #WebApp #360Panorama #AR/VR #FuturisticLandscape #UnderWater #FascinatingCreature #Mystical #Dramatic
Understand
︎Background Research
To better understand the history and technology of tapestries and the expectations of locals regarding new technologies, the metaverse, and augmented reality experiences, I made several trips to Aubusson, including:
︎Field Visits:
Conducted in-depth interviews with potential users (locals, nearby residents, museum visitors, staff, etc.) to understand their knowledge of tapestry technology and history, as well as their needs and expectations for new technologies and AR/VR experiences. Documented and analyzed their interest in digital scroll stories and virtual reality content.︎Diary Studies:
Recorded impressions of the journey, cityscape, and culture through text, illustrations, photos, and videos.︎Usability Testing:
Conducted multiple rounds of usability testing during the project's development to ensure the design and technology met user needs, continually improving based on feedback.
︎Pain Points:
- Difficulty observing tapestry details up close due to preservation factors.
-
Limited ability to view the tapestry from various angles because of its large size.
-
Existing apps provide extensive historical explanations that are hard to grasp on-site.
- Apps and web introductions lack interactivity and are too static
.
︎Inspiration
Cave & City Panorama
“My project aims to sketch a futuristic urban landscape that blends underwater and aerial elements, inspired by the city of Aubusson. By combining the city's current architecture, lifestyle, and urban flora and fauna with a fictional vision of a future underwater city, we will explore a variety of fascinating marine plants and creatures, such as medicinal algae and flying oysters, and the interactions between aquatic and terrestrial life.”
Ideation
︎Information Architecture
Define the platforme size and Illustrate user interaction processes on the website and AR/VR experiences, ensuring smooth and uninterrupted user operations.
︎Wireframes and Prototypes
Illustrate user interaction processes on the website and AR/VR experiences, ensuring smooth and uninterrupted user operations. Quickly establish the sketch, layout and functionality of the website and AR/VR
Design-Projet Deliverables:
︎The Verdu-maris project includes three main components:
︎1. 6 Tapestry Illustrations:
Six 2m x 1m illustrations, each named after a biological plant, showcasing the integration of future urban landscapes and the fictional underwater city. These illustrations will be used for subsequent tapestry production.
︎Story Setting and Development
The Verdu-maris project involves creating an ancient fictional prophecy by blending collected information, historical context, and local culture. Here's how the project is structured and developed:
︎ Ancient fictional prophecy: Vertu - Maris
The project begins with the creation of an ancient fictional prophecy titled "Verdu-maris." This prophecy weaves together the historical and cultural elements of Aubusson with imaginative storytelling, creating a rich narrative that serves as the foundation for the project's scenes.
︎ Imagining and Visualizing Scenes
Using the prophecy's story, each scene is extended and visualized, drawing inspiration from the narrative. The scenes are carefully imagined to capture the essence of the prophecy, incorporating elements that reflect the local culture and environment of Aubusson.
︎Naming and Inspirations
Each scene is given a meaningful name that reflects its significance within the prophecy. These names are often derived from Latin or Greek, connecting the scene's imagery to its symbolic meaning.
Verdu-maris:
Derived from the Latin "viridis" (green) and "maris" (of the sea), refers to vegetation or marine organisms characterized by a green color.
Spiralis:
From the Latin "spira" (spiral), refers to objects or organisms with a helical or spiral shape.
Anthozoa:
From the Greek "anthos" (flower) and "zōion" (animal), is a class of marine invertebrates including corals and anemones, characterized by a flower-like structure.
Flumen:
From the Latin "flumen" (river), refers to a large watercourse, often a major tributary.
Laminaria:
From the Latin "lamina" (thin sheet), is a genus of marine algae characterized by long, thin, and flexible fronds.
Malus:
From the Latin "malum" (apple), is a genus of plants in the Rosaceae family, including apple species.
Mollusca:
From the Latin "molluscus" (soft), is a phylum of invertebrate animals including snails, mussels, and squids, characterized by their soft bodies.
︎6 Scenes of prophecy, each corresponding to a poem:
Created visual appeal while ensuring readability, enabled users to intuitively find necessary functions and information:
︎ Using Local Elements
All elements used in the scenes are sourced from real details found in the city of Aubusson. This includes architectural features, natural elements, and cultural artifacts, ensuring that each scene is deeply rooted in the local reality.︎ Writing Inspirational Poetry
For each scene, a poem is written, inspired by the journey and the emotional experiences encountered along the way. These poems capture the essence of the scene's imagery and intention, providing a poetic narrative that complements the visual elements.Clicking on the luminous weaving combreveals introductory verses and the inspiration behind each scene, blurring the lines between reality and imagination.
︎Chapter 1. Spiralis (Latin for "spiral")
Among tendrils and waves,
The city dances, intertwines,
Veiled in mystery.
This scene depicts the intertwining of past and future, with spirals symbolizing the continuity of time. Elements of Aubusson's ancient architecture and modern life are blended, reflecting the prophecy's timeless nature.
︎Chapter 2. Anthozoa (Greek for "flower animal")
Coral blooms, city watches,
Loom turns green,
Sea weaves its web.
This scene portrays a vibrant underwater garden inspired by Aubusson's flora and fauna. The flower-like marine creatures symbolize the beauty and fragility of life.
︎Chapter 3. Flumen (Latin for "river")
Leaves whisper,
Waves of greenery dance,
Golden light flees.
This scene features a majestic river flowing through a futuristic cityscape, inspired by Aubusson's waterways. The river represents the flow of life and the connection between land and water.
︎Chapter 4. Laminaria (Latin for "thin sheet")
Nature weaves streets,
Underwater garden emerges,
Houses as spectators.
This scene captures the elegance of underwater kelp forests, symbolizing knowledge and hidden mysteries. The design incorporates thin, flowing elements inspired by Aubusson's natural surroundings.
︎Chapter 5. Malus (Latin for "apple")
Shells near the roots,
Land and sea unite,
Forest of wonders.
This scene showcases an enchanted orchard, with apple trees representing wisdom and knowledge. Elements from Aubusson's gardens and parks are integrated into the design.
︎Chapter 6. Mollusca (Latin for "soft")
In shell, the loom,
Marine fabric, terrestrial thread,
Ancient stories whispered.
This scene delves into the underwater world of mollusks, symbolizing resilience and adaptability. The soft, flowing forms are inspired by Aubusson's fictional aquatic life and landscape.
By integrating local details from Aubusson with the fictional prophecy of Verdu-maris, each scene creates a vivid and immersive experience. The combination of visual storytelling and poetry enhances the narrative, providing a multi-dimensional exploration of the prophecy's themes. This approach not only honors Aubusson's cultural heritage but also expands the boundaries of imagination and creativity.
︎2.Interactive Panoramic Website:
Swipe left or right to view the website & Click the comb ![]()
to view magical information.︎︎︎
An interactive "infinite panorama" website where users can view detailed content of all illustrations and learn about the project's background and inspiration.
to view magical information.︎︎︎An interactive "infinite panorama" website where users can view detailed content of all illustrations and learn about the project's background and inspiration.
“ The creation of a panoramic map of Aubusson in a futuristic underwater world explores historical roots through future assumptions, questions the value of life, identifies imaginary flaws in reality, and creates a space of difference using illusions to weave reciprocal connections. ”
︎3. AR/VR Experiences:
Clic to view the 360 AR&VR panorama.︎︎︎6 AR/VR experience websites accessible through VR headsets, providing immersive augmented reality and virtual reality experiences.
“ Virtually, these scenes will be animated in 360-degree panoramas using HTML, CSS, JS, and WebGL for an augmented and virtual reality experience. They will be accessible via filters and a dedicated website for AR, and through VR glasses for a full immersive experience, similar to 360-degree city tours available on Google and YouTube.
Interaction
︎The Symbolism of the Comb in Verdu-maris![]()
︎ Historical Significance
The choice of using a comb as the trigger for revealing information in the Verdu-maris project is deeply rooted in history. The prototype for this comb is inspired by the "Montain comb" used in 15th-century tapestry weaving. These combs were essential tools for weavers, used to organize threads and patterns, ensuring a clear and precise weave. This historical connection grounds the project in the rich tradition of tapestry making, specifically linking it to the heritage of Aubusson.︎Magical Transformation
In Verdu-maris, the comb is not just a nod to history but is also imbued with magical qualities. It acts like a magical wand, guiding the viewer through the prophecy and unraveling the intricate narrative woven into the tapestry. This transformation gives the comb a dual purpose:︎ Guidance and Clarity:
Just as the boat comb helped weavers maintain clarity in their work, the magical comb in Verdu-maris provides clarity to the viewer. By clicking on the illuminated comb, users can unlock the introductory verses and the inspiration behind each scene, making complex information accessible and understandable.︎ Unveiling and Exploration:
The comb serves as a tool to unveil hidden stories and details within the tapestry. This symbolic act of "combing through" information aligns with the viewer’s journey of discovery, echoing the careful and deliberate process of weaving.︎Practical and Symbolic Roles
︎ Practical Role:
In the context of the digital tapestry, the comb acts as an interactive element. By engaging with it, users can trigger the display of additional content, enhancing their understanding of the prophecy and the project’s themes.︎ Symbolic Role:
Symbolically, the comb represents the bridging of past and present, real and imaginary. It ties the traditional craftsmanship of tapestry weaving to modern digital storytelling, reinforcing the project's theme of merging reality with the metaverse.︎Enhancing the Narrative Experience
Using the comb as a trigger adds a layer of depth to the narrative experience of Verdu-maris. It transforms a simple act of interaction into a meaningful engagement with the story. The magical comb:︎ Guides the Journey:
Like a mentor or guide, it helps viewers navigate through the prophecy, offering insights and revelations.︎ Clarifies the Story:
It ensures that the intricate details of the prophecy are presented clearly, much like how a weaver ensures the clarity of a tapestry’s design.︎ Expands Imagination:
By adding a magical element, the comb invites viewers to suspend disbelief and fully immerse themselves in the fantastical world of Verdu-maris.
“The goal is to create a distinctive panorama with a mystical and dramatic atmosphere, erasing the boundaries between land and sea, and depicting a futuristic world that is both aquatic and aerial. These scenarios, expressed in a detailed visual language, will be presented in a panoramic format reminiscent of a painting scroll and influenced by prehistoric cave paintings and ancient tapestries. ”
Reflection
The Verdu-maris project showcases a unique narrative experience through the combination of visual art and digital media. Re-exploring the stories and production processes behind tapestries, I utilized narrative and historical "frameworks" to re-describe the origins of Aubusson's tapestry technology and culture. By incorporating new technologies, overlapping different timelines, and using webGL, Three.js, VR, and other technologies, I explored various mediums (platforms) and digital expressions between real tapestries and imagined spaces.