Dataplay
Projet académique – Data & design interactif
Data – interaction – web
Contexte & problématique
Pour ce travail de groupe nous avions du alliée créativité, compétences techniques, compétences graphiques, réflexion autour des données et de l’imagination.
Notre objectif principal était la création d’une expérience interactive basée sur un jeu de données et la conception de sa présentation et de son identité graphique
Objectif du projet
- Concevoir un jeu de données (JSON)
- Produire un site web responsive
- Concevoir l’expérience interactive
- Créer un stand de présentation
Etapes du projet
Recherche et choix du thème
Dès la lecture du briefing, trois idées nous sont venues en tête. Notre première idée était la pollution émise pour une année entière de formule 1 (les courses, les déplacements du matériels, les déplacements des visiteurs). Notre deuxième idée était de montrer la vie d’un aliment de sa production à la fin. Et enfin notre dernière idée était la pollution émise par les réseaux sociaux. Nous avons décidé de nous attarder sur la dernière idée car nous passons tout notre temps sur les réseaux sociaux.
Faire les recherches des données
Une fois notre idée choisie et validée par nos professeurs, il a fallu s’attaquer à la recherche de données. Pour cela nous avons étudié tous les sites possibles pour récolter un maximum de données. Pour avoir un maximum de données nous nous sommes aidés de chatgpt pour avoir des informations plus précises ou pour des données qu’on ne trouvait pas sur google. Même si c’est mieux de ne pas utiliser d’IA et de travailler avec les informations qu’on a déjà grâce à l’internet de base.
Rassembler les données dans un fichier JSON
Une fois toutes les données nécessaires récoltées nous avons pu les écrire dans notre fichier JSON. Ce fichier JSON va nous servir pour jouer avec les données sans ce fichier c’est plus compliqué. La façon d'écrire nos données dans ce fichier est compliquée à première vue mais une fois qu’on s’y met, ça roule tout seul. Et tout ça est relié avec des lignes de code en javascript pour faire fonctionner nos données quand on le veut pour jouer avec elles par la suite.
Faire le design sur figma
En parallèle de la création du fichier JSON, nous avons commencé à rassembler toutes nos idées de design et avec toutes nos idées nous avons fait un prototype c'est-à-dire mettre des rectangles ou autre formes la ou on va mettre nos éléments de notre site web. Une fois cette étape faite, on a pu faire le vrai design du site avec les vraies informations à la place des rectangles. Nous avons fait un design très simple pour que notre site soit le moins polluant.
Faire le code du figma après que le design sois finis
Nous arrivons à l’étape la plus longue du projet. C’est-à-dire toute la partie code du site. C’est la partie que j’aime le moins mais grâce à ce projet j’ai pu m’améliorer. Et aussi grâce à nos quatre cerveaux nous avons tout fait pour que le site soit le mieux réalisé possible et qu’il ressemble le plus à notre figma. Malgré quelques difficultés rencontrées comme le JSON qui était une nouvelle matière nous avons réussi à finir notre site.
Faire les affiches pour décorer le stand de présentation
Et pour clôturer ce magnifique projet nous devions décorer un stand de présentation pour le jury composé des professeurs. Pour ça nous avons fait quatre affiches. Une représentait le projet en entier et les trois autres illustrent les données de manières plus visibles parce que ce n’était pas possible de les mettre sur le site sous forme de graphiques. Donc on sait qu’on allait chercher une manière plus chouette pour les utilisateurs et le jury de pouvoir visualiser ses données.
Visuel du projet
