Case Study — IOCLE 2018

Stl Las
Stl Las
Nov 2, 2018 · 12 min read

The internet of natural things

- Découverte du projet -

Étant arrivée une semaine en retard dans la section DWM, je me mets à jour et apprends très rapidement qu’il y a un gros projet à réalisé dans un premier temps en groupe. Ce projet c’est IOCLE. La consigne principale est qu’il faut être 4 par groupe. Je poste donc un message sur Slack à la recherche d’un groupe. J’obtiens rapidement une réponse mais je serais ensuite redirigé vers un groupe de 3 personnes de ma classe qui sont Camille et Julien Scheen ainsi que Tristan Deltour.

Présentation du projet

Ce projet consiste à réalisé un résumé d’une conférence en anglais qui était celle de Simon Collison – The internet of natural things, et d’en faire un site web en one page. J’avoue que ça m’a fait un peu peur puisque j’avais déjà une semaine de retard et me dire que j’allais créer un site web toute seule me faisait un peu peur. Mais j’ai rapidement pris les choses en main et j’ai pris l’initiative d’aller voir les 3 personnes de mon groupe, que je ne connaissais pas du tout. Nous faisons rapidement les présentations et nous nous mettons d’accord pour faire un groupe slack afin de communiquer. Nous nous voyons plusieurs fois pour mettre en commun nos notes et faire un premier résumé avant le premier cours de workshop.

Lors de notre premier cours, nous nous répartissons en part égale le résumé et décidons de le réécrire afin de l’intégrer sur notre site. Nous y travaillerons pendant les 2 prochaines semaines en nous voyant mais également en faisans des «réunions» sur le Google doc afin de modifier tous ensemble le texte. Nous demandons aussi l’avis de notre professeur responsable de notre groupe, Monsieur Bourgaux. Ça a été quelques fois compliqué car nous n’étions pas toujours d’accord sur la façon d’écrire le texte. Heureusement la communication et l’écoute entre nous était bonne. Nous avions des facilités à nous dire ce que nous pensions sans que cela puisse créer des tensions.

Au final, nous avons décidé que je le réécrive au propre une dernière fois afin d’avoir une harmonie dans le style d’écriture et la syntaxe et après ça nous avons conclu ce chapitre.

Conception du site

Nous nous séparons à présent pour travailler individuellement. Je commence à faire des recherches sur internet pour voir un peu le genre de site internet qui existe déjà et observer quel genre de visuel j’aimerais. Je regarde également aux typographies et visuels que je veux. J’utilise une typographie a empattement qui est la Bree+Serif pour les titres et une bâton qui est la Rajdhani pour le texte courant. J’utilise le rapport hiérarchique qui est le Perfect Fourth de 1.333pts

Screenshot de mon espace de travail

Je créée le visuel de mon site dans sketch et une fois cela fini , je commence enfin à coder.

J’étais assez sceptique quant à mes capacités à pouvoir le réaliser seule. À ma plus grande surprise j’ai remarqué que je ne m’en sortais pas trop mal et qu’au final j’étais pas si paumée que ça. ( merci M. Thronte et mes amis de troisième !)

J’ai rencontré plusieurs problèmes , notamment avec les images car je ne savais plus exactement comment faire. J’essaie d’optimiser au maximum mon code et mon css mais je ne suis pas certaine que ce soit optimal à 100%. Il reste , au moment où j’écris ces lignes, 3 jours pour finir tous les projets.

On est dimanche soir et j’ai fini mes projets à rendre demain.J’ai utilisé chaque instant pour pouvoir travailler. Aussi bien dans le train que lorsque je devais aller quelque part, j’avais toujours mon pc avec moi.

Conclusion

Ça a été rude et j’ai bien cru que je n’aurais jamais fini, mais j’y suis finalement arrivé. Il restera l’affiche à imprimé et plus qu’à croisé les doigts pour que la présentation de vendredi se passe bien !

Ce fut une bonne première expérience et qui m’a plu, ce qui me réconforte dans mon choix d’option !

Présentations

Nous sommes le vendredi 9 novembre et c’est enfin le jour des présentations!

On y arrive à l’école, on s’installe par groupe, on affiche nos compositions visuelles sur les murs et on est prêts ! Les professeurs passent un par un voir nos projets et les commenter, tandis que nous les élèves nous allons entre les bancs afin de découvrir les projets des autres.

