Dataplay est le dernier atelier de l’année pour les étudiants de DWM. Le but est de concevoir un site où des données et des statistiques d’un thème précis sont utilisées sous la forme que nous souhaitons.

L’objectif principal : S’amuser !

Une situation abracadabrante

En pleine période de crise sanitaire, le covid-19 sévit et bouleverse nos méthodes de travail habituelles. Nous nous retrouvons donc tous confinés chez nous, c’est fini d’aller et venir à l’école. Aujourd’hui, c’est l’école qui s’invite chez nous. Nos professeurs ont mis en place un système de suivis en ligne grâce au logiciel Discord et des présentations en ligne avec Zoom. Malgré la situation, l’atelier Dataplay peut avoir lieu.

Le Serveur Discord “DWM — Dataplay”

Un lancement connecté

17.02.2020, 9h, telles sont les premières données de cet atelier. Un Google Slide a été partagé pour présenter l’atelier et le déroulement de celui-ci.

À partir de ce moment, les messages et les notifications sur Discord fusèrent de partout pour organiser les groupes. C’est ainsi que notre groupe, composé de Camille Mouvet, Guillaume Pihard, Marie Potemberg et Tom Delfosse, se forma. Notre objectif premier fut de trouver un nom de groupe classe et badass… Nous nous sommes donc appelés les “The WebBees” car, oui, il ne faut pas croire, même si elles ne font pas du web, les abeilles, ça pique. C’est avec une envie folle de travailler et de faire quelque chose que nous étions partis pour trois semaines de Dataplay !

La présentation de l’atelier et de son déroulement

Une tâche grillée

Une première tâche nous fut donnée pour voir la dynamique au sein de notre groupe, celle de dessiner la conception d’un pain grillé ou d’un toast si vous préférez. C’est ainsi que tous les 4, nous nous mîmes à dessiner notre conception de comment faire du pain grillé. 5 minutes après, nous avons tous mis en commun nos croquis et nous avons vu des similitudes et des différences entre chacun de nos dessins. C’était fou de voir comment nous avions des méthodes et des visions des choses très différentes entre nous 4. Nous avons ensuite redessiné un croquis en commun divisés en diverses tâches afin de réaliser le pain grillé.

Pour consulter notre travail, cliquez ici.

La présentation de la première tâche

Cet exercice avait pour but de nous apprendre que même si nous avions chacun des idées bien différentes et que nous les mettions ensemble, nous arrivions à un même résultat. Il en est de même pour cet atelier, en mettant nos idées en commun nous arriverons à quelque chose d’unique.

Le début idéal

Après ce début de projet, Guillaume envoya le lien d’un Google Doc pour y mettre toutes nos informations. Ensuite, nous nous sommes mis à la recherche d’un sujet à exploiter. Pour se faire, nous avons puisé dans toutes les choses que nous aimions pour essayer de trouver une chose commune à nous tous, une chose qui nous permettrait de nous amuser. Nous avons donc fait une liste pour mieux nous y retrouver. Malgré toutes ces idées, aucune ne nous convenait… Nous étions bloqués.

Quelques heures plus tard, notre professeur, Monsieur Bougaux présenta ses slides qui nous conseillait de chercher des idées via des facteurs. Nous avons donc repris et continués nos recherches en utilisant ces fameux facteurs (Par exemple : géographiques, temporels, colorimétriques et etc…). C’est après plusieurs désaccords, que nous avons enfin trouvé notre fameux sujet : Les lieux hantés en Belgique.

Notre Google Doc avec quelques premières idées

Une création changeante

Etant donnée qu’aucune API n’existait pour les lieux hantés mis à part en Angleterre et aux Etats-Unis, nous avons pris la décision de créer nous même un fichier JSON. Nous avons commencé à répertorier tous ces lieux avec différentes données :

  • Régions ;
  • Provinces ;
  • Noms des lieux ;
  • Localisation ;
  • Coordonnées X/Y ;
  • Statut ;
  • Catégories de lieux ;

Mais nous sommes vite arrivée à notre faim… En effet, en Belgique, il n’y a malheureusement pas beaucoup de lieux hantés. Du coup, nous sommes partis sur les lieux abandonnés, mais pas juste un répertoire des lieux délaissés comme ça ! Ce serait une liste des lieux qui ont une histoire, un passé douloureux, fantomatique ou encore atypique ! Tous ensemble, nous avons continué nos recherches et les avons mis dans notre Google Doc. Une fois ce travail de recherche fini, Tom se lança dans la création du fichier JSON.

Notre fichier JSON des lieux abandonnés

Mais quel est donc notre idée ludique dans tout ça ?

Nous sommes partis sur l’idée de faire une carte interactive de la Belgique avec ces différents lieux.

Ces derniers seraient représentés par des fleurs :

  • Coquelicots pour les lieux de guerre ;
  • Chrysanthèmes pour les lieux funestes ;
  • Jonquilles pour le reste.

Nous les aurions caché dans de l’herbe pour que l’utilisateur les cherche avec leur souris. En dessous de cette carte, il y aurait une rubrique avec des graphiques comparant les données de ces différents lieux.

La première semaine de travail finie, nous avons réaliser une présentation pour soumettre notre projet aux différents professeurs afin qu’ils nous renvoient un feedback.

Pour consulter notre présentation, cliquez ici.

Nouvelle semaine, nouvelles choses

Les données s’emballent, nous sommes à la deuxième semaine du projet Dataplay et après beaucoup de discussions entre nous, ainsi qu’avec les professeurs, nous avons annulé notre première idée ludique. Nous sommes donc partis sur une toute nouvelle idée, celle de remplacer la souris par une boussole. Celle-ci aiderait l’utilisateur quand ce dernier se rapprocherait d’un lieu, et elle tournerait donc pour indiquer la direction à prendre. Une fois le lieu trouvé, l’utilisateur pourrait cliquer dessus afin d’ouvrir une petite page d’information regroupant toutes les données sur cet endroit.

Une fois ce débat mis au point, nous nous sommes mis à la création d’un logo et du site web. Mais avant toute chose, il nous fallait un nom pour notre projet ! Pour se faire, nous avons tous proposé divers noms. Puis, nous les avons regroupés dans une liste. Pour les départager, Guillaume proposa de faire un vote, et Tom créa donc un Google Forms avec tous ces noms. Nous avions 3 votes chacun afin d’être sur un même pied d’égalité et être sûr de ne pas avoir les mêmes. Pour finir, nous avons élu le nom de projet : Lost Belgian Places.

Logo

Guillaume commença à rechercher un logo, il partit sur plusieurs pistes dont une représentation de la Belgique très simpliste et réalisa plusieurs tests.

Les pistes de Guillaume

De son côté, Tom imagina également quelques logos autour d’une boussole.

Les pistes de Tom

Tous les 2 arrivèrent avec un logo final différent.

Guillaume continua et repris les logos de Tom afin d’essayer d’associer les deux à travers une nouvelle série de logos.

Malheureusement, trouvant ces projets non concluants, il resta sur la boussole et réalisa d’autres pistes.

C’est ainsi que le groupe choisit finalement ce logo :

Le logo final du projet “Lost Belgian Places”

Site Web

Pendant ce temps-là, Camille et Marie commencèrent à travailler sur des pistes de design de sites. Tom créa un lien vers Figma pour faciliter le travail en groupe. Une découverte pour nous quatre car nous n’avions pas encore beaucoup travaillé avec ce programme.

Notre Figma et quelques premières pistes

Au début, nous étions partis sur un site assez épuré et minimaliste mais après avoir montré notre visuel durant une discussion avec Madame Wera et Monsieur Marchal, nous sommes partis sur tout autre chose. Ce dernier nous a montré un site avec plein de cartes réalisées via des techniques différentes. Une de celle-ci nous tapa dans l’oeil, c’était une carte assez vieille, dans le genre carte du 19ème siècle.

Les cartes qui nous ont inspirés

Nous avons donc pris la décision de partir sur un site dans ce contraste.

Marie commença par travailler sur un aspect daguérotype de nos photos de profil pour le footer et Camille sur un tampon avec notre logo. Tom, de son côté, réalisait quelques autres éléments graphiques pour le site.

Pour les graphiques, Monsieur Bourgaux nous a envoyé une photo pour nous inspirer et nous sommes partis sur cette idée.

Une fois le site fini, nous sommes partis également sur un design pour le darkmode.

C’est ainsi que nous avons abouti à ce résultat :

La version LightMode et DarkMode du Desktop final de notre projet

La deuxième semaine de travail étant presque finie, nous avons réaliser une deuxième présentation pour montrer notre avancée sur notre projet avec les différents professeurs, afin qu’ils nous renvoient un nouveau feedback.

Pour consulter notre deuxième présentation, cliquez ici.

La semaine du code

La troisième semaine débuta et Tom commença à coder l’HTML et le CSS. Il lança un direct sur Discord afin que nous regardions où il en était et pour l’aider au besoin. Pendant ce temps là, Guillaume finissait de rédiger ces lignes que vous lisez en ce moment, Marie regardait au JS et Camille peaufinait les éléments graphiques.

Pour les graphiques, Guillaume commença à travailler avec Chart.js, une bibliothèque JavaScript open source gratuite pour la visualisation des données. Ayant quelques difficultés avec le JavaScript, il fit appel à un de ces amis, Maxime Fondu qui l’aida à relier le fichier JSON avec l’axe X et Y de deux graphiques. Puis il s’occupa de rajouter 3 autres graphiques et de donner un peu de style à ces derniers.

Pendant ce temps là, Marie et Camille travaillèrent sur la carte pour que la souris devienne une boussole et que l’aiguille de celle-ci aide l’utilisateur à trouver les différents lieux en tournant en direction de ces lieux. Avant cela, il a fallu trouver un moyen de placer ces lieux sur la carte. Une fois cela terminé, elles cherchèrent, avec Tom, le moyen d’afficher toutes les données du fichier JSON quand l’utilisateur cliquerait sur un lieu.

Finalement et avec un peu dernier changement majeure pour le projet, nous avons optés pour le nom de projet : La carte des lieux oubliés.

A force de travail et de courage, nous sommes arriver à ce résultat :

Une conclusion instructive

Ce que nous pouvons retenir de cet atelier, c’est qu’il nous a poussé à :

  • changer nos méthodes de travail, en effet travailler à distance et en groupe, n’est pas toujours aisé ;
  • aller plus loin que nos limites, nous avons appris de nombreuses nouvelles choses en cherchant par nous mêmes ;
  • montrer nos forces et faiblesses;
  • travailler en harmonie malgré nos idées et avis divergents.

Testeur de cookies & jeune apprenti en infographie

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store