IOLCE: Case-study

11 min readNov 2, 2018

The internet of natural things, par Simon COLLISON

La découverte du projet

Lors du vendredi 14 septembre 2018, le jour de la rentrée, nous sommes informés de l’existence du projet IOLCE. Après une brève explication, on nous invite a créer des groupes de trois, et de choisir sur quelle conférence nous allons travailler. Une fois notre groupe créé, un quatrième membre, un 2.5 (qui a doublé sa deuxième année en Web Design) vient s’ajouter au hasard dans notre groupe.

Quatre conférences étaient disponibles. Tout d’abord, mes coéquipiers et moi, optons pour la conférence: How to Build an Atomic Bomb. By Mike Monteiro. Cependant, il s’avère que celle-ci intéressait beaucoup d’étudiants en Web-Design et n’étant pas dans les premiers, nous avons donc du changer de choix. Notre second choix, c’est-a-dire notre choix définitif est alors celle de Simon Collison intitulée: “The Internet of Natural Things. By Simon Collison”.

Qu’est ce que le projet IOLCE?

Le projet IOLCE à comme support une vidéo-conférence en anglais. Notre but? En groupe, nous devons nous comprendre, réinterpréter et structurer le contenu de cette conférence en un texte cohérent.

Une méthode de travail

Avant de commencer quoi que ce soit, il était important d’établir une méthode de travail. Pour travailler en groupe de manière efficace, nous avons établis un planning subdivisé en diverse tâches.

En premier lieu, nous avons décidé de tous regarder individuellement la conférence une fois, et d’en prendre quelques notes.

Ensuite, afin de rassembler notre contenu en un seul contenu plus complet, nous avons regardé une seconde fois la conférence ensemble avec les sous-titres anglais généré automatiquement par YouTube. Une version assez brouillon de notre contenu est alors formée.

Les Workshops

Premier Workshop avec une équipe de choc

Le projet IOLCE est avant tout un projet collaboratif, un projet qui nous apprend à travailler ensemble, à échanger nos idées et aboutir en un projet commun. Pour ce faire, nous disposons de trois workshops où nous pouvons travailler tous ensemble et avoir un feedback de nos professeurs.

Workshop 5/10/18

Avant notre premier workshop, les consignes du projet nous paraissaient un peu floues et de nombreuses questions se posaient au sein du groupe. Heureusement, lors du premier atelier, Mr Bourgaux a prit la parole pendant une heure pour nous donner des premières consignes et conseils.

Nous disposons d’un mois pour réaliser notre site web sur mobile ainsi qu’un case-study et un abstract. Au départ, la notion de case-study nous paraissait un peu floue et accompagnée d’un peu d’incompréhension.

On nous partage le briefing du jour: réaliser un premier jet de notre contenu. Pour cela, il nous fallait structurer notre texte et sélectionner les informations pertinentes. Afin de pouvoir partager notre contenu en temps réel entre les membres du groupe et Mr Thronte, nous avons créé un Google Doc.

Après une longue journée de travail, nous arrivons à un premier jet. Nos premières difficultés voient le jour: trouver de l’inspiration pour nos tournures de phrases, ne pas se répéter, etc… Ensuite, nous décidons de montrer notre avancement à Mr Thronte, notre professeur de Frontend Design. Celui-ci nous propose comme amélioration d’intégrer des sous-titres pour la compréhension, de développer certains points et de vérifier quelques tournures de phrases. Bref, il s’agissait de notre premier jet donc rien d’étonnant.

Workshop 12/10/18

Une semaine passe après le premier workshop, nous avons décidé de se répartir le texte Google Doc afin de pouvoir améliorer, reformuler certains points du texte avant le deuxième workshop.

Vendredi 12 septembre, nous entamons notre deuxième workshop. Durant celui-ci, une très bonne nouvelle nous parviens: l’annonce du briefing complet du projet IOLCE. De nombreuses questions trouvent alors leurs réponses.

Sur base du contenu, nous devons créer un site web Mobil-First individuellement. En plus du site web, il nous est demandé de rédiger un case-study (que vous êtes en train de lire) et un abstract qui est un résumé de la conférence. Une autre version, cette fois-ci desktop, sera à rendre pour Janvier. Notre site en version mobile-first est à rendre pour le lundi 5 novembre sur notre nom de domaine. Nous devons également avoir une version papier de notre site, pour la présentation qui est prévue pour le vendredi 9 novembre.

Objectif du jour: Revoir nos titres et sous-titres et les rendre plus accrocheur, ainsi que de finir notre deuxième jet. Mis à part quelques mots et phrases, le contenu est dans l’ensemble validé par notre professeur.

Workshop 19/10/18

Dernier workshop, mais nous sommes satisfait de notre avancement. Notre texte est presque terminé et nous avons hâtes de pouvoir commencer le design. Notre travail collectif s’arrête ici mais bien entendu nous pouvons toujours compter les uns sur les autres en cas de problèmes de codes.

