Marvel Colors

2015 | UX & UI Design – Data visualization | Graduation project

Marvel Colors is a data-visualization project, divided into three thematics, in which the user playfully explores data about colors of Marvel comics covers. In this project, realized with Claire Mauchin and Ingrid Lenoir, i was in charge of the web design.

Marvel Colors is currently in beta version. For the data, we have chosen twelve comics published between 2000 and 2015 : Black Panther, Captain America, Captain Marvel, Civil Wars, Iron Man, Thor, Ant-Man, Avengers, Hulk, Doctor Strange, Guardians of the Galaxy and Inhumans. This makes a total of 609 covers, on which we worked for this beta version. Our goal is to cover all the Marvel comics.


Marvel Colors est un projet de data-visualisation, divisé en trois thématiques, au sein desquelles l’utilisateur explore de façon ludique les données portant sur les couleurs des couvertures des comics Marvel. Pour ce projet, réalisé avec Claire Mauchin et Ingrid Lenoir, je me suis occupée du web design.

Marvel Colors est actuellement en version beta. Pour les données, nous avons choisi douze comics publiés entre 2000 et 2015 : : Black Panther, Captain America, Captain Marvel, Civil Wars, Iron Man, Thor, Ant-Man, Avengers, Hulk, Doctor Strange, Guardians of the Galaxy et Inhumans. Cela fait un total de 609 couvertures sur lesquelles nous avons travaillé pour cette version beta. Notre but final est de couvrir l’intégralité des comics Marvel.

 

LOGO

marvel-colors-logo

The Marvel Colors logotype is a circle with Marvel Colors written inside. Our project is about colors. So the logotype color randomly changes.


Le logotype Marvel Colors est un cercle avec Marvel Colors écrit à l’intérieur. Notre projet portant sur les couleurs, la couleur du logotype change de façon aléatoire.

 

ARCHITECTURE

marvel-colors-pages

 

marvel-colors-browser-navigation-b

 

The Marvel Colors website has a particular architecture. The user experience is divided into three thematics : « series », « seasons » and « hues ». The main page is the home page. It’s from this page that the user accesses the three thematics. When the user clicks on the « series » thematic, the screen moves to the left. When the user clicks on the « seasons » thematic, the screen moves to the right. And when the user clicks on the « hues » thematic, the screen moves to the bottom.


Le site Marvel Colors possède une architecture particulière. L’expérience de l’utilisateur est répartie en trois thématiques : « series », « seasons » et « hues ». La page principale du site est la home-page. C’est à partir de cette page que l’utilisateur accède aux trois thématiques. Quand l’utilisateur clique sur la thématique « series », l’écran se décale vers la gauche. Quand l’utilisateur clique sur la thématique « seasons », l’écran se décale vers la droite. Et quand l’utilisateur clique sur la thématique « hues », l’écran se décale vers le bas.

 

HOME PAGE

marvel-colors-imac-2

 

Like for the logotype, the color of the home page changes ramdomly. The home page allows access to the three thematics. These are represented by arrows, which on hover, reveal explanations about the thematic.


Comme pour le logotype, la couleur de la home-page change de façon aléatoire. La home-page permet d’accéder aux trois thématiques. Celles-ci sont représentées par des flèches qui, au survol avec la souris, font apparaitre des explications sur la thématique.

 

marvel-colors-home-2 marvel-colors-home-3 marvel-colors-home-4

marvel-colors-browser-home

 

SERIES PAGE

marvel-colors-interface2

 

The « series » thematic presents the colors of the twelve selected series of Marvel comics : Black Panther, Captain America, Captain Marvel, Civil Wars, Iron Man, Thor, Ant-Man, Avengers, Hulk, Doctor Strange, Guardians of the Galaxy and Inhumans. Each serie is represented by colored bands. For example , Hulk is represented in green and purple and Thor in red, blue and grey. By passing the mouse cursor over a serie, the user brings up data about the serie, on the bottom of the page : serie title, number of covers and release dates. By clicking on a serie, the user brings up a color chart representing the colors of the serie.


La thématique « series » présente les couleurs des douze séries de comics Marvel que nous avons choisi : Black Panther, Captain America, Captain Marvel, Civil Wars, Iron Man, Thor, Ant-Man, Avengers, Hulk, Doctor Strange, Guardians of the Galaxy et Inhumans. Chaque série est représentée par des bandes de couleurs. Par exemple, Hulk est représenté en vert et violet et Thor en rouge, bleu et gris. A chaque fois que l’utilisateur passe avec le curseur de la souris sur une série, le titre de la série, le nombre de couvertures ainsi que ses dates de parutions apparaissent en bas de l’écran. En cliquant sur une série, cela fait apparaitre un nuancier représentant les couleurs de la série.

 

marvel-colors-browser-series

 

SEASONS PAGE

marvel-colors-interface3

 

The « seasons » thematic presents the color variations of Marvel comics covers per seasons. Two color coding types were used for our calculations : HSL (Hue Saturation Lightness) and RGB (Red Green Blue). The 609 covers were divided between Spring, Summer, Autumn and Winter according to their release date. Each line represents one cover. On hover, the user brings up data about the selected cover on the bottom of the page (color coding type, season, total number of covers released this season, cover title, release date and hex color code).


La thématique « seasons » présente les variations de couleurs des couvertures en fonction des saisons. Deux types de codage des couleurs ont été utilisés : HSL (Hue Saturation Lightness) et RGB (Red Green Blue) pour faire nos calculs. Les 609 couvertures ont été réparties entre Printemps, Eté, Automne et Hiver en fonction de leur date de parution. Chaque ligne représente une couverture. Au survol, l’utilisateur fait apparaître des données sur la couverture sélectionnée en bas de l’écran (type de codage couleur, saison, nombre de couverture total parues durant cette saison, titre de la couverture, date de parution et code hexadécimal de la couleur).

 

marvel-colors-browser-seasons

 

HUES PAGE

marvel-colors-interface4

 

The « hues » thematic presents ten dominant hues in Marvel covers. Each hue is represented by color and data on the bottom of the page (name and hex code of the hue and total number of covers using more than 50% of this hue). The size of the circle represents the proportion of covers using this hue. By clicking on the circle, the user accesses all covers using this hue. On hover, data appears on the bottom of the page (hue name, cover title, release date and cover artist).

La thématique « hues » présente une dizaine de teintes dominantes au sein des couvertures. Chaque teinte est représentée par un aplat de couleur avec ses informations en bas de la page (nom et code héxadécimal de la teinte et le nombre total de couvertures utilisant à plus de 50% cette teinte). La taille du cercle représente la proportion de couvertures utilisant cette teinte. En cliquant sur le cercle, l’utilisateur accède à l’ensemble des couvertures utilisant cette teinte. En survolant une couverture, des informations apparaissent au bas de la page (nom de la teinte, titre de la couverture, date de publication et nom de l’artiste ayant réalisé la couverture).

marvel-colors-hues-covers2
marvel-colors-browser-hues

 

ABOUT AND HELP PAGES

marvel-colors-about-1  marvel-colors-help

 

The About and Help pages appear over the content of other pages.


Les pages About et Help apparaissent par dessus le contenu des autres pages.

marvel-colors-sticker2

 

All Marvel comics covers are property of Marvel Worldwide inc.
The nevis font used was created by Ten by Twenty.

 

The Marvel Colors website is currently in development. Much more details about the Marvel Colors project, here