Il nous est demandé d’interviewer 4 étudiants afin de voir un peu les difficultés qu’ils ont pu rencontrer.

Étudiante n° 1 : elle faisait parti du groupe 17 et avait la conférence #4, comme nous.

En premier lieu, je lui ai demandé ce qu’elle avait pensé de la conférence. Elle m’a confié avoir trouvé le sujet intéressant sur lequel elle a appris plein de choses vis-à-vis des animaux. Concernant la barrière de la langue, elle n’a pas eu de difficultés à la retranscrire , mais plutôt à la comprendre par moment car le narrateur n’était pas toujours clair et organisé dans ses propos.

En deuxième lieu je lui demandé sa méthode de travail. Dans un premier temps, pour le travail de groupe, ils ont décidé de se répartir la conférence en 4 parties et d’ensuite mettre en commun afin d’améliorer le texte tous ensembles, et ce, jusqu’à obtenir le texte final. Elle a ensuite commencé son site, et m’a confié ne pas avoir eu de problèmes à créer le graphisme, car elle est déjà diplômée en temps de graphiste à St-Luc à Bruxelles. Elle a éprouvé quelques difficultés pour coder, mais ça, c’est normal :-)!

Je lui ai également posé quelques questions concernant l’option puisqu’elle avait déjà une expérience «universitaire» et idéalement la différence qu’il y avait entre son ancienne école et ici. Elle m’a répondu qu’ici , les cours étaient plus axés sur la pratique et l’apprentissage, qu’elle avait la sensation d’apprendre vraiment quelque chose et que les élèves et les professeurs étaient très gentils, qu’elle se sentait à l’aise ici.

Étudiant n° 2 : j’ai interrogé un étudiant de ma classe qui était dans le groupe n°2 qui avait la conférence #2.

J’ai posé les mêmes questions que pour l’étudiante n°1 : Qu’a-t-il ce qu’il pensé de la conférence.

Pour lui, il l’a plutôt bien apprécié, la personnalité du conférencier était assez forte et il s’exprimait clairement malgré la difficulté à comprendre certains termes anglophones qui lui étaient propres.

Concernant la partie en groupe, son groupe a travaillé de la même manière que l’étudiante n°1, c’est-à-dire répartition des tâches, mise en commun et réécriture ensembles etc. jusqu’à obtention du texte final.

Ce qu’il a trouvé difficile était de devoir créer le design du site. Il a cherché beaucoup d’inspiration, etc. Ce qui l’a aidé, c’était le fait d’avoir dans la conférence des couleurs déjà définis suivant les sujets. Au niveau du code, il n’a pas éprouvé de difficultés car c’est un garçon qui connaissait déjà le code avant d’entrer dans l’option. Malgré ça il a quand même estimé que le temps de réalisation pouvait être très court pour des gens qui apprennent tout juste le code et qu’il pouvait comprendre les difficultés rencontrées. Un autre « problème » qu’il a exposé était que les cours les plus intéressants et utiles à la réalisation de notre projet avaient été faits après la remise du projet.

Il m’a parlé de la présentation des projets et a confié qu’il ne trouvait pas ça top. Qu’il s’attendait à avoir « plus » de supports et que nous n’avions pas énormément de place (1 banc par groupe).

Étudiant n°3 : c’est également un étudiant de ma classe, qui a eu la conférence #1 et qui faisait parti du groupe n°5.

Il m’a quant à lui confié que la conférence était sympa, que le sujet était intéressant et impactant. Pas facile à comprendre car il ne parle pas bien l’anglais, il a dû, de ce fait traduire certaines parties lui même en faisant des recherches sur internet.

Son groupe a eu la même méthode de travail que mes précédents témoignages. Je pense d’ailleurs que tous les groupes ont travailler de cette façon ( excepté le nôtre car on est pas très futés…) À la différence des autres, son groupe a fait l’abstract ensembles.

Pour créer son design il a utilisé le logiciel Adobe XD. Il a ensuite fait des recherches images, les a retravaillé dans photoshop etc. Il s’est ensuite attaqué au code. Il a eu quelques difficultés comme tous le monde, mais spécialement pour coder le javascript car il devait modifier le code donné lors du cours ainsi que pour le css. Il a pu bénéficier de l’aide de ses amis en troisième et de google pour trouver des solutions à ses problèmes.