Au point de vue du design, Vincent Liegeois, le 2.5 de notre groupe, plus connu sous le nom de Vinch, m’a conseillé d’utiliser Adobe XD pour sa facilité de prise en main.

Avant de vraiment me concentrer au design, j’ai voulu tout d’abord trouver deux couleurs principales que l’on peut associer. On m’a alors fait découvrir le site Coolors.com, ce site offre des variations de cinq couleurs qui vont bien ensemble. Après de nombreux tests, je choisi ces deux couleurs:

J’ai passé beaucoup de temps tout d’abord sur le design. Je voulais mélanger, simplicité, ergonomie et avoir un visuel convenable. J’ai beaucoup aimé concevoir le design car j’ai eu mon premier aperçu de mon potentiel site, et ça m’a donné de la motivation de travailler dur pour atteindre mon objectif.

La couleur de paragraphe

La couleur de paragraphe concerne tout ce qui tourne autour de la typographie. C’est donc essentiellement une recherche de police, d’interlignage, de graisse,etc… C’est dans le cours de Design Texte que la plupart de mes recherches se sont effectuées. Il fallait faire attention a beaucoup de notion comme le rapport hiérarchique, la hauteur de X, le rythme vertical.

J’ai tout d’abord visité plusieurs sites afin de trouver une police qui pourrait correspondre à ce que je recherche. J’ai donc trouvé cinq polices différentes avec lesquelles j’ai varié tout les paramètres cités ci-dessus afin de trouver la combinaison parfaite.

Mon choix s’est alors porté sur deux polices sans-serif sur Google-font. Pour la police de texte j’ai opté pour la “Open Sans” et pour la police de titre j’ai choisi la “Lato”, les deux se ressemblent fortement mais je trouve qu’elle forme un ensemble harmonieux et cohérent.

J’ai testé divers rapport hiérarchique mais j’ai gardé le rapport x1,2 car je le trouvais cohérent pour mes polices.

It’s time to code

Me voici arrivé à la partie que je redoutais le plus: le codage. J’appréhendais cette partie car c’est mon premier projet et c’est la première fois que je vais coder quelque chose que je veux créer. Même si j’ai réalisé divers exercices au cours de Frontend Design, je n’ai jamais su vraiment m’évaluer dans ce domaine. J’étais à la fois excité et perplexe à l’idée de coder mais je voulais connaitre mon niveau en CSS et HTML.

HTML

Première étape et sans doute la plus simple dans le codage, rédiger sa page HTML. J’ai tout naturellement commencé par là, en créant des sections et tapant mes divers paragraphes et titre, liens, etc... Quant aux images, je m’en suis occupé plus tard. Cette étape m’a paru assez simple car ce sont les prémices du code.

CSS

Je m’attaque dorénavant à la partie la plus compliquée et sans doute celle qui m’a prit le plus de temps: la page CSS. L’avantage est que j’avais déjà une idée globale de ce que je voulais faire grâce à mon design préalablement établi sur Adobe XD.

J’ai du penser a énormément de choses en créant mon design, comme les différentes classes, les propriétés adaptées, les margin/padding, les widths,etc… Ensuite j’ai ajouté mes images, après les avoir compressées un peu pour ne pas dépasser le 5 Mo. Bref chaque lignes à son importance et il faut être très minutieux et précis car je me suis vite rendu compte qu’un oubli d’un simple point-virgule pouvait me créer de gros problème.

De plus, même si j’avais un prototype de design, il faut dire que je l’ai quand même fait pas mal évoluer pour mon site finalisé. J’ai donc encore fais de nombreux tests pour trouver la meilleurs combinaison qui arrive à allier l’ergonomie, le design, et le code. Par exemple j’ai passé des heures à chercher une couleur de fond qui pouvait faire ressortir mes titres (qui sont de couleurs jaune) alors qu’au final je l’ai laissé en blanc. Même si ça m’a prit pas mal de temps, j’ai toujours essayé de trouver les meilleures alternatives pour un ensemble cohérent.

Mes difficultés

Nombreuses sont les difficultés que j’ai du rencontrer et surmonter:

