2020

2025

2019

2018

2021

2022

2023

2024

2026

Matteo Bonera

Sara Perozzi 

Federico Fracascio

Giulia Zerbini

Daniele Berto

Francesco Pontiroli

Giulio Bertolotti

Xully Nguyen

Giacomo Bettiol 

Individual Credits

Design Director

Design Company

Website

Client

Matteo Bonera - Creative director 
Sara Perozzi - UX/UI designer
Federico Fracascio - Database editor
Giulia Zerbini - Front-end developer
Daniele Berto - Back-end developer
Francesco Pontiroli - Front-end developer 
Giulio Bertolotti - Motion designer
Xully Nguyen - Motion designer
Giacomo Bettiol - Logo designer 

Design Team

https://vimeo.com/manage/334622085/general

Video (direct link)

In occasion of the 500 years anniversary of Leonardo Da Vinci’s death, we from The Visual Agency - an information design agency specialized in data-visualisation and infographics based in Milan - have conceptualized, designed and developed an innovative instrument that enables users to independently elaborate on and discover the Codex Atlanticus in a way that has never been possible before. 
The Codex Atlanticus is a collection of 1119 atlas sized pages of drawings and writings created by Leonardo Da Vinci during the ears between 1478 to 1519. The subject matters of the Codex cover a great variety of topics from geometry and war-machines to human science and architecture.

The bilingual website (Italian and English) www.codex-atlanticus.it offers a panoramic overview of the Codex Atlanticus combined with drill-down and analytical functions to explore this epic work in more detail. Rearranging and filtering the pages of the Codex uncover insights into Leonardo Da Vinci’s thought evolution and professional focus. 

The visitors of www.codex-atlanticus.it can browse through the Codex starting from a panoramic overview organized by subject matter and year of creation of the pages. Selecting one particular subject matter or theme it is possible to filter and highlight pages of particular interest. Especially interesting is the possibility to reorganize the Codex’s pages according to their chronological order of creation. Choosing one specific page it is possible to see the front and back side of the page and to investigate further on specific arguments before moving on to pages of similar content.

The backbone of the entire project is the electronic database that has been created by The Visual Agency which is based on Augusto Marinoni’s work The Codex Atlanticus of Leonardo Da Vinci: Alphabetical index of subject matters. In this work the historian Marinoni catalogued the content of each page according to subject matter and time of creation. He established a vast database that allowed us through our interactive application to drill-down into the fragments of each page, the time of creation, subject and sub-subject matters.

The design of the page module was the result of a long process of sketching data. Our goal was to find a flexible visualization of a single page that could be easily scaled down, readable and, at the same time, able to show an intuitive overview of the codex’s composition.

We created a custom module that visually summarized the subjects contained on a page as well as the numerical and chronological order of the page in the collection. The final result was the consequence of different attempts to combine the data of the page in a single visualization.

Given the amount of data that we had to process, we mostly tested our design through the implementation, creating scripts that could plot the design for all the pages of the codex. This process allowed us to design and test a lot of different options before choosing the most effective one for the application.

Once the visualization module was defined, we started focusing on the design of the entire experience. The design process started with some user research on different targets for the three supports we decided to develop. The user research led the design of the interfaces for three devices: web, mobile, and a 27-inch touchscreen sited in the Ambrosiana library, among the original pages of the Codex Atlanticus. When working on these different devices we needed to keep in mind that our goal was to create a product that could be easily accessible and useful both for experts and non-experts in Leonardo’s work.

We wanted to create a tool that could help our target audience to explore the Codex Atlanticus through data visualization. To do so, we had to make it as easy as possible to explore and understand the data, letting the users coming up with their own stories and conclusions. As an exploratory project, the goal is the exploration through data visualization. Given the complexity of the project, we found it really helpful to combine the user research with the user testing in order to build an effective design.

The entire database has been made open source for further analysis, translations and integrations

Gold Winner in Digital Tools and Utilities for Digital Design

Codex Atlanticus