Art-strology

Insert project Title here is the final project of the course "Information Modeling and Web Technologies", taught by professor Fabio Vitali during the academic year 2023/2024 and part of the master degree program in Digital Humanities and Digital Knowledge at University of Bologna.

2. Project Overview

Insert project Title here is thought as a useful and engaging platform to support visitors in planning their visit and exploring the museum.

2.1 Exhibition

The exhibition offers a multidisciplinary experience that blends ancient art, astrology, and symbolism. Its main goal is to explore how different cultures perceived and interpreted the stars by identifying shapes and symbols. We have selected a series of artifacts from four distinct cultures: Babylonian, Egyptian, Greek, and Chinese. Each artifact is linked to the symbolism and mythology associated with constellations. The exhibition aims to create a bridge between these cultures, showing how they viewed the stars, how modern constellations were understood in ancient times, and how these ancient representations continue to influence today's conception of constellations.

2.2 Objects

Nineteen artifacts from different cultures were selected for the exhibition, with careful attention to their symbolic meanings and connections. All artifacts are well representative of the artstyle and traditions of their country of origin,while also being linked to one another through their associations with the stars.The four cultures featured are Babylonian, Egyptian, Greek, and Chinese. Each of this cultures were mastars in the art of astrology. Each of these cultures excelled in the art of astrology: the Babylonians created the earliest known horoscope, the Greeks identified many constellations that are still recognized today, and the Egyptians and Chinese are noted for their unique contributions. A significant effort was put into comparing how these cultures interpreted the constellations and what kind of symbols were associated with them.

2.3 Project goals

Insert project Title here’s aims are:

Providing visitors with tools and information to plan their visit to the museum and explore the exhibition on site
Offering a platform for easy access to detailed information about the items.
Enhance the experience by allowing visitors to personalize their visit according to their interests.

2.4 Target Users

This project is designed for a diverse range of users, catering to various interests and needs based on factors like education level and available time. Given the multidisciplinary nature of the exhibition, we’ve ensured that the platform accommodates users with different levels of interest.
For casual visitors, the website is crafted to be engaging and spark curiosity. It provides accessible information for those with little prior expertise, ensuring a welcoming experience.
For expert visitors, the platform offers in-depth content tailored to those with a passion for subjects like archaeology, astrology, or mythology. More detailed information is available to satisfy their desire for deeper knowledge.
Users can filter the information based on their available time and specific interests, by interacting with the buttons beneath the text in items pages, to display more or less.

2.5 Narratives and Storytelling

Storytelling is a powerful tool for enhancing the interaction with cultural heritage. The following narratives were chosen to draw meaningful connections between artifacts and create paths that visitors can follow to discover the collection:

Chronological Narrative: Explore items in the order they were created.
Geographical Narrative:Discover objects based on their country of origin.
Constellation Narrative:Learn about the connection between subjects depicted in artifacts and constellations they were associated with.
Symbolic Narrative: Uncover the symbols and figures represented on the objects.

3. Structure and website architecture

The website is designed with a clear and intuitive architecture, ensuring smooth navigation across the different narratives and sections. The structure is built to highlight the connection between the objects, their cultural significance, and the overarching themes of the project.

3.1 General Overview

The website is structured around four main narratives: chronological, geographical, constellation, and symbols. Each of these provides a different perspective on the objects in the collection. The main goal of the architecture is to allow users to organize their visit inside the museum and to explore the relationships between the artifacts while maintaining a structured and user-friendly experience.

The navigation system is designed to be intuitive and context-aware, ensuring that users always understand their position within the website.
A fixed top navigation bar provides direct access to key sections, such as the homepage, narratives, and documentation.
Each narrative page includes a header section displaying the current narrative's title and cover image, which dynamically change based on the user's selection.
Internal links within the object descriptions allow users to seamlessly switch between narratives, facilitating cross-referencing between the different perspectives.

3.3 Main Pages & Their Role

Home Page: Introduces the project and provides direct access to the four narratives. It also provides access to the Interactive Map and to the Timeline. Also, it displays a carousel with all the items in the exhibition to give a first overview of the items to the user.

Item Pages:Each object has a dedicated page displaying:

The object’s image (clickable for a zoom-in lightbox view)
A table with essential metadata, including clickable links to switch between narratives
An expandable description detailing its physical characteristics, cultural context, and symbolic meaning
A button linking to the museum map, showing the object's physical location in the exhibition
Cards linking to related narratives, offering an additional navigation path

Collection Page: The page were the user can see all the items in the exposition. All the images present basic metadata to introduce the object. Those images are clickable and lead the user to the item page where it is possible to read all the information about the item.

3.4 Internal Linking & Content Relationships

