Responses by Matteo Bonera, creative director; Sara Piccolomini, digital co-lead designer; Francesco Pontiroli, digital co-lead designer; and Francesco Roveta, design director, The Visual Agency.
Background: “DivineComedy.digital provides visitors with a unique, holistic exploration of a vast collection of artworks related to Dante Alighieri’s greatest work: the Divine Comedy,” explains Matteo Bonera. “Through an interactive visualization that completely maps the plot of Alighieri’s masterpiece, the site lets visitors explore the content of the Divine Comedy and its related imagery in new ways. Thanks to the site, users can access one of the most influential works of the Medieval world, shedding new light onto artists’ interpretations of the work.
“The site is conceived to be easily used by the general public,” Bonera continues. “People who have limited or no previous knowledge of the Comedy’s text can dive into the plot and listen to its verses while looking at related artwork. The site’s features also support teachers in engaging students in their lessons not only in Italian literature but in art history as well. Domain experts can also find benefits in crossing navigational paths and analyzing connections among authors, artists or museums.”
Design core: “The site’s main feature is the double function of the main visualization,” says Sara Piccolomini. “It’s a tool by which users can understand the structure of the Divine Comedy, but also a navigational menu that organizes the images. Users can resize the visualization in accordance with the number of works or the number of verses they are interested in.”
Favorite details: “We are very proud of the color treatment we have designed for the visualization,” Piccolomini says. “The gradient associated with the various parts of the Divine Comedy adapts according to the navigation of the user. By moving up or down with the arrows in the menu and in the gallery, you can appreciate the color variation. Due to this feature, we associated each scene with a different background color and a specific side menu.”
Challenges: “Between illuminated manuscripts, engravings, canvases, frescoes and drawings, more than a thousand artworks needed to be classified in order to enable users to explore this digital collection by content type,” says Bonera. “This site was born with a wide selection of existing works but will continue to grow with the contributions of visitors. In order to help it continue to grow, visitors can suggest artworks not included in the collection through the Suggest An Artwork page, where they can fill in the form with the required information to let us know what is missing.”
New lessons: “The most interesting thing we’ve learned is not related to the design or development process but more on the subject matter,” Bonera explains. “Thanks to the main visualization, we’ve been able to see that—despite what philologists and educators believe—the three Canticas are not perfectly symmetrical. They do have the same structure, but there are some differences that don’t perfectly overlay each other. In terms of the number of verses, the differences between them are already known—despite the additional Canto One of the Inferno—but the structure of each of the settings in terms of Circles, Terraces and Spheres is slightly different. Thanks to the visualization, you can see the differences in structure in a way that hasn’t been possible before.”
Navigation structure: “As an information design agency, we work daily to find effective solutions to visualize often complex data and information,” says Francesco Roveta. “This complexity must always be accompanied by an interface that makes its use clear and understandable. However, there are many points in common between an effective visualization and an effective interface. When we approached this project, we began from a very simple but very challenging question: What if the main visualization and the navigation interface are the same object?”
Special navigational features: “What we wanted to achieve with the navigation was something that would break users’ habits,” says Bonera. “We wanted to a create a ‘slow-surfing’ experience. To reach this objective, we relied on a couple of design solutions: a horizontal scroll and a bottom-to-top structure for the main visualization. This also helps reinforce the path of the Divine Comedy; Dante and Virgil are archetypically thought to be traveling downward through the Inferno, but the whole path of Dante’s redemption actually develops upwardly from the Earth to Paradise. We want users to take their time while listening to the Divine Comedy’s verses, and I think these are some of the most interesting features in terms of design.”
Technology: “The starting point of this site lies in a large amount of manual work on the content—both in terms of analysis and visual representation of the Divine Comedy, and in terms of research and cataloging of visual and audio content,” says Francesco Pontiroli. “For the aggregation and processing of data, we developed several scripts in Node.js useful for the preparation of the data for the front end. The site was developed using Vue.js and libraries including d3-hierarchy, Flickity, howler.js, Lottie Web and three.js.”
Special technical features: “The visualization of the structure is inspired by a visualization made by Mike Bostock that was redeveloped using Vue.js and d3-hierarchy, adding functionalities according to specific needs,” Pontiroli says. “Graphical rendering was achieved through the direct manipulation of shapes within an SVG element. Particular attention was required for the background gradient to respond to the user’s position within the Divine Comedy, as well as for the ability to resize individual segments based on the content.”