Loading ...

Responses by Louis-Pierre Chouinard, UX/UI designer and founding partner; and Xavier-Cedric Gareau, UI designer, Deux Huit Huit.

Background: To celebrate the 700th anniversary of the death of Dante, a major figure in Italian literature—the Italian Cultural Institute of Montreal and its partners have decided to organize a major digital exhibition on the Divine Comedy, the writer’s mythical work. The exhibition had been planned for January 2021 in a physical space, but given the uncertainty caused by the pandemic, it turned into a 100-percent digital experience—and we were commissioned to lead the project.

Supported by the Social Sciences and Humanities Research Council of Canada in collaboration with the Center for Medieval Studies at the University of Montreal, Concordia University and McGill University, the exhibition presents an overview of the Divine Comedy’s reception over the centuries. On one side, it examines the Divine Comedy’s heritage in medieval manuscripts of the Naples-based library Biblioteca Nazionale “Vittorio Emanuele II” and the Florence-based libraries Biblioteca Nazionale Centrale and the Biblioteca Medicea Laurenziana. On the other side, the exhibition features a collection of prints concerning Dante and his work kept by the Library of Rare Books and Special Collections of the University of Montréal and by the Rare Books and Special Collections of McGill University. This corpus of manuscripts and printed matter offers significant textual and iconographic material about the reception of the Divine Comedy over the last seven centuries on both sides of the Atlantic. The digital exhibition represents the spiritual journey of man through life, viewed through the lens of connoisseurs of Dante’s work, history enthusiasts and curious visitors of all ages.

Design core: The user flow of the digital experience follows the structure of Dante’s masterpiece. The Divine Comedy is divided into three books of equal length: Inferno, Purgatorio and Paradiso. Each book is made up of 33 sections called ‘cantos’ with an additional introduction for Inferno.

Throughout history and literature, Dante has always been represented by the color red. Also, his vision of hell was very dark. To embody this aspect, we made the design decision to limit ourselves to a palette of only three colors: red, black and white.

We believe the main element of the website’s style is its predominant typography. Using Boogy Brut, a serif designed by Bureau Brut, paired with Untitled Sans, a neo-grotesque typeface by Klim Type Foundry, we struck the right tone for the whole experience while being both legible and readable.

Favorite details: We enjoyed developing a series of animations using geometric shapes that evoke parts of the story in an abstract fashion. It creates a good rhythm between chapters while supporting the topic. To work on the animations, we used AEUX, a very useful add-on for transferring Figma layers into After Effects.

Challenges: The density and scope of the content. We had to find the right balance between the visual experience and the textual content in order to invite users into reading without feeling overwhelmed. Also, our own visual decision to limit the design to only three colors was tough—but in the end, we’re quite happy with the result!

Time constraints: We had a fair amount of time to work on the project. Due to the pandemic, our collaborators had difficulty accessing the Italian libraries and institutions where they had to digitize the documents and manuscripts.

Divergent paths: From a technological standpoint, we would have used Svelte, which has been our preferred JavaScript framework over the years. We like how self-contained Svelte code is, as it combines HTML, JavaScript and CSS into a single file. We also like how Svelte is not only a framework but a compiler as well, facilitating easier tweaking of the stack.

New lessons: One beautiful thing about our job is how we get to learn so much from the topics of the many projects we work on. In this case, we got to dive deeply into the literary work of Dante and realize that he still impacts our present-day popular culture.

Navigation structure: Due to the site’s large amount of content, navigation and site structure proved to be a challenge! We developed a distinct color palette for each section, from dark for Inferno to bright for Paradiso. Many chapters subdivide each section, so to mark the passage from one chapter to another, we created an animation for users to scroll through. This helps to create a visual break in between chapters, guiding the user through extensive textual content. A progress bar located on the top right of the interface also guides users and enables them to jump from one chapter to another.

Special features: We had the chance to work with historical documents specifically digitized for the project. All images are clickable, allowing users to zoom in on the images and look at all the superb details within the book illuminations, drop-cap illustrations and ancient manuscripts.

Technology: Craft CMS is our preferred open-source content management system mostly for content creation, management and its built-in functionalities. It’s a very intuitive platform designed with web developers in mind. This gives us the freedom to design and build any kind of website from the ground up with no limitations or friction. For the front end, we built the site using Tailwind CSS and Next.js with the React framework. We used Vercel to deploy the front end.


Browse Projects

Click on an image to view more from each project

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Already a subscriber or have a Commarts account?
Sign In

Get a subscription and have unlimited access
Already a subscriber?
Sign In