Skip to content

Commit

Permalink
Merge pull request #1 from Mitch90/new-website
Browse files Browse the repository at this point in the history 
New website
  • Loading branch information
@Mitch90
Mitch90 committed May 13, 2019
2 parents 32f7535 + 9fba621 commit 0121612
Show file tree
Hide file tree
Showing 59 changed files with 2,291 additions and 48 deletions.
4 changes: 4 additions & 0 deletions .gitignore
View file
@@ -0,0 +1,4 @@
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
14 changes: 14 additions & 0 deletions _config.yml
View file
@@ -0,0 +1,14 @@
collections:
projects:
output: true

defaults:
- scope:
path: ""
type: "projects"
values:
layout: "project"
- scope:
path: ""
values:
layout: "default"
13 changes: 13 additions & 0 deletions _includes/navigation.html
View file
@@ -0,0 +1,13 @@
<nav>
<div>
<h3><span id="name">Michele</span> <span id="surname">Invernizzi</span></h3>
<h4><span id="interaction">interaction</span> <span class="show--big">&#x27f7</span> <span class="show--small">and</span> <span id="information">information</span> designer</h4>
</div>
{% if include.layout == 'project' %}
<h5>{{ include.title }}</h5>
{% endif %}
<ul>
<li><a href="{{ '/' | relative_url }}" {% if page.url == '/' %}class="link--active"{% endif %}> <span class="show--big">Selected p</span><span class="show--small">P</span>rojects</a></li>
<li><a href="{{ '/about' | relative_url }}" {% if page.url == '/about.html' %}class="link--active"{% endif %}>About</a></li>
</ul>
</nav>
43 changes: 43 additions & 0 deletions _layouts/default.html
View file
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ page.title }}</title>
<meta name="description" content="Interaction and information designer from Milan, Italy. Loves coding and folk tales.">
<meta property="og:title" content="Michele Invernizzi - Portfolio">
<meta property="og:description" content="Interaction and information designer from Milan, Italy. Loves coding and folk tales.">
<meta property="og:image" content="https://micheleinvernizzi.com/assets/images/image-social.jpg">
<meta property="og:url" content="https://micheleinvernizzi.com/">
<meta name="twitter:card" content="summary_large_image">
<link type="text/css" rel="stylesheet" href="{{ 'assets/css/master.css' | relative_url }}">
{% if page.url == '/' %}
<link type="text/css" rel="stylesheet" href="{{ 'assets/css/home.css' | relative_url }}">
{% elsif page.layout == 'project' %}
<link type="text/css" rel="stylesheet" href="{{ 'assets/css/project.css' | relative_url }}">
{% else %}
<link type="text/css" rel="stylesheet" href="{{ 'assets/css/about.css' | relative_url }}">
{% endif %}
<link rel="icon" type="image/png" sizes="32x32" href="{{ 'assets/images/favicon-32.png' | relative_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ 'assets/images/favicon-16.png' | relative_url }}">
<link rel="shortcut icon" href="{{ 'assets/images/favicon.ico' | relative_url }}">
{% if page.layout == 'default' %}
<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" integrity="sha256-ZaXnYkHGqIhqTbJ6MB4l9Frs/r7U4jlx7ir8PJYBqbI=" crossorigin="anonymous" defer></script>
<script src="{{ 'assets/js/utils.js' | relative_url }}" defer></script>
{% if page.url == '/' %}
<script src="{{ 'assets/js/home.js' | relative_url }}" defer></script>
{% else %}
<script src="{{ 'assets/js/about.js' | relative_url }}" defer></script>
{% endif %}
{% else %}
<script src="{{ 'assets/js/project.js' | relative_url }}" defer></script>
{% endif %}
<script src="{{ 'assets/js/base.js' | relative_url }}" defer></script>
</head>
<body>
{% assign page_layout = page.layout %}
{% assign page_title = page.title %}
{% include navigation.html layout=page_layout title=page_title %}
{{ content }}
</body>
</html>
58 changes: 58 additions & 0 deletions _layouts/project.html
View file
@@ -0,0 +1,58 @@
---
layout: default
---
{% capture the_collection %}{{page.collection}}{% endcapture %}
{% if page.collection %}
{% assign document = site[the_collection] | sort: 'order' %}
{% assign length = document | size | minus: 1 %}
{% endif %}
{% for links in document %}
{% if links.title == page.title %}
{% unless forloop.first %}
{% assign prevurl = prev.url %}
{% endunless %}
{% unless forloop.last %}
{% assign next = document[forloop.index] %}
{% assign nexturl = next.url %}
{% endunless %}
{% endif %}
{% assign prev = links %}
{% endfor %}
<header>
<div class="header__container">
<h1>{{ page.title }}</h1>
<h2>{{ page.subtitle }}</h2>
<div class="info__container">
<div class="info">
<h3>With</h3>
{% for name in page.team %}
<p>{{ name }}</p>
{% endfor %}
</div>
<div class="info">
<h3>Year</h3>
<p>{{ page.year }}</p>
</div>
<div class="info">
<h3>Role</h3>
<p>{{ page.role }}</p>
</div>
<div class="info">
<h3>Technology</h3>
{% for tech in page.technology %}
<p>{{ tech }}</p>
{% endfor %}
</div>
</div>
<a href="{{ page.link.url }}" target="_blank" class="project__link external--link">{{ page.link.title }}</a>
</div>
</header>
<main>
{{ content }}
</main>
<footer>
<div class="pagination__container">
<a class="pagination__left" href="{% if prevurl %}{{ prevurl | relative_url }}{% else %}{{ document[length].url | relative_url }}{% endif %}"><span class="pagination__arrow">&#x27F5</span><span class="pagination__text">Previous project</span></a>
<a class="pagination__right" href="{% if nexturl %}{{ nexturl | relative_url }}{% else %}{{ document[0].url | relative_url }}{% endif %}"><span class="pagination__text">Next project</span><span class="pagination__arrow">&#x27F6</span></a>
</div>
</footer>
45 changes: 45 additions & 0 deletions _projects/dd-image-tagging-tool.html
View file
@@ -0,0 +1,45 @@
---
title: DD image tagging tool
subtitle: An interface to the Clarifai API
team:
- DensityDesign Research Lab
year: 2018
role: design and development
technology:
- Clarifai API
link:
title: densitydesign.github.io/dd-image-tagging
url: "https://densitydesign.github.io/dd-image-tagging/"
thumbnail: dd-image-tagging.png
order: 5
---
<section class="project__summary">
<div class="summary__container">
<p>The image tagging tool is a javascript interface built on top of the <a class="external--link link--thick" href="https://clarifai.com/developer/guide/" target="_blank">Clarifai API</a> that let users tag a series of images with one of the image content recognition models developed by Clarifai.</p>
</div>
</section>
<section class="project__content">
<div class="section__title">
<h3>Process</h3>
</div>
<div class="section__body">
<p>For information designers and social scientists working with <a class="external--link" href="https://mitpress.mit.edu/books/digital-methods" target="_blank">Digital Methods</a>, content recognition algorithms can be very helpful in categorizing large corpuses of images. They can be employed, for example, as a way to place images in a space based on their content similarity, or to roughly categorize and filter only the images relevant to the research.</p>
<p>This small project comes from the need of having an easy interface where researchers could use a content recognition algorithm without the burden of having to learn how to code or how to call an API. While inside the lab we had a routine set up to perform the various operations needed to label a corpus of images, this was not ideal in our teaching activities. It implied a series of scripts that took time and know-how to learn and made the passage of knowledge, especially during workshops, challenging and often not very effective.</p>
<p>The tool is specifically designed to work in combination with spreadsheet softwares as they are, most of the time, what comes before and after in this kind of research processes. This is why the interface accepts only a list of image urls in the form of a <a class="external--link" href="https://en.wikipedia.org/wiki/Comma-separated_values" target="_blank">csv</a> file and outputs another csv file with the results of the algorithm.</p>
<p class="paragraph--new">Clarifai was chosen for various reasons:</p>
<ul>
<li>it is one of the leading artificial intelligence companies specialized in computer vision;</li>
<li>their API is easy to setup and is free within reasonable limits;</li>
<li>it has a pool of categorization models that other companies lack.</li>
</ul>
</div>
</section>
<section class="project__content">
<div class="section__title">
<h3>Thoughts</h3>
</div>
<div class="section__body">
<p>The image tagging tool works well for its intended use, but it could be greatly improved. Its aim is really focused on the specific task it was created for, making it less flexible to change. For example, a research question that requires an output formatted differently would render the tool useless.</p>
<p>As future developments we could also improve the inputs it handles by also excepting images directly instead of just csvs.</p>
</div>
</section>
46 changes: 46 additions & 0 deletions _projects/densitydesign-fsds-14ed.html
View file
@@ -0,0 +1,46 @@
---
title: DensityDesign F.S.D.S 14th ed.
subtitle: A website to showcase student's work
team:
- DensityDesign Research Lab
year: 2018
role: design and development
technology:
- jekyll
link:
title: densitydesign.github.io/teaching-dd14
url: "https://densitydesign.github.io/teaching-dd14/"
thumbnail: dd-website.png
order: 2
---
<section class="project__summary">
<div class="summary__container">
<p>Every year, the results made by students of the Final Synthesis Design Studio run by DensityDesign Research Lab are showcased in a website that gathers all the material produced during the course. This was the redesign made for the 14th edition of the course (a.a. 2018-2019).</p>
</div>
</section>
<section class="project__content">
<div class="section__title">
<h3>Process</h3>
</div>
<div class="section__body">
<p>During the course, students have to face ongoing and controversial issues – such as migration, hate speech, misinformation, climate change, etc. – by using Communication Design and Data Visualization to explore the given topic, share research methods and results and finally engage with a public. In this process, students will realize that their perspective is situated in a network of agents and relationships by which a controversy is defined and, at some point, they will also have to place themselves in this network when visually communicating the results.</p>
<p>This idea is what stands behind the course’s motto “You are here” and is borrowed from the social sciences, namely the methodological approach of actor-network theory developed by <a class="external--link" href="http://www.bruno-latour.fr/node/70" target="_blank">Bruno Latour</a> and others.</p>
<p class="paragraph--new">Conceptually the redesign of the 14th edition’s websites lays its foundations on these core concepts and builds on the metaphor of the map, an imagined map where the controversy is the territory and actors and relations are the features of said map. “You are here” is both the ability to orient yourself in the map as well as the realization that you are now a feature of the map.</p>
<div class="project__video">
<video autoplay="autoplay" loop="loop" muted="muted" onstart="this.play();" onended="this.play();">
<source src="{{ '/assets/videos/ddweb.mp4' | relative_url }}" type="video/mp4">
<p>Your browser doesn't support HTML5 video. Here is a <a href="{{ '/assets/videos/ddweb.mp4' | relative_url }}">link to the video</a> instead.</p>
</video>
</div>
<p>The inspiration for the visual elements comes from topographic maps with adaptations of grid lines, annotated borders and <a class="external--link" href="https://en.wikipedia.org/wiki/Contour_line" target="_blank">isohypses</a>. The small dot wondering in the header section of the home page wants to be a reminder of the path followed by students while getting to know their controversy.</p>
<img class="project__image" src="{{ '/assets/images/ddweb02.png' | relative_url }}" alt="Header screenshot">
</div>
</section>
<section class="project__content">
<div class="section__title">
<h3>Thoughts</h3>
</div>
<div class="section__body">
<p>I expect next year’s version to evolve and maybe be completely different again, as this is the nature of this course. Every year it’s meticulously reshaped and adapted in order to experiment new ways and improve.</p>
</div>
</section>
60 changes: 60 additions & 0 deletions _projects/privacy-and-black-boxes.html
View file
@@ -0,0 +1,60 @@
---
title: Privacy and black boxes
subtitle: Communicating the opaque processes produced by digital technology
team:
- "-"
year: 2016
role: personal M.Sc. thesis
technology:
- d3.js
- nightmare.js
- node.js
link:
title: politesi.polimi.it
url: "https://www.politesi.polimi.it/handle/10589/133042?mode=full&submit_simple=Show+full+thesis+record"
thumbnail: privacy.png
order: 4
---
<section class="project__summary">
<div class="summary__container">
<p>“Privacy and black boxes” is my master’s thesis, a journey documenting my explorations of the relationship between communication design and technology, with a special focus on those technological processes that were made invisible and opaque by technical complexity or by design.</p>
</div>
</section>
<section class="project__content">
<div class="section__title">
<h3>Process</h3>
</div>
<div class="section__body">
<p>The issue of “opacity” in technology has been increasingly relevant to me, even more so as our society tends to believe that technology is or will soon be the solution to the world’s problems and thus tries to implement it in almost every aspect of life. By opacity, I mean the difficulty or inability to analyze, understand or control part of a technological process that somehow affects us.</p>
<p>In my thesis I was particularly interested in two examples of opaque processes, both tied to our production of digital traces (data) when we use digital devices such as iphones, computers, etc. and both still missing a consolidated and standardize legal framework:</p>
<ul>
<li>the collection of personal data by apps, programs and devices, with often the impossibility to know or understand the exact information that is being monitored, the extent and the intentions;</li>
<li>the use of this information (along with other data) to train machine learning algorithms that are then used to inform decisions that can have profound impacts in our life, from <a class="external--link" href="https://www.predpol.com/" target="_blank">displacement of police forces</a> in a city to <a class="external--link" href="https://www.businessinsider.com/china-social-credit-system-punishments-and-rewards-explained-2018-4?IR=T#1-banning-you-from-flying-or-getting-the-train-1" target="_blank">social credit system scores</a>.</li>
</ul>
<p>As a designer, my research questions in investigating these issues were mainly methodological: How can we map processes that are invisible, opaque, or protected by legal barriers? How these characteristics influence the design process? Are the tools and methods that we use enough or do we need to modify them or make new ones?</p>
<p class="paragraph--new">The first step was to perform an adequate literary review of the topic of data and privacy, as well as to set up a series of experiments to see what kind of data I could get about myself, for example. Embracing the approach of <a class="external--link" href="https://mitpress.mit.edu/books/digital-methods" target="_blank">Digital Methods</a>, I analyzed how the issue was represented by the scientific community (using <a class="external--link" href="https://www.scopus.com/home.uri" target="_blank">Scopus</a> as a proxy), by domain expert bloggers (Ars Technical and Medium), and by encyclopedic knowledge in different language spheres (Wikipedia).</p>
<img class="project__image" src="{{ '/assets/images/scopus.png' | relative_url }}" alt="Scopus analysis">
<p>I also tried to get as much information as possible from my social media accounts, focusing mainly on what I could see by retrieving all the location data Google had on me.</p>
<img class="project__image" src="{{ '/assets/images/location.png' | relative_url }}" alt="Google location analysis analysis">
<p>Once I was better acquainted with the issue, I had the great opportunity to collaborate with two groups of people that were working exactly on the two aspects that interested me and both were happy to have a designer that could help them.</p>
<p>The first was a team of researchers from the Computer and Information Science department at Northeastern University, lead by David Choffnes. They were developing an app, ReCon, that could monitor and block any personally identifying information requested knowingly or unknowingly by apps on a user’s phone. Here I tried to design an interface that introduced the user on how ReCon worked and that exposed the data collected, giving back the user control on what to share.</p>
<img class="project__image" src="{{ '/assets/images/recon.png' | relative_url }}" alt="ReCon experiment">
<p>The second collaboration was with a group of activists led by Claudio Agosti that, among other projects, is developing a tool called facebook.tracking.exposed. At the time the aim of the project was, as the name implies, to try to exposed the News Feed algorithm used by Facebook by showing how it affected the user experience with the platform. I thus tried to design an interface that could present each user their feed from a different perspective, highlighting changes in ranking, typology of posts, evolution in time, etc.</p>
<div class="project__video">
<video autoplay="autoplay" loop="loop" muted="muted" onstart="this.play();" onended="this.play();">
<source src="{{ '/assets/videos/fbtrex.mp4' | relative_url }}" type="video/mp4">
<p>Your browser doesn't support HTML5 video. Here is a <a href="{{ '/assets/videos/fbtrex.mp4' | relative_url }}">link to the video</a> instead.</p>
</video>
</div>
<p class="paraghraph--spacer">In both projects my main objective was always to design solutions that could remove at least in part the veil that covered these invisible processes covered by technological complexity.</p>
</div>
</section>
<section class="project__content">
<div class="section__title">
<h3>Thoughts</h3>
</div>
<div class="section__body">
<p>The experimental nature of the thesis made my journey necessarily a work in progress and also highlighted the dire need of new methods and tools to investigate the opaque processes of collection and use of personal data.</p>
<p>This was nonetheless a very productive starting point in the analysis of this context from the perspective of a designer, which underlined a great opportunity for communication design: we need to keep working on solutions that can put people in the position to make informed choices about the technological environment they live in.</p>
</div>
</section>

0 comments on commit 0121612

Please sign in to comment.