Tommaso Zennaro — Interaction Designer

This is the sum of my MA course in Graphic & Editorial Design at Isia in Urbino, Italy. I chose to go the hard way for this project so I studied a new language. In this way I was able to develop a tool that would be helpful for my future projects.

I chose the JavaScript library D3.js, since the thing I love the most doing is data visualization. Learning and developing something from scratch for this project was something I really wanted to do for a long time, and I am thankful for the chance I had in doing this.

The resulting site is built with , HTML, CSS some JavaScript and some Svg as icing.

The graphs are built with: d3.js for the main graphic visualization, regression.js for generating the points of the linear regression line & some pure JavaScript.

This project wouldn’t have been possible without the help of my supervisor Luciano Perondi, my co-supervisor Valentina Rachiele, the dataset provided by Roberto Arista and some help from the StackOverflow community, especially Lars Kothoff.

Here below you can see a brief description of the project and the graphs in action, for the actual website you can click here.

Screenshot of the database shown in Excel

The starting database for the fonts consisted of ~400 single fonts, coming from different families and foundries, and 28 unique variables.

After some investigations on which were the most suitable ways to investigate such dataset, I chose to go with two different graphs: a scatterplot and an histogram.

The scatterplot below can be used to investigate single families or single fonts even; linear regression lines also show how the behaviour of the selection fits in the group.

After some discussions about which were the most interesting variables to show to generate the series of scatterplots, we figured out the best way to truly let the users explore the data, was to let them decide themselves.

Both axes can have every variable so all the variables can be mixed.

The controls on the right of the graph allow the users to customize the graph. Both axis" have a dropdown menu with variables to choose from, it’s also possible to further the customization selecting the saturation of the circles according to a third variable.

The fourth and fifth dropdowns can be used to select a single font family or even single font styles, to see in which part of the graph they are.

The histogram below can be used insted to analyze whole groups —in this case sans and serif fonts— to see average behaviours and trends that we might, or might not, be aware of.

The range slider allow users to control the precision of the histogram, manipulating the resulting graph. The range values are between 5 and 40, with a step of 1.

The x Axis variable dropdown menu works as in the scatterplot, and allows users to pick which variable to visualize.

The small circles under the histogram paths represent the amounts of fonts at that given point —if the histogram on one point shows the value 10, there will be ten circles underneath it, going from the path to the axis below.

Show/hide

Sans Line

Show/hide

Serif Line

Histogram precision

This project was developed at LUST while I was doing my internship there.

The client, WTTC, asked to provide fifteen panels of infographics regarding the ten countries that were taking part to the WTTC Americas Summit in Peru during September 2014, to promote the event through social media.

We started analyzing what is peculiar of Peru, what could be used as a way to emphasize the features of the country the summit was held in, and use it as a way that could help us develop infographics that were unique in their look to stand out from regular infographics.

After some testing, we wanted to try a typographical approach at infographics, using only text to convey the informations. What we come up with was a sort of cross-stitched typography, where we used two lines to represent each pixel of the letters and, changing the stroke of those elements, we were able to show the data underneath the elements.

As you can see in this overview, the variation of the strokes gives a clear hint that there"s more than simple type, and upon a closer look, you are able to grasp all the information lying beneath.

Here, on the left, the blue line represents the four attractions in the US, the green one the other six.

On the right panel you can clearly see how domestic and foreign tourist spending varies among those six countries, where in Brazil domestic travelers do spend the most, in Jamaica it’s the opposite.

Here, on the left, we can see the type of travelers that go to each country, and we can easily find out that in Jamaica most travelers go there for leisure purposes, as opposed to Argentina.

The right one is about the main industries that contribute to GDP in Peru and, as we can see, Travel & Tourism is the third biggest industry in the country. The thickness of the lines is proportional to the most and least contributing industry.

During my internship at LUST during spring-summer 2014, I worked on the exhibition Death in the City, which was named Death in Venice for the occasion.

I helped with the making of the content for the third room of the exhibition, which contained the infographics and the postcards with the flowcharts.