The architecture emphasizes strong internal linking to encourage exploration:

Each item page contains multiple navigational links within the metadata table and also a link to the map of the museum.
The cards at the bottom of item pages serve as an alternative way to switch between narratives.
The timeline, the map and the collection page all link back to detailed item descriptions.

4. Design elements

4.1 Layout

The following section provides a detailed description of the design choices made for each of the main pages of the website.

4.1.1 Homepage

Art-strology is designed with a clear hierarchical structure, integrating modern web animations and interactive elements to create an immersive exploration of zodiac culture across Babylonian, Egyptian, Greek, and Chinese civilizations. The page consists of the following key sections:

Navigation Bar: Fixed at the top for easy access. Contents: Includes links to Home, Narratives, Map, Timeline, and Collection, allowing smooth navigation between sections.
About: Includes introduction to the project, describes the exhibition’s goal and explains how the exhibition blends ancient art, astrology, and symbolism to explore different cultural interpretations of the constellations.
Collection: Features a sliding gallery (slider) displaying artifacts from various cultures. Utilizes AOS (Animate On Scroll) for fade-in animations, enhancing user engagement.The images are arranged within a looping slide track, ensuring a smooth scrolling experience. Each artifact is presented as a moving card that can be paused on hover. Clicking on an artifact redirects users to the collection page.
Narratives: Organizes artifacts through four storytelling approaches: chronology, geography, constellations, and symbols, offering diverse ways to explore the exhibition through different narratives.
Explore: Offers the users two different tools to use while exploring the exhibition: The Interactive Map, which provides a visual representation of the artifacts’ placement at the museum; the Interactive Timeline, which displays the artifacts in chronological order, illustrating historical evolution.
Find Us: Provides the location for Fondazione Luigi Rovati and opening hours, making it easy for visitors to plan their visit.
Footer: Includes copyright information and project background, acknowledging its development as part of the University of Bologna’s “Information Modeling and Web Technologies” course.

Design Style: Minimalistic and well-structured, with modern animations that enhance immersion.
User Interaction: Features scroll-triggered animations, a sliding gallery, cards that represent each narrative and interactive exploration tools.
Clear Structure: Guides users through navigation → introduction → collection → narratives → interactive exploration, creating a seamless and engaging experience.

✨ Final Outcome: A visually dynamic and interactive exhibition page that welcome the users and allows them to explore the artifacts in the exhibition by following different narratives!

4.1.2 Items Page

This page allows users to explore the four narrative perspectives: Chronological, Geographical, Constellation, and Symbolic. Given the interwoven nature of these narratives, the primary focus during the development of this page was to ensure a smooth navigation while maintaining clarity. The goal is to always make it clear which narrative the user is currently viewing.
To achieve this, a header section at the top of the page displays the title and an image corresponding to the active narrative. As users switch between narratives, both the title and image dynamically update, providing a clear visual indicator of their current position.
At the center of the page, users find:

The image of the item, its name, and a table containing key information about the object.
Three of these details (Geography, Constellation, and Symbol) are clickable links, allowing users to switch to the corresponding narrative.
The item image itself is interactive: clicking on it opens a lightbox, enabling zoom functionality for a closer look at details.
A button is available to access the museum map, helping users locate where the item is physically displayed.

The "Object Description" section provides detailed information, covering:

The physical characteristics of the object.
The history and significance of its constellation.
Its symbolic meaning in mythology.

By default, only a general introductory paragraph is displayed, but users can expand the section to read the full content.
Finally, at the bottom of the page, narrative cards present alternative pathways to the other three narratives linked to the item. These serve as a secondary navigation method, ensuring that users can easily explore different perspectives, even if they do not initially notice the links within the descriptive table.

4.1.3 Collection Page

The "Explore the Collections" page organizes artifacts based on their geographical location, ensuring a cohesive and visually harmonious presentation. Each artifact is displayed in an animated card format, with hover effects revealing its name and historical background. Users can click on the cards to access dedicated information pages for a deeper exploration. Additionally, the page features a responsive design, adapting seamlessly to different screen sizes for an optimal browsing experience on desktops, tablets, and mobile devices. The overall aesthetic combines modern web design with historical storytelling, enhancing interactivity and immersion in the exploration process.

4.1.4 Map Page