Premièrement, le choix d’une typographie et d’une couleur de texte. Je suis complètement débutant dans le domaine de la typographie donc j’ai au début passé pas mal de temps à trouver un bon rapport hiérarchique pour mes niveaux de titres.
Ensuite, c’est surtout au niveaux du code où j’ai rencontré la majeurs partie de mes problèmes. En effet, c’est mon premier projet en HTML/CSS donc je savais que j’allais faire pas mal d’erreurs et cela c’est vite confirmé. La micro-typographie m’a parue assez compliquée à tout saisir, ce sont beaucoup de petits détails important à respecter. La notion de margin/padding m’a aussi causé pas mal de problèmes, comment réussir à bien différencier les deux.
La disposition de mes images était aussi une prise de tête pour moi, que ce soit pour arriver à les placer, les centrer, les réduire de taille, etc…
Coder en méthode BEM était aussi un challenge pour moi car j’ai tendance à être un peu désorganisé mais j’ai relu mon code encore et encore pour me rapprocher le plus de la méthode.
Accorder mes couleurs était un challenge pour moi, comme je l’ai dis précédemment, j’ai beaucoup cherché pour trouver une couleur de fond en accord avec ma couleur de titre.
Arriver à bien cibler un éléments grâces aux classes et les pseudos-classes. Le fait de décider si une image est une image de contenu ou de décoration était pour moi un problème délicat, la majorité de mes images sont en contenu étant donné qu’elle font un rapport direct avec mon texte ou mon contenu en général. Je pourrai énumérer point par point tous les problèmes que j’ai rencontré durant le codage mais bon je vais vous épargner cela.

Bref ce projet était parsemé de problèmes à résoudre, d’obstacles, d’erreurs, je pense réellement avoir rencontré toute les erreurs possible en HTML/CSS tellement j’en ai eu. Mais je ne me suis pas démoralisé, je pense que justement c’est grâce à tout ça que j’ai appris et retenu énormément de choses et je ne regrette absolument pas d’avoir passé autant de temps sur ce projet.

Mon expérience

Ce projet était riche en expérience. J’avais hâte de commencer mon premier projet pour découvrir ce qu’était concrètement le web. Même si les cours m’ont appris beaucoup de choses, le processus de IOLCE m’a enrichit en connaissance! Le fait de faire beaucoup d’erreurs m’a donné beaucoup de leçons, certaine notions étaient floue auparavant que j’ai pu comprendre maintenant. C’est un aspect que j’adore dans le web, c’est à force de persévérer, de surmonter certaines choses, de chercher pour trouver, que l’on apprend énormément de choses. De plus, ce projet m’a apprit aussi à travailler en équipe, avec une bonne ambiance et travailler tous autour d’une même passion est très enrichissant. Je remercie mon équipe: Antoine Gilson, Dorian Preyse et Vincent Liegeois d’avoir partagé leur connaissances pour rendre le projet IOLCE meilleur.

Les ressentis des autres

Le 9 novembre 2018, après avoir jeté un oeil aux sites de mes chères collègues de DWM, j’ai décidé de leurs poser quelques questions dans le but d’avoir leur témoignage sur le projet IOLCE. Je voulais savoir si ils ont rencontré les même difficultés que moi, leur expérience, ce qu’ils ont pensé de leur conférence, etc… Au total, j’ai interrogé quatre étudiants, ceux-ci avait tous une conférence différente, afin d’avoir un avis global !

“How to build an atomic bomb”: Sa grande difficulté était avant tout l’anglais! En effet, vu que les conférences étaient données par des anglophones, il était peu aisé de tout comprendre si notre niveau d’anglais est assez faible ! Rédiger le contenu était également une étape assez compliquée pour lui du à son niveau de langue. Même si il n’était pas très satisfait de son design, il a apprit énormément sur le code.

“From AI to robots, from apps to wearables”: Celui-ci était un 2.5 donc il avait déjà vécu l’expérience Iolce. Tout naturellement, il eu plus facile cette année. Il a notamment apprécié le fait de commencer le projet en mobile first, ce qui n’était pas le cas l’année passée. En résumé il n’a pas rencontré de difficulté en particulier et était fier de s’être amélioré depuis l’année passée.

“Broad Band — What History’s Female Internet Pioneers can Teach us about Tomorrow”: Une fois de plus, il s’agissait d’une étudiante 2.5. Comme la personne interrogée précédemment, elle trouvait cette année mieux organisée, et avait beaucoup aimé commencer par le mobile first ! Au niveau du timing, celui-ci était suffisant, même si l’analyse de la vidéo et du contenu lui a prit un temps précieux, elle a néanmoins eu assez de temps pour faire design, et coder par la suite.

“The internet of natural things”: Etant donné que cet étudiant avait la même conférence que nous, son avis rejoignait fortement le mien. Le sujet en lui-même était intéressant mais le conférencier mélangeait ses idées et n’était pas très structuré dans sa conférence, ce qui l’a rendue plus difficile à comprendre.

Finalisation du projet

J’ai finalisé mon projet en janvier. Après avoir fait d’autre projet comme la V-Card, l’examen d’HCD et autres, je me suis vite rendu compte des bêtes erreurs que j’ai fais, mais c’est justement le but! Travailler sur différent projet m’a fait prendre du recul pour progresser dans mon projet IOLCE.

Le responsive n’était pas chose aisée comme je m’y attendais. Les flex-box était assez compliquée à comprendre, mais très intéressante pour mieux concevoir son site.

Bref, j’ai appris énormément en IOLCE comme le code, le design, divers logiciels, et surtout le travail d’équipe. Ce fut une belle expérience riche en beaucoup de choses.