Death in the City is a research project and interactive exhibition exploring the relationship between modern architecture and death over the last century. The first iteration of the exhibition was held in Venice in June 2014.

The development of architecture related to death and dying has been, over the past decades, as vivid and significant as the development of other modern ideas that shaped the contemporary city. Nevertheless, it is rarely foregrounded in the architectural history of the 20th century.

Death in Venice shows the changing landscape of death in modern Britain, the site of early developments in modern western cremation and the modern hospice movement which helped to shape a broader Western context. It examines the changes which have taken place in Great Britain over the last 100 years, taking them as a point of departure to reflect on the current shape of death and the architecture which offers space for it.

The exhibition is split into three rooms, each offering a different way of interacting with the content.

The first room presents an interactive map of London, where the typical content is inverted: common landmarks are hidden while hospitals, hospices, crematoria and cemeteries are highlighted.

Labels and captions can be uncovered by the user but fade away again with time.

Death in Venice exhibition first room with interactive map and users

Death in Venice exhibition first room with interactive map close up and user

The second room approaches the subject through an emotional experience of sound and space.
The room is periodically filled with fog, so that projected light patterns create an intangible three-dimensional structure. These generated patterns abide by the rules of a custom cellular automata, which focuses on spatial relationships and biological processes.

Sound serves as an additional metaphor for death: sensory and pervasive, yet invisible. Each individual visitor is assigned a unique sound as they enter, while the projection creates a corresponding blank space surrounding the visitor’s body within the fog.

Both the sound and the projected patterns respond to the movements of each visitor, building a generative musical and spatial composition as visitors move through the space.

Death in Venice exhibition second room with beamer and fog screen

Death in Venice exhibition second room with user inside the beamed fog screen

The third room presents the research content in a focused, analytical way.

Large-scale flowcharts outline the common scenarios surrounding death during the four sample years, while stacks of postcards with archival photography, statistics and floorplans illustrate the changes in architecture, social attitudes and rituals over time.

These are accompanied by CNC-milled infographic panels that show the social and cultural shifts throughout the century. As with the first room, the content of these panels is "hidden" but can be revealed by rubbing them with charcoal.

Death in Venice exhibition third room overview

Death in Venice exhibition third room detail of one infographic panel

Death in Venice exhibition third room details of the infographic panels

Death in Venice exhibition third room overview of the wall with the infographic panels

Death in Venice exhibition third room rubbings on the infographic panels

Death in Venice exhibition third room results of the rubbings on the infographic panels

Credits:

Curation and exhibition concept: Alison Killing and Ania Molenda

Design: LUST with Alison Killing and Ania Molenda

Graphic design and interactive installations: LUST

Exhibition production support: AB Venice

Photo and video made by LUST.

This is a little booklet I made about Black Mountain College, North Carolina, for a school assignment.

I decided to make an infographic booklet to explain the 5 w’s of Black Mountain College.

It was created, among others, by John Andrew Rice and Theodore Dreier, in 1933. They were professors at Rollins College, but wanted to teach in a new -for their time- way.

So they brought many artists and professionals (many of them were escaping from Europe, as the Nazi regime also closed the Bauhaus the same year), and started this school, which involved students in a new way.

The printed booklet. The cover shows a landscape of Lake Eden and Black Mountain College illustration I made.

First of all I wanted to let people know where Black Mountain College was, so I decided to put emphasis on its location.Starting from broader maps of the United States I decided to zoom in until the place was visible on the right.

Here I made a brief introduction on the historical period when Black Mountain College was created.

I also mapped other US schools that adopted an innovative way of teaching, as Black Mountain College did.

The organization of the school was peculiar, more similar to a big family, so i wanted to explain it with a diagram.

Since every aspect of the life at Black Mountain College was coordinated by students and professors —even the building of their houses— it was interesting to show exactly of the organization worked.

The teachers of Black Mountain College were mostly from the United States, but some of them escaped from Europe because of the Nazi regime.

Darker hue indicates a higher number of teachers from that state.

A timeline showing the subjects taught at Black Mountain College, with the names of the teachers.

The period of time covered is from 1933 to 1959, when Black Mountain College closed.