The museum map has been designed as a functional and interactive tool, enabling visitors to explore the collection based on their interests and needs. A navigation bar is positioned over the main image to grab the user's attention and provide an easy way to filter the collection by narrative themes. When applicable, sub-narratives appear in a sub-navigation menu, using a lighter color to visually indicate their subordinate relationship to the main navigation. Navigation buttons change color when hovered over or clicked, offering a responsive and interactive experience.
The map itself is interactive. The areas where items are displayed change color on hover or click, and a popover appears showing the name and an image of the selected item. The popover images are formatted according to the item's structure—horizontal, vertical, or square—to best suit its proportions. The popovers have a white background with black text to enhance readability.
Numbers are placed next to the items on the map to guide visitors both during their physical visit and while exploring the website, signaling the position of objects within the space.
A sidebar section containing links to each item's individual page is positioned on the right of the map. This layout ensures that the user's attention is initially drawn to the main image, followed by this section, which provides useful content to enhance the overall experience. The section dynamically updates based on navbar selections, directing users to items relevant to the chosen narrative. Additionally, a button labeled “Explore this narrative!” takes visitors to the first item in a selected narrative, allowing them to view the full list of items in the correct order.

4.1.5 Timeline Page

The website features an interactive timeline designed to provide a chronological overview of all the items in the collection. Each item is displayed with its name, creation date, and an image.
For every item, two accessible links are provided:

A link to the item's dedicated page within the chronological narrative, where users can access detailed information about the object.
A link to the original museum where the item is housed.

Navigation through the timeline is intuitive, with arrow buttons allowing users to move to the next or previous item in chronological order. Additionally, a visual timeline at the bottom provides a clear representation of the temporal positioning of the objects and the relative time-spacing between them.
The timeline was implemented using KnightLab.

4.2 Color Palette

The project's visual identity is deeply connected to its central theme: constellations.
The two main colors used throughout the website are:

#F0DAB3 – a soft, warm beige
#8DADC1 – a muted, desaturated blue (used for the navbar and footer)

These shades are meant to evoke the sky and the stars, but in a subdued, aged tone. This approach not only reinforces the celestial theme but also conveys a vintage aesthetic, aligning with the historical nature of the artifacts and the ancient civilizations they originate from.
The beige color is used as the primary background for the website, providing a soft, neutral canvas that enhances the visibility of the content and images. The blue color is used for the navbar and footer, to create a subtle contrast and frame the content.
Both colors are also present inside the cover images chosen for the narratives, as well as from the main visuals featured on the homepage and the header of the documentation page.

The font color is black, ensuring optimal readability against the lighter backgrounds.
A neutral light gray is used as a background for titles, images, and buttons, creating subtle contrast and emphasizing key elements without overwhelming the design.
By combining these elements, the color palette achieves a harmonious balance between historical depth and celestial inspiration, enhancing both the navigational clarity and the immersive storytelling of the project.

4.3 Typography

The website's typography was carefully chosen to ensure clarity and readability.
Font Choices:

Headings and titles use Crimson Text, serif, a typeface that evokes a classic and timeless aesthetic, reinforcing the project's focus on ancient civilizations and historical artifacts.
Body text, navbar and footer use a sans-serif font, ensuring clean readability.

The font color is black, providing high contrast against the light beige background for optimal legibility. Bold text is used within the paragraphs that describe the items to emphasize key points, helping users quickly identify the most important information while reading.
This typography selection balances modern usability with a historical touch, aligning with the vintage-inspired color palette. By combining these elements, the typography supports the narrative-driven structure of the website while maintaining a harmonious and visually engaging design.

5. Functionality

The website consists of multiple interactive sections, including a homepage with a hero image, parallax effects, and a scrolling slider, as well as a collection page displaying items in a structured grid format. The homepage features hover-sensitive cards with overlay captions and buttons, while the collection page presents image-based cards that reveal details on hover. A structured footer provides additional content, ensuring a complete and informative browsing experience.

5.1 Responsiveness

The website is fully responsive, adjusting seamlessly to different screen sizes. The grid layout of the collection page dynamically adapts, switching to an auto-fit column structure for mobile devices. The homepage sections, including parallax backgrounds and text blocks, adjust padding and text size based on the viewport. Media queries fine-tune layouts to ensure consistent readability, proper spacing, and an optimal user experience across devices.

5.2 Animations

Smooth transitions and hover effects enhance interactivity throughout the website. The hero section incorporates a background image with an optional blur and brightness animation for a dynamic introduction. The image slider in the homepage auto-scrolls while pausing on hover, and the collection page cards apply a subtle scaling effect alongside a blurred background transition when hovered. Various hover effects on text, images, and overlays create a seamless and engaging user experience.

5.3 Map

The Interactive Museum Map (Museum Map) is a digital tool designed to help users explore museum collections and spatial layouts. It combines map navigation with thematic curation, allowing visitors to browse exhibits in multiple ways. Users can freely explore different areas on the map and view the distribution of exhibits in various halls. The map supports different narrative(geographic location, constellation, timeline, and symbolic) storytelling methods, enabling users to understand exhibits from different perspectives. Clicking on an exhibit marker reveals detailed information, including its name, date, materials, and historical background. Users can refine their search based on exhibit types, enhancing personalized exploration. On each exhibit's detail page, users can click "See the Map" to locate the exhibit's exact position within the museum. This interactive map is ideal for online research, exhibition guidance, and even as a tool for planning museum visits, offering an immersive digital experience for visitors.

