Documentation

Project structure, stylistic choices and technical implementation details.

The (virtual) museum content

The project design began with the research and selection of the museum collection. The first step focused on three distinct areas of works related to the famous English designer Vivienne Westwood:

  • the punk heritage from the 70s;
  • the inspiration from XVIII century France;
  • the manga and anime inheritance, Nana, and her environmental activism.

From these three thematic areas, seven items were selected for each, resulting in a total of twenty-one items comprising the museum collection. The items could potentially be organized into three separate rooms. In a physical museum, a visitor would ideally explore each room to appreciate the diversity and breadth of Vivienne Westwood’s artistic production.



The second step involved brainstorming the project and museum name. Inspired by the course project specification’s title and concept, MMMM (Multimedia Museum Meta Mirror), we designed the name "Vivienne Westwood Virtual World". The name not only reflects the designer’s identity but also plays on the acronym VWVW, emphasizing the concept of a virtual museum experience.

The virtual museum form

The third step involved designing the logo and developing the web-based narrative concept.
The final SVG logo was inspired by other museum logos, the project specification’s logo, and the official Vivienne Westwood brand logo. The resulting design is an in-line reflected logo that incorporates the museum’s acronym. A smaller version was subsequently produced to use as the website favicon.


The design of the web-based narratives was guided by the idea that visitors could benefit from a virtual museum experience. The website could enhance in-person visits or fully substitute it by offering three distinct narratives for exploring the collection across the (virtual) rooms.
As required by the project specifications, one of the web-based narratives is a diachronic virtual visit of the collection, "Chronicles of Fashion". After collecting the meta-data of the artworks, we created the first "list of items". The user can follow this narrative to visit the museum virtually or not in a chronological order.
The second web-based narrative, "Made by Vivienne", allows the user to browse the museum by focusing on items designed by Vivienne Westwood. This narrative supports a quicker, more fashion-oriented visit of the museum collection.
Finally the narrative "Past and future" was designed to enable visitors to browse across the collection exloring the items that inspired Vivienne’s work and those that have been inspired by her designs.

The museum website layout

Building on the website requirements outlined in the course project specification, we began sketching possible layouts and navigation tools for the three main pages of the website: the homepage, the narrative page, and the item page. The process started with simple wireframes:

The header allows the user to return to the homepage by clicking on the logo and provides a main navigation bar with links to the collections, info and style toggle sections. The footer contains a brief copyright statement and a link to the GitHub repository.
On the homepage, users find a brief explanation of the website's purpose and an overview of the three available narratives. By clicking once on a narrative card, users can preview which museum's items are part of the selected narrative and the "route" to follow. The map also supports further navigation: hovering over a point displays the item’s image and title.
The narrative page provides a more in-depth explanation of the collection and displays the map with the selected items. Each item in the narrative is represented by its image and a small title. Limiting the information to image and title emphasizes the museum as a primarily visual experience and encourages users to explore individual item pages to access detailed metadata and virtual “museum plaque” information.
The item page offers additional navigation options. Since a single museum item may belong to multiple narratives, users can browse accross them. Beneath the item's image navigation buttons allow users to move backward and forward through the narrative's collection or quickly switch to a different collection via the metadata key “Other collection.” Each item is accompanied by informational text organized around three main axes: user's age, competence, and preferred text length. Once selected, these parameters are maintained throughout the remainder of the virtual visit. The final section of the item page presents a collection of multimedia resources, including images, videos and articles.

The museum website implementation

Each of the team members focused on one of the hmtl pages and started leveraging bootstrap classes in order to create a basic website layout.
The item and narrative data are stored in a structured JSON file and dynamically loaded into the HTML pages using JavaScript.
It was crucial to design a visual tool that would allow users to navigate the collection and orient themselves within the museum space. Starting from a sketch of the museum’s frontal view and the relative position of the items, a map was designed and later used as the basis for a navigational system implemented with Leaflet.

Styles inspirations