Il est assez satisfait de ce qu’il a rendu même si certains éléments pas exactement comme il aurait aimé qu’ils soient. Il trouve que ce projet est très utile aux élèves, surtout en début d’année. En effet grâce à celui-ci, les élèves peuvent voir leur niveau et ce dont ils sont capable. Le temps imparti est selon lui assez pour réalisé le site.

Étudiant n°4 : Un étudiant d’un autre classe qui avait la conférence #3 et qui est dans le groupe 19.

Il a pensé de la conférence qu’elle etait intéressante, incluait les gens handicappés. Le point négatifs étaient qu’ils parlent vaguement de certains sujets et que il allait beaucoup trop vite sur certains points.

Au niveau méthodologie , ils ont chacun prit des notes de toutes la conférence et ont ensuite mis en commun pour , par la suite, réécrire le texte jusqu’à un produit final.

Le design a été réalisé sur sketch. Il a voulu garder le même code couleur que le site du conférencier ( le vert et le noir ) et a créer son site vis à vis de ça. Il a trouvé de l’inspiration sur les site commes dribbble, pintrest etc.

Il est ensuite passé au code, qui a été la partie la plus difficile pour lui car il n’est pas très doué. Il a travaillé très méthodiquement, en commencant par les titres, les blocs de textes et il a avancer petit à petit en réglant les problèmes directement lorsqu’il savait le faire. Sa dernière soirée a été consacrée à relire son code une bonne fois pour être certain de n’avoir aucune faute. Il est au final content de ce qu’il a pu rendre même si son site final ne ressemble pas exactement au design qu’il avait créer.

Je lui ai demandé également son ressenti par rapport à l’option. Il avait déjà fait de l’infographie en 5e et 6e, il est très content d’avoir choisi web car ce sont des choses qui se complètes avec la communication graphique. Les cours sont très sympas ( à part optique ) et les professeurs aussi. Il a hâte de continuer à suivre les cours et d’apprendre encore pleins de nouvelles choses !

Il est à présent 15h.

Les professeurs sont passés voir nos projets et nous on fait part de leur commentaires très instructifs afin de pouvoir réalisé notre projet final pour janvier. De mon côté, je vais essayer de modifier ce qu’il y a à modifier au plus vite car j’ai tendance à beaucouuuuuup procrastiner!

Malgré le fait que je sois en echec du côté de Mr. Thronte, j’essaie de rester positive mais je suis très déçue de moi-même car c’est quelque chose de «bête» de ne pas avoir vérifier son code et avec les retours que j’ai eu, je pense que j’aurais eu une bonne première note. Mais on tâchera de ne pas reproduire les mêmes erreurs en janvier et ça ira bien!

Update :

On est le 14 décembre, 23:33. Je pense que il est temps tout doucement de penser à s’y remettre. Je vais faire des recherches afin de changer mes illustrations et de voir un peu quel genre de design je veux pour mon format desktop et tablette. But first of all, il faut améliorer la version mobile! Ça ne fait que 1 mois et demi qu’on a eu la première évaluation mais je vois déjà tellement de chose à changer !

7 février :

Malheureusement j’ai laissé à la dérive ce pauvre case study qui m’est complétement sorti de la tête. Mon travail n’a pas été à la hauteur de mes espérances, ni pour mes professeurs !

Tâchons de faire mieux en août.

Nouveau départ ?

Nous sommes fin d’année, et ça fait un bail que je suis pas venue voir cet article.

Je dois recommencer mon travail, et refaire une nouvelle analyse de vidéo.

Cette fois c’est celle de Ethan Marcotte, « The World Wide Work ». J’écoute une première fois la conférence. J’ai du mal à comprendre ce qu’il dit, il parle rapidement, ce qu’il dit n’est pas facilement audible et mon apprentissage de l’anglais n’est pas aussi avancé que ce que je voudrais pour pouvoir comprendre tout ce qu’il dit malheureusement.

Je lis plusieurs articles, tweets etc, qu’ont fait des journalistes, des designers qui étaient présents à la conférence pour essayer de comprendre un petit mieux le sujet dont Ethan Marcotte parle et peut-être obtenir des informations supplémentaires que je n’aurais pas comprises.

J’essaie de comprendre le plus important, je repasse la vidéo plusieurs fois, je demande à des gens d’essayer de m’aider pour la traduire etc.

J’arrive finalement à résumé chaque partie de la conférence. Je l’écris sur une feuille, et je commence à essayer d’en faire un contenu cohérent et structuré.