For longer periods of time the hue is lighter.

A little biography of Theodore "Ted" Dreier, one of the founders of Black Mountain College.

He was not only one of the founders, he taught at Black Mountain College until it closed in 1959 and was one of the most loved figures there, without his personality Black Mountain College probably wouldn"t have been the same.

The timeline shows his formation and work experience.

A little biography of John Andrew Rice, one of the founders of Black Mountain College.

He was the first rector, and the first who tought of introducing new ways of teaching at the school.

He was a professor at Rollins College, with Dreier, but left to start working on Black Mountain College.

The timeline shows his formation and work experience.

The Atlas of public in Urbino is the result of a workshop led by Joost Grootens at ISIA Urbino.

The project analyzes different aspects of public space in Urbino.

Each workgroup (consisting of about 3 people) has developed a topic.

At the end of this process we designed 8 diverse maps according to different time bands.

The goal of the project was to mark a kind of "social map" of the city.

In the part of the atlas I worked on, with Alessio Macrì and Andrea Tolosano, a vast area of the centre of Urbino was analysed, the most interesting in terms of social relations. In the mapping phase all the places where usually people relate reciprocally as bars, restaurants, universities, churches, museums, tourist spots, public offices, were highlighted.

We described our design methodology in this article (in Italian). This project has been selected by ADI Design Index 2014 and published in ADI Design Index Catalogue 2014.

Credits:

Photos by Alessio Macrì.

Sansavenir — Libro bianco su Taranto is a book that illustrates the critical story of Ilva Taranto.

Together with Alessandro Busi, Roberta Cramarossa, Federico Conti Picamus, Giorgio Fanecco, Riccardo Zecchini and photographer Pierangelo Laterza, supervised by Mauro Bubbico we designed a book in which we present some utopian documents from the Sixties matched with contemporary pictures, manipulated and distorted to represent the actual conditions.

The book is divided in seven sections: an introduction formed by historical essays, from Pier Paolo Pasolini (La lunga strada di sabbia, 1959) to Mimmo Castellano (Statte km5, 1962) and six chapters that describe different aspects of the city.

In the first chapter, we took an excerpt from Pier Paolo Pasolini, La lunga strada di sabbia, where he narrates his arrival at the city of Taranto during a road trip along the whole coast of Italy, in 1959.

We used the InDesign plugin basil.js to increase the size of the text as the narrator gets closer and closer to the city.

This section takes a closer look at the Ilva factory.

We decided to show some data about the plant and make comparisons to show how vast it is, especially compared to the city that hosts it.

The data is accompanied with pictures taken from the outside of the facility.

This section is more focused on the environmental data and the issues related to the pollution of the area close to the factory.

We took al the data we could gather about air pollutants and plotted it to show how many days pollution levels were considered too high, using an hexagonal shaped calendar, to resemble the shape of the carbon-based molecules that make the pollutants.

We used the air data for the day and the place where the pictures were taken to glitch them, as if the camera was able to photograph the pollutant levels.

To do so, we used Glitch Sort, developed by Paul Hertz.

The last section is about the city of Taranto and its beautiful landscape, where we used pictures as postcards, as a last salute to that land.

Credits:

The pictures used in the book are made by: Pierangelo Laterza.

Photos of the book by Riccardo Zecchini.

This illustration is part of a bigger prjoect I took part in a course during my MA.

The main subject was student housing in the small town of Urbino, where students from all over Italy come to study since, despite the size and location of the town, there are many universities.

To gather data about student houses, we first started with an anonymous online survey, which granted us a relatively big sample without having privacy issues.

In order to let other people know about the results of our research, we then decided to show the results in a fun way during a public event.

The aim of the illustration is to show what we discovered with the data we collected in a fun and interesting way, staying away for the more serious and traditional data visualizations.

urbino student housing illustration overview

An overall view of the illustration, the road shows the way the data should be read.

urbino student housing illustration detail

The student arrives for the first time in Urbino, greeted by the arch on the main entrance of the town.

Looking at a local map, he begins to wonder where students live, if inside or outside the boundaries of the town.

