The virtual exhibition Witches Through Time: From Myth to Empowerment was developed in alignment with the principles of the Multimedia Museum Meta Mirror project, designed by Professor Fabio Vitali within the course Information Modeling and Web Technologies at the University of Bologna.
The project aims to investigate and emulate contemporary web and application design practices adopted by museums,in order to create a digital companion capable of supporting visitors before, during or in place of an on-site visit.
In accordance with the project specifications, Witches Through Time offers a complete digital overview of a hypothetical museum exhibition whose goal is to present a new perspective on the history of witchcraft through a feminist lens. The application functions as a meta mirror of the physical museum: it reproduces the exhibition’s spatial organization through a faithful interactive map and recreates the curatorial experience through a narrative-driven navigation mode.
The exhibition brings together a wide range of media, including artworks, books, historical documents, photographs and contemporary installations, connected through interpretative texts that guide the visitor along the curatorial narrative.
In addition, the project includes mandatory features such as switchable themes, whose design choices and conceptual motivations are discussed and justified in the third chapter of the documentation.
Witches Through Time is conceived as a critical exploration of the figure of the witch as a historically constructed and politically charged archetype. The project aims to guide the visitor through a journey, as suggested by the exhibition’s title: from the ancient and pre-Christian origins of the witch, through the persecutions of the Middle Ages, to her modern and contemporary reconfigurations. Adopting a feminist interpretative lens, the exhibition presents the witch not merely as a victim of superstition, but as a figure shaped by enduring systems of control and resistance.
The exhibition challenges dominant narratives that have alternately feared, ridiculed or romanticized witches, while rarely addressing witchcraft as a form of cultural and political agency. By foregrounding the relationship between witchcraft and forms of female knowledge, such as healing practices, herbal medicine, reproductive care and spiritual mediation, the exhibition positions the witch as operating outside state control, thereby framing her as a threat to established power structures. Within this framework, witch hunts are interpreted not solely as episodes of religious fanaticism, but as mechanisms of social discipline that targeted women whose roles and expertise disrupted patriarchal and institutional norms.
Historically, the exhibition traces the transformation of witch-like figures from ancient goddesses, healers and mythological sorceresses connected to nature and fertility, to symbols of fear and deviance during the late Middle Ages and early modern period. The widespread persecution of alleged witches across Europe and beyond is presented as a deeply gendered phenomenon, whose cultural consequences extend far beyond the decline of formal trials. Although the legal repression of witchcraft eventually declined, the symbolic figure of the witch persisted, continuing to shape literature, folklore and popular imagination, while constantly shifting in meaning and form.
A central focus of the exhibition is the re-emergence and re-signification of the witch in modern and contemporary contexts, particularly within poetry, theatre and pop culture. From the late nineteenth century onward, and particularly within twentieth-century feminist movements, the term “witch” was progressively reclaimed as a marker of self-determination and resistance, as well as a tool of feminist and decolonial critique. The exhibition highlights this shift by referencing the case of Anna Göldi, the last woman executed for witchcraft and also the first to be officially rehabilitated in 2008 by the Canton of Glarus.
The curatorial approach of the exhibition emphasizes continuity rather than rupture, suggesting that witch hunts should not be understood as a closed chapter of the past. The final section, and in particular the last item of the exhibition, serves as a warning, inviting reflection on the persistence of analogous mechanisms of gendered marginalization and stigmatization in the present. By juxtaposing historical material with contemporary artistic practices, Witches Through Time reframes the witch as an evolving figure whose meanings are continuously negotiated across time and cultural contexts.
The content of Witches Through Time was conceived to reflect both the complexity of the exhibition and the diversity of its potential audiences. Given the historical depth, political sensitivity, and cultural stratification of the figure of the witch, particular attention was paid to how information is mediated through text. Rather than assuming a single, universal visitor, the project adopts a pluralistic approach to interpretation, in line with contemporary museum practices that emphasize accessibility, inclusivity, and visitor-centered design.
As required by the project guidelines, there are three main categories for the audience, introduced as personas: a teacher in a middle school, a businessman from out of town and a PhD student. Therefore, the exhibition offers visitors the possibility to switch between different textual descriptions for each item. These descriptions vary according to length, level of competence, and communicative intent, allowing users to choose the version that best suits their interests, prior knowledge, and reading preferences.
At the initial design stage, four dimensions were identified as relevant for shaping textual interpretation:
While this framework allowed for a theoretically rich combination of possibilities, it quickly became evident that exposing all potential permutations would be counterproductive. The number of combinations was excessively high, and many of them either overlapped conceptually or resulted in contradictory communicative goals. For example, a short, difficult and fun text aimed at children would undermine clarity, while a long, difficult and fun text for adults risks tonal inconsistency. Likewise, texts designed for scholars almost inevitably require a longer format and an academic tone, regardless of stylistic variation.
Museums frequently operate along similar interpretive dimensions, but they rarely make all possible combinations explicit to visitors. Instead, they curate a limited and coherent set of interpretive layers to avoid cognitive overload and decision fatigue. Following this principle, we refined our framework by collapsing overlapping dimensions and prioritizing clarity and usability.
The final model is based on two primary dimensions: audience and length. Tone and complexity are embedded within these categories rather than treated as independent variables. This resulted in nine text versions for each item, organized as follows:
Texts intended for younger audiences use clear, accessible language and concrete examples.
Across all three versions, the tone remains approachable and coherent, avoiding oversimplification while maintaining accessibility.
Texts aimed at the general adult public assume varying degrees of familiarity with the topic.
In this group, linguistic complexity increases alongside text length, reflecting the assumption that visitors who seek longer explanations are already more at ease with the subject matter.
Texts for scholars adopt an academic tone in all versions, prioritizing analytical depth and conceptual precision.
Here, length does not alter tone but rather the degree of analytical development, allowing scholars to select the depth most appropriate to their research or reading context.
During the text production phase, the team adopted a hybrid authorial approach combining curatorial writing with the support of a Large Language Model (LLM). For each item, a long scholarly version was first authored by the team, ensuring interpretive accuracy and consistency with the exhibition’s conceptual framework.
The LLM was subsequently employed as an assistive tool to generate differentiated textual versions. These derivative texts were not produced autonomously, but developed through iterative prompts and editorial supervision, allowing the team to maintain control over tone, content and interpretive coherence.
This structured yet flexible system allows the exhibition to address a wide range of audiences without fragmenting the interpretive experience. By limiting the number of versions while maintaining meaningful differentiation, the project balances interpretive richness with usability. Visitors are empowered to actively shape their own experience, choosing how deeply to engage with each object, while remaining guided by a coherent curatorial voice.
In the context of Witches Through Time, this approach is particularly significant. The figure of the witch carries layered meanings, mythological, historical, political and symbolic, that cannot be communicated effectively through a single narrative register. Multiple text versions allow the exhibition to address these layers responsibly, making space for education, critical reflection and scholarly inquiry while remaining accessible to younger and non-specialist audiences.
Overall, the design of the item descriptions reflects the exhibition’s broader aim: to question inherited narratives, reveal hidden power structures, and invite visitors to reconsider the witch not as a marginal figure of superstition, but as a complex and enduring symbol of cultural resistance and empowerment.
The exhibition’s conceptual framework is closely tied to its spatial and narrative structure. Witches Through Time is organized into four thematic rooms, each addressing a distinct dimension of the figure of the witch across history and artistic representation.
Room 1 – Mythic roots focuses on the mythological and pre-Christian origins of witch-like figures, establishing the witch as a foundational cultural figure.
Room 2 – Fires of fear addresses the historical phenomenon of witch hunts and executions, particularly during the late Middle Ages and early modern period. Through historical documents and visual material of the time, the room examines how the witch was redefined as a legal and moral enemy.
Room 3 – Visions and shadows explores representations of the witch in literature, visual art and pop culture. Here, the witch emerges as a figure of ambiguity, oscillating between fear and fascination.
Room 4 – Reclaiming the spell focuses on modern and contemporary reappropriations of the witch as a symbol of feminist resistance and empowerment. At the same time, the room acknowledges the continued vulnerability of women accused of witchcraft in various parts of the world, connecting historical persecution with contemporary forms of gendered exclusion.
While allowing both chronological and thematic navigation, the exhibition is conceived as a cyclical narrative, emphasizing the recurrence of specific patterns: persecution, marginalization, resistance and reappropriation.
The spatial organization of the exhibition is represented through a pentacle-shaped map. Traditionally associated with balance and interconnected forces, the pentacle is used here as a conceptual device to visualize the dynamics underlying the history of witchcraft, such as the tension between knowledge and repression, visibility and erasure, empowerment and punishment. Each point of the pentacle corresponds to one thematic room, while the central space remains intentionally inaccessible.
This absence reflects the curatorial position that the history of witchcraft does not follow a linear or progressive trajectory, but instead repeats and transforms across time. Consequently, the exhibition has no definitive center or conclusive endpoint; the final room reopens the narrative rather than closing it, reinforcing the exhibition’s central question: when, and under what conditions, the witch hunt truly ends?
Metadata for the digital collection were collected directly from institutional websites hosting the digital items. To ensure semantic interoperability across these heterogeneous sources, metadata were standardized using the Dublin Core Metadata Element Set (DCMES). This process unified varying cataloguing standards into a consistent schema – mapping attributes such as Creator, Date, Type, and Location – which was then consolidated into a single JSON file acting as the application’s central repository.
The application utilizes JavaScript to dynamically populate the item interface without requiring page reloads. Upon initialization, the script fetches the JSON file and parses the items into a JavaScript object. The core function, displayItemDetails(), retrieves the specific metadata object for the active item ID. It then targets the corresponding table cells in the HTML (e.g., item-creator, item-type) and renders the content.
The design phase began with the creation of interface prototypes in Figma, used to define the overall structure of the website and to test visual hierarchy, spatial balance and interaction flow prior to implementation. These prototypes supported the translation of curatorial and conceptual decisions into concrete layout solutions.
Figma’s developer-oriented features were subsequently used as a reference during the implementation phase, facilitating consistency between design and code. Selected screens from the design prototypes are included in the documentation to illustrate the design process and the methodological approach adopted by the team.
The text layout was deliberately constrained using a max-width of 70ch for paragraphs, combined with responsive padding and font scaling. This choice follows research-based guidelines for optimal line length (50–75 characters per line), ensuring readability, smooth eye movement, and reduced visual fatigue. By explicitly setting this measure in CSS, we make a conscious design decision that balances aesthetic proportion, user comfort, and accessibility across devices.
max-width
The Index page functions as the primary point of access to the digital exhibition Witches Through Time. Rather than operating as a neutral menu or informational landing page, the homepage is conceived as a threshold experience, designed to introduce visitors to the exhibition’s atmosphere, themes, and narrative logic before any explicit curatorial content is presented.
This approach aligns with a growing tendency in digital exhibitions to treat the homepage as an interpretive space in its own right, rather than a purely navigational interface. Projects such as Google Arts & Culture immersive exhibitions, The British Museum online storytelling features, and experimental digital archives like Europeana thematic collections demonstrate how visual immersion and narrative framing can guide user engagement from the very first interaction.
The homepage opens with a forest scene, a recurring symbolic environment in the cultural imagination of witchcraft. Forests have historically functioned as liminal spaces: places of exclusion, secrecy, fear, and resistance. By situating the visitor within a forest before entry, the exhibition establishes an immediate metaphorical framework that anticipates the themes explored throughout the collection: persecution, marginality, transformation, and empowerment.
The absence of textual explanation in this opening moment is intentional. Instead of presenting information immediately, the interface prioritizes atmosphere over exposition, encouraging curiosity and emotional engagement. This design choice reflects strategies used in immersive museum installations, where sensory experience precedes interpretation, allowing visitors to enter the narrative world before confronting historical or analytical content.
The presence of a single call-to-action (“Enter the spell”) reinforces the idea of intentional access. Visitors are not immediately confronted with menus, categories, or metadata, but are instead invited to actively choose to cross into the exhibition space. This mirrors ritualistic and performative elements associated with witchcraft, while also granting the user a clear moment of agency.
Similar strategies can be observed in digital storytelling projects and virtual exhibitions that emphasize performative navigation, where entering the exhibition becomes part of the narrative experience rather than a purely functional step.
After entry, the homepage gradually reveals its full interface, including the navigation bar and thematic visual elements associated with later sections of the exhibition. This staged revelation reflects a conceptual transition from mythic space to structured knowledge. The initial forest environment represents the symbolic and folkloric dimension of witchcraft, while the revealed interface introduces the analytical, historical, and curatorial framework of the exhibition.
This transition echoes the exhibition’s broader narrative arc: moving from myth and fear toward contextualization, reinterpretation, and empowerment. The homepage thus anticipates the exhibition’s internal logic and prepares visitors for the thematic progression they will encounter.
From a curatorial perspective, the Index page fulfills three main functions:
By avoiding immediate didactic explanations, the homepage respects the diversity of its audience and mirrors the exhibition’s overall commitment to layered interpretation. Visitors are invited to enter the exhibition not as passive readers, but as participants in a narrative journey.
In this sense, the Index page is not merely a technical starting point but an integral component of the exhibition’s interpretive strategy, bridging visual storytelling, symbolic space, and user-centered design.
The Map page is not intended to function as the primary navigational interface, since the Exhibition page provides a more comprehensive overview of the contents of each room. Instead, this page was designed to visually translate the exhibition’s conceptual framework into an interactive spatial structure, mirroring the on-site experience in which visitors enter each room blindly, without prior knowledge of its artworks.
The page layout is organized using a two-column grid system. On larger screens, the left side of the page is occupied by an embedded SVG map, while the right side hosts a textual description panel. On smaller devices, the layout adapts responsively, stacking the elements vertically to preserve readability and usability. This structure allows the map to remain the focal point of interaction while maintaining constant access to interpretative content.
The SVG map was created starting from a pre-designed element in Canva and then further modified using BoxySVG in order to add transparent SVG paths corresponding to each room over the graphical representation. These paths are fully interactive: they highlight on hover and change color when active, providing visual feedback when a room is selected. Text labels are embedded within the SVG to identify each room and reinforce spatial orientation.
The right-hand panel, which by default presents the introductory section (“Enter the spell”), functions as a dynamic content container. It displays the title and description of the currently selected room, as well as a button linking to the first item of that room. Interactive behaviors, such as room selection and content updates within the description panel, are handled through JavaScript event listeners applied to the SVG elements, while the associated texts are stored within the same JavaScript file. This interaction model maintains narrative continuity while avoiding disruptive page transitions.
The Exhibition page functions as the central curatorial hub of Witches Through Time. Accessible directly from the navigation bar, this page does not present items itself, but instead defines how the collection can be explored. Its primary role is to introduce and mediate between two distinct modes of access to the exhibition content: Chronological and Eras, each implemented as a separate HTML page.
Rather than enforcing a single interpretive structure, the Exhibition page foregrounds the act of selection, making the organizational logic of the exhibition explicit and accessible to the visitor.
Both the Chronological and Eras views present the same set of exhibition items, but organize them according to different interpretive principles. This separation reflects a conscious curatorial decision to distinguish between historical sequencing and contextual grouping, two approaches that are frequently discussed in museum studies and digital humanities.
By separating these views into individual pages, the project avoids conflating interpretive logics and allows each structure to remain conceptually coherent and readable.
The Chronological view organizes items according to temporal progression. This mode emphasizes historical continuity, transformation, and rupture, allowing visitors to trace how representations of witchcraft evolve across time.
This structure supports visitors who prefer a linear, historically grounded narrative and aligns with traditional historiographical models. At the same time, the digital environment preserves non-linearity: users can move freely between periods without being constrained to a fixed path.
The Eras view organizes items according to culturally and historically defined periods rather than strict dates. In this mode, items are grouped by shared aesthetic, ideological, and symbolic characteristics associated with specific eras.
This approach highlights how representations of witches intensify or shift within particular cultural contexts, emphasizing discourse and visual language over chronology. It reflects curatorial strategies commonly used in physical exhibitions, where thematic or period-based rooms encourage comparative interpretation.
The Exhibition page makes curatorial structure visible by explicitly offering these two organizational choices. Rather than presenting one model as neutral or authoritative, the interface acknowledges that structure itself produces meaning.
Visitors are thus invited to actively choose how they want to engage with the collection, reinforcing a user-centered and interpretive approach consistent with contemporary digital exhibition practices.
The Item Page is designed as a responsive, modular interface that adapts its layout based on the device screen size using the Bootstrap grid system. The structure is divided into two primary sections. The upper section contains the interactive item image, clicking on that triggers a Bootstrap Modal for a high-resolution detailed view, and the metadata table which provides standardized information about the artifact. The lower section contains the descriptive content and allows visitors to choose between different text lengths (Short, Medium, Long) and tones (Kid, Adult, Scholar). The navigation controls are positioned at the bottom, dynamically updating based on the selected narrative mode.
To ensure that every artifact in the collection is uniquely addressable and accessible directly from external pages (such as the Exhibition page), the application implements a URL parameter system. Each item is identified by a unique key passed via the ?id=parameter. Additionally, a ?narrative=parameter tracks the user’s navigational context (eras or chronological). Upon loading, the script inspects the browser’s URL query string using URLSearchParams. If a valid ID is found, the system immediately initializes the view with that specific item and sets the correct narrative context via the switchNarrative() function. If no ID is present, it defaults to the first item in the chronological sequence. This approach ensures that users can bookmark specific items or navigate seamlessly from other pages to a detailed view without losing their place in the narrative structure.
The Item Page functions as a data-driven template. Content is injected dynamically via JavaScript, ensuring scalability and ease of maintenance. On page load, the script asynchronously fetches the JSON file, that acts as the central repository containing all item objects and their associated metadata. The script maintains the current state using variables for the active currentIdList (the list of items to show) and currentIndex (the specific item currently being viewed). The core of this system is the function displayItemDetails(): the function uses the currentIndex to find the correct item ID and retrieves the corresponding object from the loaded JSON data; it targets specific DOM elements by ID (e.g., item-title, item-creator) and populates them. The function uses innerHTML that allows the browser to correctly render any semantic HTML tags stored within the metadata.
To address diverse audiences, the Item Page enables users to switch between different textual descriptions for each item. The JavaScript logic constructs a composite key based on user selection to retrieve the correct text block. When a user clicks a button (e.g., “Kid” tone and “Short” length), the script concatenates these values into a key string: ‘${currentLength}-${currentTone}’ (e.g., “short-kid”). It checks if this specific key exists in the item’s texts object within the JSON. If found, it updates the description panel instantly without reloading the page.
The page supports two distinct modes of navigation, controlled by the switchNarrative() function. This system allows users to view the same artifact through different contextual lenses.
This theme represents a conceptual experiment: what would a website look like if the internet existed during the Renaissance? To answer this, the design philosophy focuses on extreme minimalism and authenticity. In an era before digital screens, information was conveyed through the "basic technologies" of the time: ink and paper. Consequently, this layout strips away all modern web aesthetics—there are no glossy gradients, drop shadows, or bright "digital" colors. The palette is strictly limited to organic tones: a parchment-like tan (#D9C3A6) for the background and a deep charcoal (#1A1A1A) for the text, simulating the high contrast of iron gall ink on rag paper.
#D9C3A6
#1A1A1A
The goal was to create an interface that feels "old" not just through decoration, but through the absence of distraction. The UI is deliberately sparse, forcing the visitor to focus on the text and content, much like a reader would focus on a printed page in the 16th century.
A key technical challenge was ensuring the page didn't feel like a flat digital screen. To achieve a tactile "paper" quality, we implemented a global noise overlay. By applying a semi-transparent noise texture (beige-noise.png) to a fixed ::before pseudo-element on the body, we created a static grain that remains consistent even as the user scrolls. This subtle layering (managed via z-index: -1) ensures the text appears to sit on top of the texture, mimicking the physical depth of ink pressed into fiber.
beige-noise.png
::before
z-index: -1
Typography is the primary vehicle for this theme, using fonts that are historically grounded rather than merely "old-looking":
Since standard rectangular buttons would look anachronistic in this setting, we developed a custom UI system based on "Operellos" (decorative corner flourishes). Instead of using solid borders, the content cards and description boxes are framed by four distinct SVG ornaments positioned absolutely in the corners (.top-left, .bottom-right, etc.). This technique mimics the modular woodcut borders used in 16th-century bookbinding, allowing the containers to expand dynamically with content while maintaining a rigid, classical structure. These operellos serve as the only necessary UI framing, keeping the interface minimal and focused on the era's aesthetic.
.top-left
.bottom-right
Interaction design was kept intentionally subtle to avoid breaking immersion. In the navigation bar, we avoided modern "active state" color changes or background highlights. Instead, we used CSS pseudo-elements to render a decorative SVG line (line.svg) above and below the active link. This effect, triggered via opacity transitions, mimics the hand-ruling sometimes found in manuscripts to emphasize titles. Furthermore, a slight text-shadow was applied to hovered links (0.1px 0 var(--default-font-color)), simulating the "ink bleed" or bolding effect of a printing press applying more pressure. Finally, all modern rounded corners were strictly removed (border-radius: 0), ensuring every element has the sharp, straight cut of a page.
line.svg
0.1px 0 var(--default-font-color)
border-radius: 0
Bibliography
The second theme is rooted in a 19th century British phenomenon, originally known as «penny bloods» and later renamed Penny Dreadfuls. Emerging from the convergence of rising working-class literacy and the industrialization of printing, these publications pioneered a new form of mass entertainment. Designed for rapid consumption, they catered to a public appetite for sensation - offering serialized tales of gothic horror, notorious criminals, and supernatural mysteries.
The Penny Dreadful was defined by its economy and urgency. Facilitated by manufacturing advancements that lowered the cost of paper, publishers realized that genre fiction could be mass-produced profitably at a penny a time. Typically, eight to sixteen pages long, each weekly number or episode featured a black-and-white illustration on the top half of the front page. These covers were particularly gruesome, depicting murderers and highwaymen to capture the attention of the audience.
The visual identity of this theme captures the urgency of those early serials. The imagery draws heavily on the aesthetic of Victorian woodcuts and broadsides. This approach aligns with the exhibition’s exploration of fear and folklore, utilizing a design language that feels historically authentic: raw, unrefined, and evocative of the printing press’s urgency.
The interface design is based on a layout that feels dense and tactile. The composition relies on heavy framing and compartmentalization; content is enclosed within thick borders and dividers, mimicking the layout of Penny Dreadful publications where every inch of paper was maximized for narrative impact.
The page content is deliberately restrained to mirror the physical margins of these 19th century periodicals. The content width is limited to prevent text from stretching across the entire screen, recreating the narrow reading experience of a printed serial rather than a fluid digital webpage. Generous padding creates internal breathing room, simulating the printed margins that were necessary for binding and handling the cheap paper of the era.
Illustrations were crucial to the appeal of Penny Dreadfuls, often selling the story before a word was read. The theme replicates this by prioritizing bold, dramatic images treated with a high-contrast black-and-white filter.
The color palette is strictly material, simulating the cheap inks and textures of the original publications. The three main colors of the outer interface are derived from the iconic cover of Black Bess.
#EBB35C
#BC3D1C
#302226
The inner content area simulates the page of the periodical itself.
#F3EAE1
#303030
The 19th century witnessed a typographic renaissance driven by the Industrial Revolution, which transformed printing into a genuine mass medium. As technologies for typefounding and typesetting advanced, printers of "murder broadsides" and Penny Dreadfuls began utilizing a dizzying array of new display typefaces designed specifically for the burgeoning advertising industry. This theme mirrors that aesthetic evolution, selecting typefaces that balance historical authenticity with modern legibility.
The Vienna Secession theme draws its primary inspiration by the work of Koloman Moser, one of the founding members of the movement. Active at the turn of the 20th century, the Vienna Secession emerged as a reaction against academic historicism, advocating for a modern, unified approach to art. Its members sought to dissolve the rigid boundaries between fine and applied arts, promoting the concept of Gesamtkunstwerk (the “total work of art”), in which every visual element contributes to a coherent aesthetic whole.
Moser played a central role in shaping this vision. His designs for Die Quelle (Flächen Schmuck, 1901) exemplify the Secessionist pursuit of clarity, rhythm, and abstraction. Unlike traditional ornamentation rooted in illusionistic depth or naturalistic imitation, Moser’s work proposes a modern approach: motifs are flattened, stylized, and organized into modular systems governed by geometric rigor and a refined sense of balance. This philosophy laid the groundwork for the Wiener Werkstätte, founded in 1903 by Moser and Josef Hoffmann. The workshop functioned as a brand where artist and artisan worked as equals to bring high-quality design into all areas of life.
The ideal of art as a tool for cultural renewal aligns with the exhibition's topic, reflecting the transformative forces that shaped the history of witchcraft.
The layout and visual identity of the theme are based on the Secessionist principles of geometric organization, symmetry and repetition. The interface relies on clearly defined frames and grids that structure content into balanced, self-contained units. Content does not flow freely but is contained within decorative boundaries, echoing the ordered design of the movement.
The aesthetic is grounded in the work of Koloman Moser, specifically a plate from the series Flächen Schmuck, which serves as the immersive page background. To ensure legibility against this intricate pattern, content boxes are set against a solid warm canvas (#F0E4CC) background. The color palette is derived directly from Moser’s work:
#F0E4CC
#9D6C44
#845D34
#BAA346
This reduced palette enhances the flatness of the decorative surfaces, while distinct contrasts guide navigation and hierarchy.
Decorative elements – such as square patterns and heavy borders – are not merely embellishments but structural devices that define margins and visual hierarchy. The design also references the Verso of Wiener Werkstätte postcards, characterized by defined dotted margins and distinct spacing.
To replicate the materiality of early 20th century print, the theme implements a grid effect. Using a CSS ::after pseudo-element on the body, the design applies a fixed overlay consisting of two repeating linear gradients that intersect to form a micro-grid. It simulates the texture of the graph paper Moser used for his patterns.
::after
For this theme, the typography is inspired by the lettering experiments developed by Koloman Moser for Die Quelle, where typography was conceived as an integral component of the overall composition.
The visual identity of this theme is inspired by radical feminist graphic protest aesthetics, particularly the punk zine culture of the 1970s and several second-wave feminist periodicals of the time (e.g., Spare Rib, Off Our Back, Effe magazine).
Feminist zines of this era were not conceived as polished editorial products, but as spaces of self-expression and political resistance, distributed independently and outside institutional and commercial circuits. They were often produced with limited resources, using low-cost techniques such as photocopying, collage and manual typography. Their visual language was deeply connected to political content: fragmented layouts, bold typography and the mixing of images and text reflected a desire to break with patriarchal norms and mainstream visual standards. These publications challenged traditional publishing aesthetics by embracing imperfection, which became a core aesthetic principle informing the layout of this theme.
A key reference for this aesthetic comes from Spare Rib, a feminist magazine launched in 1972 by founding editors Marsha Rowe and Rosie Boycott, with designers Sally Doust and Kate Hepburn. In sharp contrast to existing women’s magazines in both form and content, Spare Rib addressed issues ranging from sexual and racial equality to household tips, child- and healthcare, within a radical and contemporary framework. The visual design of the magazine was crucial to its aims: it had to “look like a women’s magazine, yet with contents that did not reflect the conformist stereotyping of women”. Irregular layouts, collage compositions combining photographs and typewritten text, high-contrast colors and expressive typography were central to its visual identity.
These influences informed the decision to reject clean, minimal digital design in favour of visual noise and tactile interfaces that communicate activism and materiality. The interface is therefore not designed to look “perfect”, but rather intentional, expressive and handmade, reflecting the values and communication strategies of 1970s feminist publishing.
The layout of the interface translates the aesthetic principles of feminist zines and magazines into a digital environment by embracing irregularity and visual tension, echoing the collage-based construction typical of zine culture. The interface frequently employs visual metaphors such as tape, paper and pinned images. The layout is structured through overlapping layers and the background textures aim to reproduce the feeling of pinning things on printed paper. Elements such as cards, buttons, images and containers are intentionally rotated using small transform values, creating a sense of physical placement, as if elements were manually positioned on a page using glue or “tape”, which is added as a decoration using CSS pseudo-elements (::before and ::after).
transform
The color palette is derived both from feminist symbolism and analogue printing practices. The main colors are:
#FB2E86
#1D1D1D
#F2E9D0
Additional colors include classic crimson (#D7263D), associated with urgency and political intensity, and silver (#AFAFAE), used for secondary contrast. Colors are not decorative but semantic: pink communicates identity, black communicates print, cream communicates paper and red communicates urgency.
#D7263D
#AFAFAE
The project uses a multi-font system to simulate the visual diversity and heterogeneity typical of zine production.
Archivo, a grotesque sans-serif typeface designed by Hector Gatti and released in 2012, is used for headers. Inspired by late 19th-century American typography, it conveys a retro aesthetic that recalls protest posters. Oswald, a condensed neo-grotesque sans-serif created by Vernon Adams in 2011, is used as a secondary font, evoking magazine headlines and editorial layouts. Work Sans is used as the default body text font due to its neutrality and high readability, ensuring usability without compromising visual identity. Finally, Courier New is used to create a typewriter effect for metadata, referencing archival documents and typewritten materials.
Instead of visual uniformity, the interface embraces typographic plurality, which reflects collective authorship, DIY publishing and non-professional print culture. Particular attention is also given to typographic emphasis. Key words within the text are highlighted in neon pink, visually recalling the act of manually marking passages with a highlighter or marker pen. This technique references practices common in activist reading and zine culture, where texts were often annotated, underlined or emphasized by hand. In the interface, this visual strategy reinforces the importance of specific concepts, guides the reader’s attention and further contributes to the handmade aesthetic.
The Windows 95 layout is a homage to the operating system that defined the graphical user interface for a generation. Released by Microsoft in August 1995 under the codename "Chicago," it introduced the Start menu and the taskbar—elements that remain standards in UX design today. This layout was chosen to evoke the specific nostalgia of the mid-90s "Vaporwave" aesthetic, prioritizing a utilitarian, gray-scale "3D" look over modern flat design.
Visually, the design strictly adheres to the aesthetic standards of the era. The background color is set to the specific "Windows Teal" (#008081), providing high contrast for the windows. Unlike later iterations like Windows 98, which introduced gradients in window title bars, this theme utilizes solid dark blue (#000181) for active headers and silver-gray (#C3C3C3) for surfaces, maintaining historical accuracy.
#008081
#000181
#C3C3C3
The primary technical challenge was neutralizing the modern "softness" of the base framework to replicate the rigid, pixel-perfect nature of 1995 software. A global override (* { border-radius: 0 !important; }) was applied to strip away all rounded corners.
* { border-radius: 0 !important; }
To replicate the iconic "chiseled" 3D look of buttons and windows, we avoided standard drop-shadows. Instead, we reverse-engineered the "Windows 95 UI Kit" from the Figma Community [1] to implement two distinct CSS techniques:
box-shadow: inset
inset 2px 2px 0px white
For the active "pressed" state of buttons, the code inverts these shadow colors and applies a transform: translate(1px, 1px) shift, creating a tactile feeling of mechanical depression.
transform: translate(1px, 1px)
Typography is handled by the custom web font 'W95FA', which reproduces the bitmap appearance of the original MS Sans Serif. To ensure crispness on modern high-DPI displays, the CSS property image-rendering: pixelated was enforced globally.
image-rendering: pixelated
Finally, the theme is identified by the icon of "Clippy," the animated paperclip assistant. Although Clippy was technically introduced in Microsoft Office 97 rather than the initial Windows 95 launch, he has become a cultural shorthand for the Microsoft ecosystem of that era. His inclusion serves as a deliberate nod to the intrusive yet memorable user interfaces of the late 90s.
This last theme interprets the witch as a technologically augmented figure in a dystopian near-future, in which she inhabits a hybrid space between the occult and the digital, bridging ancient magic and futuristic technology. The main inspiration comes from cyberpunk, a dark subgenre of science fiction that emerged in the late twentieth century, portraying societies in which advanced technology and unregulated capitalism have radically reshaped everyday life, often leading to social decay and inequality. The combination of the punk and hacker subcultures played a fundamental role in shaping the cyberpunk imaginary. The movement gained visibility in the 1980s with the publishing of influential works such as Blade Runner (Ridley Scott, 1982), Akira (Katsuhiro Otomo, 1988) and later Ghost in the Shell (Mamoru Oshii, 1995). This dark style then entered mainstream culture with the release of The Matrix trilogy and has since influenced a wide range of media, from videogames such as Cyberpunk 2077RPG to fashion and graphic design, becoming a dominant visual language for imagining the future.
Within this framework, we decided to reimagine 2035 as a cyberpunk world in which magic and technology coexist and the witch is a figure of resistance. In order to recreate this kind of aesthetic, neon cyberpunk elements are blended with hi-tech and sci-fi references, emphasizing the idea of rebellion and disruption of the dominant system operated from within. The ultimate goal is to echo the exhibition’s broader narrative: witchcraft reshaped through time, from myth to digital empowerment.
In graphic design, cyberpunk aesthetics break modernist conventions through digitally altered typography, irregular layouts, and aggressive color palettes. We adopted a primary three-color palette, erin green (#1AFE49), neon magenta (#E600FF) and electric cyan (#00F6FF), complemented by violet blue (#3D43B4), which is used sparingly for contrast. These chromatic choices recall classic cyberpunk visual codes: neon green evokes energy and the visual language of hacking and signal interference, electric cyan is used for holographic effects and magenta introduces a sense of danger and rebellion, reinforcing the cyber-witchy vibe of the website.
#1AFE49
#E600FF
#00F6FF
#3D43B4
The background features an animated holographic grid inspired by retro CRT interfaces, creating spatial depth and anchoring the entire experience inside a “digital space”. To avoid overstimulation, animations are used selectively, primarily in glitch-based hover states and small UI elements, that simulate instability and technological malfunction. Accessibility considerations are addressed through the use of the prefers-reduced-motion media query, which allows users who require reduced motion to experience a calmer interface without animated effects. High-contrast color combinations further support readability on dark backgrounds.
prefers-reduced-motion
The videogame Cyberpunk 2077 played an essential role in reviving public interest in cyberpunk aesthetics, particularly through its user interface design. Its typographic system served as a key reference for our theme. While the game primarily employs Rajdhani for interface elements and Orbitron for secondary text, we slightly reversed this hierarchy.
Orbitron, a geometric sans-serif typeface designed by Matt McInerney in 2009, features futuristic and post-apocalyptic influences. Due to its strong visual personality, it is used primarily for headlines, navigation elements and titles. For body text, we selected Rajdhani, a sans-serif font family designed by Satya Rajpurohit and Peter Bilak, characterized by squared letterforms and a clean geometric structure. Its clarity and legibility make it suitable for extended reading while maintaining a technological tone. This dual typography system ensures both visual impact and readability, reinforcing the high-tech cyberpunk atmosphere without compromising usability. In addition to this, a limited use of Courier New is introduced within the item page to reference command-line interfaces and early computing environments. Its restrained use creates a visual distinction between descriptive text and technical or archival data, reinforcing the idea of interacting with a digital system rather than a traditional webpage.
Following the implementation of the interface and thematic layouts, developed through a distributed workflow in which each team member worked independently, a dedicated code revision phase was carried out collaboratively to improve the readability of the CSS. During this stage, the team made selective use of a Large Language Model (LLM) as a support tool for code cleanup, including the identification of redundant rules, the consolidation of repeated declarations and the reduction of unnecessary !important overrides.
!important
In this phase, all stylistic decisions, layout logic and interaction behaviors had already been defined by the team. The LLM was therefore employed as an assistive reviewer rather than as a generative design tool. The revised code was then manually reviewed and tested to ensure functional equivalence and visual consistency across themes and devices.
This process contributed to a cleaner and more maintainable codebase, aligning the project with best practices in front-end development and supporting future scalability and readability.
The purpose of this web site is to explore various types of typographic and layout style for musem 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 © Maryam Dadrasrazi, Miriana Pinto, Sara Roggiani.
The team behind the Witches Through Time project.