The virtual exhibition Far From Home is developed in alignment with the principles of the MetaMirror Museum Multimedia project, designed by Professor Fabio Vitali for the course Information Modeling and Web Technologies at the University of Bologna (for more information, visit the Disclaimer page). The aim is to research and emulate current web and app design practices used by museums. The exhibition must fulfill at least the following principles:
Meta Mirror – This project is about a digital companion mimicking the placement and paths to reach some physical objects.
Museum – The physical objects have been collected to represent a meaningful and systematic representation of some cultural phenomenon (of the past or of the present). The application should help the visitor plan their visit at home and guide them during the visit itself.
Multimedia – Multimedia does not mean images or video. Multimedia means that there is a variety of media, including text, images and video. They are meant to guide the visitors, identify the objects, and explore the themes they represent.”
Therefore, our scope is limited to creating a digital companion app that organizes the physical objects of an imaginative exhibition set in a fictional real-world museum. While we curated a fully autonomous virtual exhibition, the map of the museum's thematic rooms is fictional and serves as a required asset of the project.
Our project aims to be designed in such a manner that it could be used by any type of museum or exhibition of any size or discipline. Other mandatory features are the switchable typographic themes and the narration of interesting stories according to multiple interest areas. The design choices for the typographic themes are justified in the second paragraph ‘2. Presentation’ of this documentation page and more information about the content of the exhibition, themes and narration is found in this first paragraph here below.
The topic of Far From Home stems directly from our personal relationships as a group and the diverse experiences we bring from our homes, cultures, and traditions. Spanning three continents, the variety in our ethnicities and backgrounds has become a constant source of fascination within both our collaboration and friendship. We regularly treat one another to foreign snacks, discuss language nuances, and share stories of local festivities. Hence, we decided our first category should be Around the Kitchen Table: the physical place where we learned about each other's cultures and how to position our own identities within the wider world, growing closer to what we truly define as 'home.' As time passes while we live away from our home countries, we increasingly understand home's essential value and recognize how much we need it to define ourselves in unfamiliar spaces. Therefore, at the start of the exhibition page, we provided a postal box captioned 'What does home mean to you?' that displays answers from previous visitors floating around the frame. This way, we invite everyone to take a brief moment for contemplation to prepare themselves to fully immerse in the exhibition experience.
However, there has consistently been space to discuss our anxieties about developments in our native countries, such as the rising popularity of extremist political movements, corruption, deepening polarization, or the stagnant economic landscape. The current global political climate is becoming an escalating worry for increasing numbers of people, generating more victims of conflict, hunger, and natural disasters daily. The artworks in Taking Flight represent narratives of individuals who have been uprooted from their homes due to political circumstances. This displacement can occur through fleeing conflict or being caught within it, but it can also result when your destiny is predetermined by your heritage and dictated by an unequal distribution of power. The title Nature Interferes refers to the interruption of human conflict by the consequences of environmental damage and the people affected by these climatic catastrophes. During a redefinition of national borders, we must remember to protect the earth that sustains us—for where do we go when there is nothing left to divide?
Finally, beyond homesickness, as a group we
discovered common ground in our shared nostalgia for the worldview of the late 90s and early 2000s. All of us grew up playing with Tamagotchis, Nintendo DS devices, and perhaps acquiring our first flip phone around age 12 if we were fortunate. While we embrace technological advancement, the sound of a Windows 98 startup still brings warm memories of simpler times. The artworks in Traveling Through Time helped us to contemplate questions such as: toward what kind of world do humans evolve as a species? How do our current methods of communication differ from—or perhaps resemble—those of the past?
These four themes converge in the simple phrase: 'to have, to lose, to find', a cycle that defines the universal human relationship with home. We invite you to follow this same journey and share your own experiences with us. This exhibition aspires to initiate a personal voyage guided by art, one that reveals how individual stories of displacement and belonging contribute to our collective understanding of what it means to be home. Both the content and the curatorial approach reflect the temporal and cultural diversity we have sought to encompass, creating a space where different voices can engage in meaningful dialogue. We hope this exploration resonates with you and offers new perspectives on the places and experiences that shape our sense of belonging.
The curation of artworks reflects our collective personal backgrounds and scholarly interests. As digital humanities students, we each bring distinct disciplinary perspectives within our shared humanities foundation, while our diverse ethnic origins have shaped our cultural familiarity and aesthetic sensibilities. We aimed to represent as many cross-cultural dialogues as possible within the selection of 20 works and project's scope. All necessary permissions have been secured from rights holders, with complete statements and source attributions available on our disclaimer page.
Most object descriptions were either taken directly from the source page or written by our team. When sourced from external materials, this is indicated at the end of the object label. For consistency, we adhered to the standard length of 50-70 words per description.
To offer a tailored through the exhibition we crafted three distinct narratives based on three personas: a middle school teacher planning a trip to the museum for her students; a businessman with some time to kill between meetings and a PhD student hoping to enrich their research with art selected from the exhibition. The stories crafted for each of these personas were not just made to suit the practical needs of the visitor (the teacher who needs to engage her students, or the businessman who does not know much about art) but were also made to immerse the visitor in the overall theme of the exhibition, the home. Based on this, three stories were created: “The Many Shapes of Home”, “Essential Picks” and "Transience in Photography”; each with a unique set of 10 artworks from the main collection with narrative descriptions to help the visitor reflect on the themes present in the exhibition.
Since the works were grouped according to four themes, the exhibition space was also divided into rooms based on these themes.
Viewing route proceeds clockwise from the bottom left room which is where the entrance is. We placed a courtyard in the center, allowing visitors to move freely between rooms through this shared space. This design allows for a non-linear exploration of the exhibition, not limited to the main route.
In the courtyard, we introduced an interactive feature where visitors can post about what “home” means to them. Their responses are then displayed on a screen. On the exhibition page, this feature is installed so that when a visitor submits their response, it is displayed as a randomly floating text on the screen.
Once the twenty items were selected for the exhibition we then described and collected all the metadata into one csv file. We used the Cataloging Cultural Objects (CCO) (https://www.vraweb.org/cco) manual as the standard for our descriptions. CCO was developed by the Visual Resource Association and the Getty Foundation and so it has many ties to the museum community making it an appropriate choice for our digital exhibition. Furthermore, CCO provides a straightforward vocabulary for the description of objects which was easy to adapt for the non-tradational objects in our collection, i.e the videos. Once we had collected and described all the metadata we used a python script (GitHub: xmlgenerator.py) to convert each row (each object) of the csv into XML files (GitHub: xml_files). XML was chosen for its interoperability with other file formats and standards. These files would then be made available to the user to download, by scanning the QR codes in the Collecition page. The metadata went through one last transformation from XML to JSON. This was crucial for the functioning of the digital exhibition as the json files would be used to load all the art dynamically on the webpage with Javascript. Along with the JSON of the artworks another JSON file was created which stored all the narratives and their respective artworks and descriptions.
Landing PageThe landing page opens the visit with a carousel that displays the exhibition’s artworks across the whole viewport of the visitor’s screen (the hero-section in the HTML). After a small moment of contemplation and wonder, scrolling down rewards the curious mind with the abstract text introducing the subject. The slide-in effect of the blocks give a modern and animated touch to the page, catching the visitor’s attention. These blocks are the result of a combination of javascript and description of css classes. Upon loading the DOM, the 'show' class is added to any element that appears in the visitor's viewport. This class is defined in the CSS by gradually reducing the element's opacity until it is fully shown and moving it across the x-axis to its destination position in the HTML. The JavaScript also ensures that any element moving out of sight retrieves the 'hidden' class, which moves it back to its former position outside of the visitor's viewport in the same direction. The elements triggered by this code have the class ‘hidden’ added to their HTML element.
The core of the landing page, or so-often called 'home page' in web semantics, consists of six tiles that guide the visitor toward a method of exploration of their preference. Those preferring to start with a categorical exploration of the exhibition can follow the themes, while others may seek profound insights from the beginning and wish to delve directly into the narratives. It should also be recognized that many online museum participants are often interested in a particular artwork and prefer to search directly for their interest within the collection.
Museum websites, virtual exhibitions, and online portfolios share a clear focus on the portrayal of imagery. This is what we aimed for in the design of our HTML as well. Using Bootstrap grids, it becomes quite straightforward to place less emphasis on the text, making it serve the goal of explaining the imagery rather than having the text supported by pictures.
The sections on the home page and throughout the default style are presented using only minimal variations in style, color, and size. We elaborate on this style in section 2.2 CSS/Layouts within the documentation.
Finally, the navigation bar is always present at the top of the screen to give the visitor full autonomy over their navigation across the exhibition.
For any interest in the mentioned fonts, styles, structures etc. that have been mentioned here above we advise you to visit our GitHub page. What has been described here is the index.html page: https://github.com/Far-FroMM-HoMMe/Far-FroMM-HoMMe/blob/main/index.html/.
This page was designed to approach the collection from multiple angles and to encourage visitor engagement through interaction and storytelling. It consists of four sections.
The first section invites users to freely fill in a form from a modal to respond to the question “What does home mean to you?”. Their answers will be displayed on the screen in a playful and dynamic manner. This feature was implemented using a combination of a web form, Google Apps Script (GAS), and JavaScript. When a user submits a response, it is saved to a Google Sheet via GAS. The response is then immediately retrieved by JavaScript and rendered in a random position within a designated display container. Upon page load, existing responses from the sheet are also loaded and displayed.
The second section presents the links to curated storylines tailored to three different user types. Bootstrap’s card group component which renders cards as an attached element with equal width and height was used to structure this section.
The third section provides access to collections organized by themed rooms, as introduced earlier. The floor plan was created in Figma and exported as an SVG. By assigning IDs and class names to elements within the SVG, each room was made interactive. When a user clicks on a room, a popup provides a link that redirects to a filtered gallery page showing works associated with that specific space.
The final section offers access to the full gallery, where users can view the complete collection regardless of theme or categorization.
All containers, cards, and textual components throughout the page were built using Bootstrap, ensuring a consistent visual and responsive layout structure.
The gallery and art viewer pages give the visitor direct access to the collection, providing all the information relevant to each piece of art. To display the art on both pages, cards were used (referred to here as art cards). Each art card has a picture of the artwork which can be clicked to load a bootstrap lightbox to view the art in full. This lightbox was built with an open source version (https://trvswgnr.github.io/bs5-lightbox/ ) which also provided functioning for embedding both Youtube and Vimeo videos.
On the right side of the art card is all the information pertaining to the artwork. The title, artist and object label appear directly on the card while the general metadata can be found either in an accordion (on the Art Viewer page) or as a QR code (on the Exhibition Page). Because of their shared elements, a skeleton html page was built and stored in the resources. When either the gallery or art viewer pages are loaded they use a fetch function to load the skeleton html page and extract elements as needed.
Along with this another fetch function is also used to load the JSON files containing all the information about the artworks and narratives. This is where the difference in the two pages lies. For the gallery page, each art card is loaded and populated with information from the artwork JSON file and placed individually on the page. The user has the option to filter the artworks based on themes which can be done either directly in the Gallery page (by selecting one of the links at the top of the page) or before the page loads, if the user has been directed to the Gallery from either the Landing Page or Exhibition page.
On the Art Viewer page, the art that is loaded is directly related to the narrative which was selected by the user when clicking to the page. The Art Viewer is constructed with a full screen carousel which holds all the art cards related to the selected narrative. The carousel was used here because it allows the user to have a full display of each art card while still having navigation control to move forward or backwards through the narrative. An additional accordion is added to the art card here which holds the narrative description for each piece of art.
The web allows us to work outside the boundaries of a real-world exhibition, and for that reason our team was given the task to experiment with the digital presentation that a physical version of our exhibition could not afford.
Thus, we created multiple graphic layouts. All typographic details, such as font family, sizes, colors, margins, aspect ratios, and page sizes, are designed to exactly reflect the qualities of each layout. In addition to presenting the items for which they were designed and tested, every layout handles a number of narratives and requirements. They accommodate multiple texts of various lengths, images, captions, and reasonably sized tables with metadata information.
On this documentation page, we account for every design choice within the layout. It is worth noting that the layout conveys interesting information in a meaningful and useful way. Different themes are designed to better induce interest and facilitate knowledge transfer from the site to the users. Moreover, different themes address different audiences and emphasize different nuances of the exhibition. Therefore, visitors have access to switch the layout at any point during their visit to the exhibition by clicking on the 'Choose your layout' button in the navbar, located in the top-right corner of the screen. This opens an offcanvas section (functionalities described in section 2.3.1.1 Offcanvas), where each layout has been ordered by the period and artistic movement that inspired it. The decorated buttons provide a hint of what the visitor might expect from the transformation upon clicking on the specific layout.
The default theme is the most neutral display of the exhibition through its minimal set of variations in fonts, colors, margins, and other style properties. Apart from this being a usual practice among other cultural institute web designs, it fits the sincerity and gentility of the subject best and can therefore serve as a model for general visits.
The title, subtitle, and navbar text in the top-left corner utilize a different monospaced font than that used in the body text. While the body uses a calm, classic font such as Cormorant Garamond, the header elements stand out from the other texts slightly by employing Libertinus Mono. For the body text, a font-size of 18pt was chosen to best fit online reading. We make use of four colors in our default style: Moss Green (#556a27), Persian Red (#B14236), black (#1A1A1A), and white (#EDEDED), which are defined within the :root of each HTML file. Red and green are a classic complementary color combination due to their opposite positions in the color wheel, bringing a lively contrast. All colors are muted by reducing their saturation, providing more visual rest in the display.
Bootstrap provided a major supporting role in structuring the block elements of our HTML pages. Most pages make use of the entire viewport or centralize the blocks in the middle of the page within a width of 10 out of 12 columns, leaving some breathing space on the sides to enhance the reading experience. At 10 columns, with default padding (15px) and margins (10px), the effective line length is likely ~65–75 characters, which aligns perfectly with optimal readability standards.
However, as will become evident in the first of the following paragraphs, Bootstrap's grid structure for web design also caused some complexities in the creation of layouts that diverge significantly from its default ratios. As we were constrained to changing the layout only with CSS (and sometimes with a bit of help from JavaScript), some overwriting was necessary to override the ratios defined in the HTML.
The Aldine Press layout was inspired by the printing office of Aldus Manutius, which started in Venice in 1494 [1]. The margins and ratios take a similar form to those of the Gutenberg Bible, which was the primary inspiration for this layout. However beautiful the Gothic font is, it is quite difficult to read on a web page and would most likely distract the visitor from their experience, or even more likely, cause them to switch to another layout immediately.
For a similar reason, the Aldine Press books gained popularity right after their launch. With their introduction of italics and octavo (meaning "in eight," a printing technique that refers to the size of individual sections covering a single sheet [2]), the Aldine Press catered to a broader audience by making books more reader-friendly and transportable.
The ratios and margins still follow the canonical structures of classical design that were heavily influenced by Leonardo Fibonacci’s discovery of the Golden proportions. Guilty Novin describes the mathematics behind this in the best simplicity on her blog post ‘A History of Graphic Design: The Online Textbook.’ It is a resourceful webpage that tracks influential movements of printing design that we still follow and use in the digital realm today. She explains the ‘golden ratio’ as ‘an aesthetically pleasing division of space (1.618) that is often used by artists as the basis for measurements within their compositions. [...] By adding a square, with sides equal to the long side, to the long side it is possible to arrive at the next measurement in the sequence to give a bigger rectangle of the same proportions’ [3]
For the landing page's margins, we relied on the example chart Novin gives of Raúl Mario Rosarivo’s reconstruction of the Golden rule geometry. The viewport is divided into 18 tiles (9 per half) or rather, 50% of the viewport width, with content occupying a central 6×6 grid. This creates consistent spacing: one tile separates content from the center line, two tiles form the outer margins, and the bottom margin extends two tiles for optimal visual balance.
However, before implementing this design, it was necessary to neutralize Bootstrap's column behavior. For that reason, the flex, width, max-width, and padding properties were all set to a value of 0. Then, to account for responsiveness, we designed the ratios using viewport properties. This translated into defining the structure of elements as follows:
Top: 6vh (slightly smaller than bottom)
Right (outer): 4vw (narrower to balance the central "gutter" area)
Bottom: 12vw (large and typical to "anchor" the page visually)
Left (inner): 6vw (moderate like the inner margin)
The first page is designed to resemble the iconic introduction page of the Aldine books, replacing the anchor dolphin symbol with a pre-modern version of our compass logo. The font is the most accurate resemblance available for free on the web, called 'Carbo' and made accessible through Google Fonts. As with the Aldine books, titles and subtitles are uppercase with only minimal letter-spacing (0.5rem). The antique drop caps and parchment background paper are an integral part of the design and are custom designs provided for free on the internet [4].
The colors for the font, backgrounds, buttons and borders were taken as an example of a digital copy of a page on Wikipedia [5].
Bibliography
This style was inspired and based on the work of Alphonse Mucha (1860-1939), a Czech painter, whose poster designs have now become synonymous with the Art Nouveau style. His big break came in 1894 with his poster, Gismonda, which he designed for the famous Parisian actress, Sarah Bernhardt. It was with this poster that many of key motifs of Mucha’s designs first became popular, the narrow shape, decorated border, pastel colours and halo effect around the subject’s head. By 1902 the popularity of his designs had grown to such an extent that the Librairie Central des Beaux-Arts published an encyclopedia of his work entitled Documents Decoratifs.
To translate this style to web design, one key motif was used across all the pages, a decorative floral border, taken from Mucha’s Moon and Stars poster from 1902. With this border in mind, a colour palette of pastel, blues, greens and purples was used for the text and box borders. All the boxes were also given rounded corners to mimic soft geometric curves, another staple of Mucha’s style. On the index page the main hero carousel was replaced with an image of decorative lilies taken from Mucha’s Documents Decoratifs. All the images used of Mucha’s work were found through Wikimedia.
For the headers the font, ArtNouveauCaps was used as it was directly inspired by the Lettre et Enseignes, designed by Etienne Muiler, a french art nouveau artists from around the same time. To complement this font, Glass Antique was chosen as a serif font with soft curves and edges.
Bibliography
De Stijl (Dutch for "The Style") was a modernist artistic movement founded in the Netherlands in 1917, the period between the world wars. Main artists include Piet Mondrian and Theo van Doesburg.
Influenced by Cubism and Theosophy, De Stijl sought to reduce artistic elements to pure abstraction, only using vertical and horizontal lines, rectangles, and a restricted palette of primary colors (red, blue, yellow) along with black, white, and gray. The movement emphasized universality, harmony, and order through minimalist and non-decorative compositions, avoiding individual emotional expression.
The layout draws inspiration from the works of Piet Mondrian. Principal elements are structured on a grid, with colors and text placed within individual cells. For the landing and exhibition pages, CSS grid was used to arrange HTML elements within a grid-based layout. For grids with solid color backgrounds, ::before and ::after pseudo-elements were utilized to visually recreate the grid without adding extra markup.
Frames of the gallery page, certain page backgrounds, and custom visual elements were created as static images. Because of the simple and minimal nature of De Stijl—using flat shapes and noticeable colors, these assets were easy to design without requiring advanced design skills. The frames were also styled with thick black borders and sharp corners. Since Bootstrap was used as the base for the HTML structure, its default rounded components (such as cards and buttons) were overridden to align with the rigid De Stijl aesthetic.
For what concerns the color palette, it consists of only primary colors: red, blue, and yellow. These colors were distributed evenly to maintain visual balance in accordance with De Stijl principles.
As for the font choice, a free font named "De Stijl" was used for headings and titles. Its geometric design without any curves reflects its name. However, due to its low readability in longer texts, body paragraphs were set in Oraxium, a sans-serif font with a similarly structured but more legible form.
Bibliography:
This style is inspired from Lester Beall, an American graphic designer who played a key role introducing modern design to the United States. Influenced by the Bauhaus and Constructivism, he developed a distinctive visual style characterized by geometric and abstract shapes, use of vibrant primary saturative colors, asymmetry, iconic arrows and clear concise typography. He was also deeply involved in magazine redesign, advertising, and the development of corporate identity systems.
One of the characteristics of Beall’s posters is the use of complementary colors, those often positioned across from each other on the color wheel. Based on color sampling from his actual works, a palette was created using shades of blue, red (leaning toward orange), yellow, white, and black.
A notable feature in Beall’s design is the frequent use of diagonal elements such as diagonal stripes, angled color blocks, or tilted banners. To reflect this taste, the hero section of the landing page uses CSS overlays with ::before and ::after pseudo-elements to create diagonal borders.
The background image was also custom made to match the style. Many of Beall’s posters feature a single symbolic object such as a house, lightbulb, or faucet. In that spirit, a personal computer was chosen as the motif for this image, representing an indispensable element in life as a student in digital humanities.
A font resembling "University" was used for headings and titles to capture the clearness and conciseness of text in Beall’s graphics. Like other highly stylized typefaces, it can be difficult to read in a paragraph text, so its use was limited to prominent typographic elements. For body text, the standard sans-serif font Roboto was chosen to ensure readability and visual clarity throughout the layout.
Bibliography:
The Windows 98 layout represents a deliberate departure from traditional museum website aesthetics, embracing the nostalgic interface design of the late 1990s operating system. It draws visual elements and inspiration from a 98.css GitHub repository provided by user jdan [1]. What becomes immediately evident is the lack of sophisticated grid systems in early web design. Text often spreads across the entire viewport, and blocks are stacked on top of each other without complex positioning. Unfortunately, it became too complex to completely alter the grid system of the themes, narratives, and collection sections on the landing page using only CSS. Consequently, these sections might not offer the most accurate representation of the original style.
Another complexity arose from the styling of scrollbars. Since all modern web browsers have removed the arrows at the top and bottom of scrollbars, these elements had to be reimplemented as images. This approach became too difficult to execute effectively; thus, we retained only the checkered background and gray-colored shadow bars that still provide an accurate look and feel.
The color palette is reduced to what was available in the original system: bright and simple red, yellow, blue, and green. Some of the card headers and carousel accordions have been styled with the iconic window title bar that was available in the 98.css library.
Two fonts are used in this style: the classic Arial default font with a 12px size and Pixelfy Sans for headers (downloaded as a custom font but also available through Google Fonts [2]).
Finally, with the help of JavaScript, the offcanvas section is always made visible when viewing on large screens to mimic the TreeView menu as presented in the 98.css library demonstration. On mobile screens, the offcanvas section behaves similarly to the other styles.
Bibliography:
We are living in a time of decline of the internet. The golden age of web design and innovation is behind us and before us the deep pit of enshitification claims more and more of the websites that were once great. And from the pit a big dark grey cloud of dissatisfaction and frustration has emerged and passed over all of us. On this current trajectory, a sort of collapse or implosion by 2035 seems inevitable.
And yet hope always exists in some form and for many, this has been a sign to turn back, to reflect on the simpler earlier days of the internet. This has been evident by rise in nostalgia content from the late 90s and early 2000s circulating across our dying web. At the same time, offline, more and more people have turned to collecting physical media, for the sake of the physicality but also for the sake of ownership, of knowing that once you but something it is yours (a concept we seem to be losing everyday).
These are the principles which informed the design of the 2035 style. The design plays on this idea of nostalgia for the early web with its font, Pixelify Sans was chosen to mimic the pixelated graphics from the late 90s, complemented by a simple page layout. The colouring, glare and flickers were all inspired by '80s Retro-Style designed by WebArtisan (https://webartisan.info/how-i-made-my-80s-retro-style-homepage-part-1 ). The choice of this style was two-fold. It firstly complemented the nostalgia design already present with the font and layout. But secondly and more importantly, it was designed to remind one of the old CRT screens which used to be used for computers. The green text colour mimics the phosphorus green that was used on these screens and the flickering lines mimic the low-resolution from the cathode rays in the screens. These were the markers of physicality that we have now lost in the digital age and which many seem to want to turn back to.
The background image that is used across all the pages is taken from the anime, Serial Experiments Lain. Although this anime aired in 1998, it presents a rather dystopian, but still accurate depiction of the social web today. 14-year-old Lain becomes completely consumed by the story’s version of social media called the Wired, not too unlike how many children have been negatively impacted by the effects of social media today. At the same time, the image, Lain’s room completely taken over by wires and cables, again points to that physicality that we have lost in the digital age.
Bibliography:
Far From Home is a cross-cultural and period-spanning virtual experience. To help you emerge in different time periods, and for the sake of this digital project, we designed several layouts that you can choose from. Each layout is inspired by a different period and culture, and it will change the way you experience the exhibition. To learn more about our design choices and CSS script, visit the general purpose and design choices section.