How many students have neighbors? Due to the location of the town (on top of a small hill), many houses are a bit far away and scattered around, so 40% of the students don't have neighbors.

What kind of services are there near your house? Again, due to the location of the houses, some people were living quite isolated.

Is there enough room for everyone? More often than not, in student houses they try to squeeze in as many people as possible, resulting in smaller and/or crowded common areas.

Do you have a single or a shared bedroom? See above.

What is your overall rating of the house? Positive or negative?

Hey! I see Urbino from up here!

Around November 2013 I was contacted by the guys at Discovery Channel about a new project they were working on.

They were in the process of creating a website to launch the new season of Whale Wars, and stumbled upon my BA thesis project and liked it enough that they wanted to use some of the illustrations I did and have me make some more for the soon to be launched website.

The illustrations I made follow a nice storytelling so the visitors get introduced to the practice of whaling and the reasons why Sea Shepherd is fighting against it.

whale wars blood and water illustration page

whale wars blood and water illustration page with modal

The illustrations, even tho are kind of small on the website, have a nice level of detail.

Last thing the credits page, and there’s my name over there!

This is my thesis project for my Bachelor Degree in Industrial Design.

I designed a series of six 50x70cm posters for Sea Shepherd Conservation Society, as the brief was to design a product that should be mass produced and should have a purpose and appeal. So I decided that a series of posters regarding whaling and SSCS operations would have been a good subject, since I really didn’t want to make the usual book or magazine, and the posters also could be put on sale on their website, helping them raising funds for future campaigns.

The posters were then printed with a dye-sublimation printer on synthetic fabric, the same used also to make naval flags, and each angle was pierced with metal buttonholes to enhance even more the naval feel of the posters.

One of my main goals with the illustrations was to keep as many details as possible and use only a limited set of shades of grey, since both the whales and the ships didn’t have that many colours.

The first three posters are about the most hunted whales in modern whaling.

On the left there’s a brief description of the whale, under the illustration of the whale itself there are three icons indicating weight, immersion time and speed.On the right there are icons regarding the diet, the animals eaten are black. On the right side there’s a map with the habitat of the whales, the scale with a human and the conservation status.

The fourth poster is about whaling itself, it explains what is the International Whaling Commission, the moratorium on commercial whaling, where and what are Whale Sanctuaries, which whales are hunt, what is done whit the meat, bones and blubber and also there is a paragraph explaining the japanese whaling fleet.

The fifth poster is about whaling countries (Iceland, Norway and Japan) and the economics of whaling compared to whale-watching.

Data provided clearly shows how whaling is not profitable as an activity, and that’s one of the focal points of my reasearch and story-telling: without considering the moral effects of killing whales, which can or can not be considered as intelligent and social animals, the mere fact that this activity is not profitable at all should make people think about this topic.

The sixth and last poster is about Sea Shepherd Conservation Society.

It explains when and why it was created and has a brief biography of Paul Watson. It then explains the current campaigns around the globe,
the last decade’s highlights and the fleet, as it was back in 2011.

This project was developed by Studio NAND, when I joined them for a three month period in February 2015, I was involved in a couple of projects.

The client, California Center for Sustainable Communities, asked NAND to help building a platform and to visualize data about energy consuption in the Los Angeles Area.

When I joined NAND the project was already going, I helped mostly with the styling of the map, chosing the color palette, both for the map and data overlay, and the overall typography and interface of the map, tab and profiles sections of the platform.

To get the right colors and type proportions, I used mostly Tilemill for the map palette, while I used Chroma.js to get the right hues for the data overlay.

This has been a really great way for me to train my eye at color balancing and to learn a tool I haven't used yet, and I think the magic done by the guys at NAND speaks for itself, so here's the link to the website .

As you can see in this screenshot, the map offers various way to customize the view, such as type of buildings and energy consumption.

The tab view offers the same data on the map in a tabular view, it's possible to select different kinds of sorting and it's also possible to download the data.

The profile directory provides a list of all the different areas, and offers a detailed page of all the data relative to the selected area.

I’m an interaction designer passionate about data visualization, interfaces, interactive things & coding.

About me

Experience: