Case Study __ ioLCE 17–18

Pour commencer iolCE qu’est ce que c’est ?

Et bien c’est un projet pour les DWM ayant pour but de réaliser un site web sur une conférence liée au web. Pour cela il nous faudra analyser cette conférence afin d’en obtenir toutes les informations nécessaire pour confectionner notre futur site.

Pour notre part, la conférence que l’on nous a confié est « Compassionate Design » d’Eric Meyer. Dans celle-ci il nous explique que de nombreux designers ne désignait que pour une majorité, pénalisant et marginalisant une partie des utilisateurs, oubliant de les considérer comme humains. Le but étant de sensibiliser les designers et créateurs à concevoir en toute prévenance, compassion et empathie.


Le projet

Vous pouvez trouver la finalité du projet sur http://mariamleonard.com/projets/iolce/

Après la formation de notre team de choc composée de Olivier Lauwers, Goeffrey Geyssens, Eryk Poswiatny, Brice Willy et Mariam Léonard ; chaque membre du groupe a visionné la conférence chez lui. Grâce à un google doc, chacun a partagé ses notes afin que nous puissions nous compléter.

Tout le monde aime les chatons tout mignons.

Le choix a été de traduire entièrement la vidéo avant de nous retrouver au premier atelier. Lors de celui-ci en groupe, nous avons pu discuter oralement des incompréhensions de certains et décidé de regarder à nouveau certains passages afin de nous compléter. La structure de base fut également établie et les tâches réparties entre la relecture de certains passages de la conférence, commencer l’écriture grossière en suivant la structure établie en groupe, et à celui qui réécrirait en corrigerait le texte approximatif en document clair et limpide.

Lors des ateliers suivants, nous nous sommes concentrés sur les commentaires établis par Mr Marchal sur notre document et la correction du contenu. Les tâches furent encore réparties entre la rédaction du Case Study et de l’abstract ainsi que la relecture de ceux-ci. Chacun a pu donc participer et mettre la main à la tâche, regardant ce que les autres ont pu faire et donner notre avis. 
Pour être certain que notre texte était compréhensible, nous avons fait relire notre contenu par une tierce personne extérieure à l’école.

Vous pouvez d’ailleurs aller regarder le contenu de ce google doc grâce au petit lien ici !

Faut dire qu’on s’est bien marrés d’écrire tous en même temps sur le même document ♥

Au cours des ateliers suivant nous avons continuer a retravaillé notre texte afin de le peaufiner le mieux possible et de transformer cette masse d’informations en un contenu plus résumé et plus précis.

Une fois ce contenu rédigé et validé par nos professeurs il était temps de passer à la confection de notre site qui est une étape individuelle car nous avions a rendre chacun un site personnel.


Pour le design, j’ai commencé par réaliser un tas de test de typographies. Il fallait choisir quelque chose de moderne, je voulais une serif et une sans serif et respecter les notions vues en cours. J’ai opté donc une pour les polices suivantes “Cabin” et “Old Standart TT” que vous retrouverez sur Google Font.

Chacun de notre côté, nous avons réalisé des test de typographie, nous nous sommes questionnés, interrogés nos professeurs sur ce qui correspondrait de mieux, comparé nos polices.

Une fois la police choisie, j’ai du testé les différents alignements possibles.

Test de d’alignement de Mariam L.
Premiers Wireframe de Mariam.L & test de direction artistique

Nous nous sommes également aidé en nous donnant des liens utiles pour le code, d’autres ont ramené un livre de web design : « Design for screen — Wang Shaoqiang ed » pour nous servir de documentation et d’inspiration, nous n’avons pas hésité à nous motiver en parlant chacun de nos idées de design pour notre site ainsi que comparer nos wireframes et avertir les autres si une consigne du brieging n’était pas respectée.

Ma garde robe a servie de mur d’affichage pour mes croquis, c’était bien fun

Pour ma part, j’ai voulu réaliser un story telling au travers de mon site. Comme notre conférencier parlait au début de la conférence de la fable du lièvre et de la tortue, j’ai décidé de raconter cette histoire à ma façon.
Ma thématique a été de faire un site en noir et blanc, mais par la suite, l’idée m’est venue de rajouter des éléments de couleurs : des fleurs.
Elles seraient symbole de la compassion manquant au web, la fin de l’histoire serait la tortue, gagnante de la course, offrant une fleur de couleur au lièvre.

Cela serait une belle conclusion, de dire que la compassion se trouve partout autour de nous et que nous sommes libre de l’offrir, que cela apporte les couleurs à une vie en noir et blanc !
Design for Screen, un livre de Wang Shaoqiang ed

La partie code est celle qui m’effrayait le plus, parce que j’avais peur de mal faire, d’écrire une erreur qui ferait exploser mon ordinateur, ou je sais pas quoi. 
Quoi qu’il en soit, j’ai repris mes notes, mes slides, et j’ai codé, fait vérifier par les profs, et demandé à mon poto Julien de vérifier les conneries que j’avais écrites.
J’ai mis deux jours à tout écrire, à vérifier sur les validateurs d’HTML et CSS sur internet, mais à la fin je me disais que pour quelqu’un qui, il y a deux semaines de cela ne savait même pas ce qu’était un <p> </p>, je pouvais être fière de moi. Et finalement, je me suis rendue compte que je m’étais éclatée à coder pendant ces quelques jours!

Comme quoi …

J’ai apprécié le fait de travailler en groupe pour certains aspects, pour d’autres non. On s’est bien marré quand on avait pris de l’avance, qu’on était autour d’une table et qu’on se refilait des conseils. Ce qui m’a par contre beaucoup frustré est lorsque chacun a une tâche assigné mais que certains ne l’accomplissent pas, ou carrément ne viennent pas au ateliers sans prévenir. On se retrouve alors avec une charge de travail en plus, on est frustré, on se dit qu’on travaille plus que les autres alors qu’on est tous dans le même bateau pendant que certains se la coule douce, et ca donne des envie de meurtre faut dire.
Du coup, on reste calme, on ne s’énerve pas mais on fait comprendre que des attitudes ne sont pas correctes avec de la diplomatie, et on sait à quoi s’en tenir pour la suite des ateliers !

Ce premier workshop fut une bonne expérience pour apprendre a travailler en groupe, a se repartir les diverse taches a réaliser mais également a nous mettre d’accord malgré nos différents avis.

Nous avons pu avancer, progresser et nous motiver en nous entraidant et en gardant un bon esprit de groupe, en restant motivé et de bonne humeur, en nous soutenant et nous rassurant. Nous n’avons pas hésité à retourner plusieurs fois vers les professeurs pour leur demander de nous corriger et de rendre un bon résultat.

Ce workshop est associé à plusieurs cours qui nous apprennent a rédiger et assembler correctement notre contenu comme le cours de web typographie, ou bien créer nos premiers interfaces en UX Design et technique de création et enfin coder tous ca à l’aide du cours de frontend design.