5.4 Timeline

The "Timeline" page provides a visual timeline that allows users to see key historical artifacts and narratives related to the museum's exhibits, helping visitors understand the progression of historical events and their context within the collection. Users can explore items in sequence by navigating through the timeline using left and right buttons. This interactive design offers a seamless way to discover artifacts and their connections to the museum's broader narrative. For more details, visit the full page.

5.5 Accessibility

The website presents an interactive exhibition blending ancient art, astrology, and symbolism. It explores how cultures such as Babylonian, Egyptian, Greek, and Chinese perceived star constellations. Users can explore artifacts through various narratives: chronological, geographical, constellations, and symbols. The platform also features an interactive map and timeline for exploring items in context. Each artifact is linked to its cultural significance, helping visitors understand the connections between mythology, astrology, and art.

6. Workflow

After our team identified a shared interest in constellations, we decided to create a project focusing on artifacts related to ancient civilizations such as Egypt, Babylon, Greece, and China. We studied examples from prominent museums like the Louvre, Victoria and Albert, and the British Museum to understand their online presentations and design strategies.

Our process included both collecting relevant artifacts and evaluating digital museum platforms to identify the most engaging and user-friendly design approaches. We settled on a curation strategy involving storytelling through chronological, geographical, shape-based, and constellation-related perspectives.

This multi-layered approach helps highlight the intricate connections between mythology, astrology, and art. To facilitate exploration, we incorporated interactive features such as a dynamic timeline and a geographical map. The "Timeline" page allows users to view historical artifacts in sequence, offering insight into the evolution of cultural and scientific perspectives across time. The interactive museum map helps visitors navigate the exhibits, displaying the spatial distribution of artifacts, and enabling users to learn about each item through its context within a specific geographical location, time period, and symbolic meaning. Each artifact’s detailed page is organized in a structured format with key information, including cultural significance, materials, date, and associated constellations or symbols. The layout allows users to click on specific aspects of an artifact to shift between narratives, enhancing their experience.

At the same time we also developed a collection page, which organizes items based on their geographical location. This provides a visually harmonious presentation, showcasing artifacts in related groups. Each artifact is presented in an animated card format, with hover effects revealing its name and historical context. Users can click on each card to be directed to its dedicated information page.

Finally, the main page serves as the central hub, unifying all aspects of the project into an easy-to-navigate layout. The navigation bar ensures smooth transitions between the various pages, offering quick access to the timeline, museum map, artifact collection, and detailed item pages. The integrated design encourages visitors to explore the artifacts from different perspectives—geographically, chronologically, symbolically, and through the lens of constellations—allowing for an immersive experience. The seamless interaction between dynamic elements ensures that users engage deeply with the historical and cultural narratives behind each exhibit.

7. Credits and Tools

7.1 Acknowledgment

This website was created as part of the "Information Modeling and Web Technologies" course for the Master’s Degree in Digital Humanities and Digital Knowledge at the University of Bologna, under Professor Fabio Vitali.

7.2 Tools & Platforms

Cultural Objects Collected from Museums:

© British Museum - EUROPA CARRIED OFF BY THE BULL, HERAKLES AND THE GOLDEN APPLES, THE ADDA SEAL, ORANGE-CREAM SHELL CYLINDER SEAL, HANGING SCROLL WITH XUANWU
© Metropolitan Museum of Art - BRONZE RELIEF OF A VEILED WOMAN RIDING A SEA-GOAT, WALL PAINTING: PERSEUS AND ANDROMEDA, PALETTE DEPICTING A PAIR OF MUD TURTLES, ROOF TILE END WITH ZHUQUE

Tools:

8. About Us

Anna Pasetto

Research and texts about Egyptian artifacts
Design and implementation of timeline page,
Design and implementation of item page
Implementation of item page javascript
Design and implementation of footer
Documentation writing

Valentina Bertelli

Research and texts about Greek artifacts
Design and implementation of map page
Implementation of item page javascript
Documentation writing

Ezgi Çolakoğlu

Research and texts about Babylonian artifacts
Design and implementation of homepage
Implementation of item page javascript
Design and implementation of website navbar
Documentation writing

Kaosaier Wusiman

Research and texts about Chinese artifacts
Design and implementation of collection page
Image research and editing
Documentation writing

DOCUMENTATION PAGE

1. Introduction