(photo feuille)

J’écris d’abord chaque partie, et ensuite je réfléchis à la mise en forme et à comment je vais présenter les choses. Je réécris tout sur ma feuille, et ensuite je tape tout à l’ordinateur. Ensuite, je demande à quelqu’un de relire mon texte pour corriger les fautes d’orthographe.

Le design

C’est un sujet assez vaste que présente Ethan Marcotte, qui évoque plusieurs sujets. Il était donc nécessaire de trouver des couleurs et un design qui pourrait coller avec tous ces sujets là sans que ça fasse “brouillons” et bazar.

Je regarde un petit peu sur différent sites des designs qui se rapprocheraient de ce que je cherche pour ce travail. J’ai opté pour un design assez simple, qui n’altère pas avec ce qu’on est en train de lire, et qui permet de rendre la lecture agréable et facile.

Dans la plupart de mes travaux, je n’utilise qu’une seule couleur en plus du noir et du blanc et j’ai très souvent des design sobres, qui vont à l’essentiel. Je n’aime pas le surplus (même si je n’ai pas toujours réussi à avoir le résultat escompté) et j’essaie toujours d’aérer mes compositions.

C’est donc sans surprise que j’ai choisi une seule couleur principale, un bleu qui tend vers l’électrique. La sémantique de cette couleur étant qu’elle représente la force et la confiance, ce dont nous avons besoin puisque le lecteur doit croire ce qu’il est en train de lire, comprendre que c’est un sujet sérieux et que ce qu’on lui dit est authentique et sûr. C’est un sujet qui se doit d’amener en sensation de remise en question chez le lecteur, il est donc indispensable d’être crédible, et le bleu y contribu.

Les choix typographiques

J’ai utilisé la typo «Yanone », qui est une typo assez épaisse lorsqu’elle est en bold, principalement pour les titres. Ce choix permet de hiérarchiser correctement chaque sujets aborder puisqu’elle est assez importante visuellement. Je décide de mettre certain mots en bleu dans les titres afin d’apporter un dynamisme et d’appuyer le sujet que le lecteur est en train de lire.

J’utilise la typo « Open Sans » pour le texte courant. C’est une typographie assez basique, puis est assez facile à lire pour l’oeil et qui est esthétique. Elle est sans empattement, et permet à l’oeil de parcourir la ligne facilement. Je règle la longueur des lignes de textes afin qu’elle ne soient pas trop longue et que le lecteur puisse lire le contenu le plus facilement possible.

Je met plusieurs phrases en évidence, en changeant la couleur et la taille de la police, car elles résument, comme une sorte de conclusion, la partie du texte en question. Cela permet de créer du contraste dans le design et également de hiérarchiser une fois de plus le contenu.

Les illustrations

J’utilises plusieurs illustrations qui complète les textes et qui permettent de les comprendre dans leur totalité et plus facilement. Je créé et modifie certaines d’entres elles afin qu’elles collent avec mon univers graphique.

Le code

Une fois tout ça fini, je m’attaque au code. Je fais l’html assez rapidement. Pour le CSS, je dois utiliser des éléments que nous avons vu il y a quelques mois, je mets donc un petit temps à me remettre dans le bain et consultes les exercices que l’on avait fait en classe pour m’aider. J’essaie d’optimiser au maximum mon code. Je fais ensuite la macro et micro typographie.

En dernier lieu, j’écris et code l’abstract qu’il nous est demandé de faire.Et pour finir, je viens écrire ces dernières lignes.

Au final ?

Je dois avouer que le moral n’était pas au rendez-vous cet été. Je perds beaucoup confiance en moi, j’ai le sentiments de ne jamais réussir ce que j’entreprends, en général, et ça impact beaucoup mon esprit malheureusement.

Je sais qu’ici, c’est ma dernière chance. Si ça ne passe pas, alors c’est terminé. Je suppose que ça me met une pression en plus, mais qui du coup me démoralise aussi un petit peu. Je sais bien que je n’ai pas le niveau escompté, que je suis un petit peu (pas beaucoup j’espère) en dessous et ça me démoralise aussi car je n’arrive pas à remonter la pente. Je vois que je progresse petit à petit, mais ce n’est pas assez rapide.

J’espère que ça ira, j’espère sincèrement.

    Stl Las

    Written by

    Stl Las

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade