Mise en situation
Nous passons de plus en plus de temps à générer des données, encore et encore. Ces dernières sont devenues le nouvel or noir, à extraire coûte que coûte.
Dans le cadre du projet Data Play, il nous a été demandé de réaliser, en groupe de quatre personnes, un site web responsive exploitant un jeu de données de notre choix afin de créer une expérience interactive pour l’utilisateur.
Le choix du thème restait libre tant qu’on obtenait un nombre suffisant de données à exploiter lors de ce projet.
On pouvait également choisir un thème précis dans un domaine assez large et créer nous-mêmes un tableau de données à exploiter ensuite dans le site.
Phase de recherches
Première étape : Choisir le thème. Et pourquoi pas la musique ?
Avant de commencer les recherches, on s’est d’abord concerté afin de choisir quel thème nous voulions exploiter : la musique.
Après avoir cherché plusieurs idées, nous avons décidé de créer une sorte de Clash entre différents artistes (d’où le nom du projet “Data Clash”) sur base de leurs statistiques musicales.
Ensuite, nous avons donc récolté toutes les données nécessaires pour commencer le travail.
Des posts Instagram étaient également demandés pour montrer l’avancée du projet.
Création du design
Des couleurs plein la tête, et pourtant... Rendons tout cela très classe, comme si le projet allait sortir pour de vrai.
Pour le design, nous avons décidé de partir sur quelque chose de très sobre et minimaliste.
Premièrement, le projet entier a été rédigé en anglais pour donner un style « américain » plus axé pour l’international.
Pour les couleurs, nous sommes partis sur des textes blancs sur fond noir. Pour illustrer le vainqueur de chaque round lors de l’utilisation des données, ces dernières étaient affichées en rouge.
Nous avons évidemment gardé les mêmes couleurs pour les posts Instagram et autres goodies du projet.
Développement du site
Une fois le design créé, il ne restait plus qu’à lui donner vie. Plus facile à dire qu’à faire...
Bien qu’il s’agissait de notre troisième site, nous découvrions de nouvelles manières de le coder.
Premièrement, vu qu’on était plusieurs à travailler sur ce projet, l’utilisation de GitHub était nécessaire pour partager les avancées en code.
Ensuite, pour l’exploitation des données, l’utilisation d’un tableau JSON était également nécessaire tout au long du code.
Pour finir, on découvrait également de nouvelles animations en JS (comme le slider sur la page d’accueil).
Autres projets
Envie de découvrir mes autres projets ? Cliquez sur les cartes afin de voir ce qu’elles renferment.