The project specifications required the implementation of six distinct style sheets, each corresponding to a different historical period, which can be toggled by the user. In particular, the following moodboards illustrate the thematic inspirations and design choices for each style. Each team member curated the CSS for two of the themes.
700-france theme moodboard
daguerreotype theme moodboard
art noveau theme moodboard
punk theme moodboard
Enter the Future
Enter the Future

Code revision and cleanup

The project codebase was restructured, with particular attention to both CSS and JavaScript.
The first phase focused on reorganizing the CSS themes. During the initial development, styling was approached at the individual HTML-page level, which resulted in multiple rules applying identical styles to different structural elements. While this approach was useful during early implementation, it proved inefficient and confusing for long-term maintenance. With the support of an LLM, the CSS files were cleaned up and reorganized according to rule types rather than page structure. Redundant declarations were removed, resulting in a more consistent, readable, and maintainable codebase. In the early stages of development, Bootstrap classes were used to establish a basic layout. Classes such as bg-light were applied directly within the HTML, and custom CSS rules were later introduced to override them using the !important CSS rule. As part of a second restructuring phase, again with the assistance of an LLM, unnecessary Bootstrap classes were removed and most !important overrides were eliminated, leading to a cleaner separation between structure and presentation.

Multimedia, metadata selection and texts production

The related-media section reflects the curatorial logic of the imagined museum, as the grouping of related materials mirrors the item groupings defined within the museum’s exhibition rooms. By preserving these relationships, continuity is established between the physical institution and the virtual museum experience.
Metadata were sourced from the original museum, library, and archive websites associated with each item, as well as from additional reference materials, all of which are carefully documented in the disclaimer section. The metadata were then standardized using the Dublin Core Metadata Element Set to ensure interoperability. The technical implementation utilizes RDFa to model these fields as Linked Open Data. A global namespace attribute, xmlns:dcterms, was defined on the table body to point to the official DCMI URI. A JavaScript propertyMap was then used to bridge the local JSON keys to their corresponding Dublin Core terms, such as dcterms:title. As the table is dynamically populated, these terms are semantically embedded in the HTML via the property attribute of span elements, effectively binding the museum's data to a machine-readable, standardized vocabulary. Furthermore, the about attribute is used to define the URI of the resource being described, effectively establishing the subject of the RDF triples. By dynamically generating this URI using the item's unique ID, the code ensures that the metadata is explicitly linked to a specific resource, making the library's content compatible with the principles of Linked Open Data.
As for the item texts made accessible to users based on their age, competence and preferred length, they were produced with the help of an LLM, able to retrieve information from the museum, archive or library website holding the specific item and to integrate it with additional knowledge drawn from other authoritative repositories. The LLM prompt reflected the three-axes logic underpinning the texts: the age axis was implemented through a differentiation of tone between texts for kids and adults; the competence axis was addressed by increasing the level of technical fashion-related terminology; finally, with regard to length, the user was initially presented with only a summary of the overall text, to potentially delve into in the virtual (or not) visit to the museum. The result was the production of eight distinct texts for each item, offering potential visitors a personalized interpretive experience that extends beyond that of a simple museum plaque.

Disclaimer

Legal notes and educational purpose statement.

The purpose of this web site is to explore various types of typographic and layout styles for museum pages, as an end-of-course project for the "Information Modeling and Web technologies" course of the Master Degree in Digital Humanities and Digital Knowledge of the University of Bologna, under prof. Fabio Vitali.
The documents contained in this web site have been selected for their length and complexity from the following resources. Their publication here is not intended to be an alternative or replace their original locations:

All copyrights and related rights on the content remain with their original owners.
All copyright on the typographic and layout choices are 2025 © Martina Uccheddu, Nicol D'Amelio, Tommaso Barbato.

The Team

The students behind the Vivienne Westwood Virtual World.

Nicol D'Amelio
Nicol D'Amelio
Tommaso Barbato
Tommaso Barbato
Martina Uccheddu
Martina Uccheddu