Archive of Com.

An archive of graduates in Communication Design at the Politecnico di Milano who make the difference

Year: 2020
Role: Research, Concept, Design, Development

URL: archiviocom.tommasonegri.com
Stack: React, GatsbyJS, GraphQL, Web Components

Archivio Com 1

Preamble

The words you are going to read tell the story of my thesis project at the Politecnico di Milano. A slice of life which ended up embodying three years of work, struggles, joys, friendships and burnouts.

At the time of writing, I am still in the game, with all the memories fresh and lucid, crowding my mind. Being able, however, to glimpse the juncture when all the pieces, gathered in sleepless nights, will mutually join, revealing their picture. Therefore, this is the one chance to order thoughts and reason on what I gain for what I gave, just before the serene and quiet flow of time will do his job erasing the grief, leaving nothing but nostalgia.

I have to and I want to acknowledge the three colleagues who worked alongside me. Without them this story would not have been told. I hope you will not mind if I thank them properly...

Grazie ragazzi per l'inappuntabile impegno e la sinergia creatasi. Grazie Alice, Gaia e Matteo.


The brief

The course I attended for my thesis is something that can be translated into Social Design, traditionally focused on projects for the municipality or other non-profit organizations within the city of Milan. For a combination of events when my time came they had to change their habits and, instead of an external actor, they chose to focus on the communication design course itself. Working as a designer for the design community certainly allows great freedom of experimentation, but it also means great expectations and seriousness of judgment. There are all kinds of designers out there and getting them all under one roof is not as easy as you might expect.

That said, here is the brief we received:

The testimonies of graduates in Communication Design at the Politecnico di Milano, which today have reached a prominent position in the design field, in his different branches, constitute the core of a communicative action.

As you can tell from this generic statement the project could have taken multiple directions. Therefore we analyzed the field very briefly and developed a response suitable for the market and the communicative goals.

Response

The development of the brief was articulated as follow:

  1. Goal: give references on training at the university, showing possible postgraduate paths
  2. Selection: definition of the criteria for research and selection of former students
  3. Delivery: website presenting the whole gathered material
  4. Vision: generate greater collective awareness in the design community

What is an archive?

As said in the response to the brief we chose the website as the main artefact to produce for the project. However this is a generic definition, in fact a website can be a lot of different things... It can be an e-commerce, a blog, a single page showcasing some charts... That is why the next pace has been to determine which type of website we would make.

Analyzing the scope of the project we immediatly figured out that we were dealing with a content-heavy type of website. This is a macro-category which includes all the news or media websites, up-scaled blogs and in general all that platforms with tons of contents and regular updates. There is also another particular type of website that fits in this category, the archive.

An archive, in general, responds to a single precise need: gathering, organizing and showcasing knowledge or information for the people. We immediatly liked the idea of offering this kind of service, this is high value proposition which is even in line with our vision statement. It felt simply right.

An archive done right

There are many ways an archive can be done, for us these are the core principles that guided our design action:

  1. Flexible structure
  2. Easy to use
  3. Easy to mantain
  4. High accessibility

Data gathering

The data for the archive, as you can imagine, are the Alumni and their projects. This is the repeatable process we have developed and followed to find and select them.

Research

For the research we took advantages of all the platforms out there which already gathered designers for one reason or another. Specifically we used:

  • Behance
  • Linkedin
  • Polimi Alumni's website
  • Personal websites

Being directly inside the university we even leveraged the first-hand data picking, asking to professors and other students about notable Alumni or projects.

We applied a first filter to the sources with some criteria each Alumno had to respect:

  1. Have attended at Politecnico di Milano
  2. Have attended the faculty of Design
  3. Have attended the Communication Design course

Selection


Typography

Colors

#F9F9FA
#EE0202
#444444

Image treatment

Archivio Com 1

Questo archivio è stato il mio progetto di tesi universitaria al Politecnico di Milano. Per prima cosa vorrei ringraziare i tre colleghi con cui ho collaborato per

Archivio Com 1

Questo archivio è stato il mio progetto di tesi universitaria al Politecnico di Milano. Per prima cosa vorrei ringraziare i tre colleghi con cui ho collaborato per


Interface

Questo archivio è stato il mio progetto di tesi universitaria al Politecnico di Milano. Per prima cosa vorrei ringraziare i tre colleghi con cui ho collaborato per la fantastica esperienza e il risultato finale. Grazie Alice, Gaia e Matteo.

In appena tre mesi siamo passati da un brief di qualche riga a un sito web completamente funzionante che al momento contiene quasi 30 designer e 40 loro progetti. Ognuno di quali è stato ricercato, selezionato, raccolto e organizzato, qualcuno perfino intervistato.

È stato un percorso incredibile ci ha portati a contatto con talenti dai più svariati campi del design e con i background più variegati. La qualità dei lavori raccolti è stata a dir poco straordinaria e abbiamo dato tutti noi stessi per costruirgli la casa che pensavamo meritassero.

Archivio Com 2

L’archivio risulta facile da comprendere e da navigare, sebbene sia ricco di contenuti. Grazie al framework React tutto è anche incredibilmente veloce.

Archivio Com 3

Ricerca, filtri e perfino un bottone random... Ogni possibile modalità di navigazione è presente. La parte migliore è che grazie alla potente e ottimizzata query iniziale ogni evento successivo accade lato utente, senza altre chiamate al server.

Archivio Com 4

L’indentazione è usata per dare gerarchia ai contenuti. Ogni designer può avere associati diversi progetti e anche altri contenuti come conversazioni, materiali, ecc.

Mobile

Archivio Com 1

Questo archivio è stato il mio progetto di tesi universitaria al Politecnico di Milano. Per prima cosa vorrei ringraziare i tre colleghi con cui ho collaborato per

Archivio Com 1

Questo archivio è stato il mio progetto di tesi universitaria al Politecnico di Milano. Per prima cosa vorrei ringraziare i tre colleghi con cui ho collaborato per

Archivio Com 1

Be proud, Be Com.

Strumenti di creazione della comunità.

Badge

Il badge mostra la tua appartenenza alla comunità.

Archivio Com 1
Archivio Com 1
Un modo nuovo

Invece di una classica immagine abbiamo deciso di sviluppare il badge come un Web Component personalizzato. Questo garantisce una più semplice personalizzazione grazie ai due parametri esposti e maggiore flessibilità per aggiornamenti futuri.

<com-badge color="red" bg="false" />
<script
    async
    src="https://archiviocom.netlify.com/badges/badge.min.js"
    charset="utf-8"
></script>
Ah ahh, non hai il permesso!

Dal momento che solo i designer selezionati vengono aggiunti all’archivio, il badge non può essere utilizzato da chiunque. Abbiamo sviluppato un sistema di controllo che consente al badge di essere visualizzato solo su domini autorizzati.

connectedCallback() {
    readTextFile(
        'https://archiviocom.netlify.com/badges/badge-whitelist.json',
        function(text) {
            let whitelist = JSON.parse(text)
            if (
                !whitelist.whitelist.includes(window.location.hostname)
            ) {
                window.alert('NON SEI AUTORIZZATO A USARE QUESTO BADGE')
                document.querySelector(
                    'com-certificate'
                ).style.display = 'none'
            }
        }
    )
}

Welcome pack