Case-Study

Premier jour de la rentrée, Nous sommes tous réunis afin de déterminer nos classes. Pour se faire, nous nous mettons par groupes de 4 dont un doublant, ce que je suis, puis ces groupes sont répartis afin de constituer 2 classes. Ainsi je me retrouve avec un ami datant de ma première à Albert Jacquard et 2 autres garçons que je ne connaissais absolument pas. Afin de communiquer facilement je crée un groupe messenger avec tout le monde ( me permettant par la même occasion de découvrir leur prénom). Ainsi nous avions :

  • Photo de Nathan

    Nathan,

  • Photo de William

    William,

  • Image par défaut car pas de photo d'Alexis

    Alexis,

  • Photo de moi, Aude

    et moi-même, Aude.

Mais nous n’avions pas formé de groupe juste pour le plaisir. C’était une façon de nous préparer à notre premier travail collectif, le Input Output Lire Communiquer Ecran ou IOLCE. Il s’agit de résumer une conférence donnée et d’en faire un site respectant les principes de base de web tels que :

  • un code propre et indenté,
  • le respect de la Loi de Gestalt,
  • une hiérarchie au niveau de la taille de la typographie logique,
  • etc.

Premiers pas

Nous avions pour conférence “Durable Design”, donnée par Jon Tan à “An Event Apart” à Orlando le 9 octobre 2018. Le premier jour où nous devions nous retrouver, nous avions tous déjà vu la vidéo mais devions faire sans Alexis qui était tombé malade. En parlant de nos ressentis, nous sommes tous tombés d’accord sur une chose. Jon Tan avait voulu utiliser une comparaison ( le modernisme/le web) qu’il avait tellement tirée en longueur qu’au final il nous avait tous perdus et qu’il nous avait été difficile de comprendre son message. Heureusement, nous avions les notes de tout le monde résumée sur un Google Donc donc malgré l'absence de l’un de nos membre, nous avions largement de quoi faire. C’est là qu’un nouvel inconnu, Gauthier, nous a approchés pour nous demander s’il pouvait se joindre à notre groupe pour le travail. Nous l’acceptons rapidement mais malheureusement il ne peut pas grandement participer, n’ayant aucune connaissance de la conférence. Je l’ajoute néanmoins à notre Google Doc afin qu’il puisse se faire une idée. Nous passons la journée à débattre de ce qu’il était bon de garder et de ce que Jon Tan voulait dire par ses exemples. Après cela, nous écrivons un premier jet du texte en catégorisant et hiérarchisant l’ordre des différentes informations. Nous arrivons ainsi à une liste de 9 points que nous communiquons au membres absents.

Screenshot de Messenger avec la liste des 9 points

Avant de se séparer, nous nous répartissons les points afin d’avancer plus vite. Le premier jet étant toujours trop brouillon, nous devons nous assurons d’étoffer le contenu de nos points respectifs dans la mesure du possible. Certains passages furent plus difficile que d’autres comme par exemple la définition de l’entropie. C’est un concept assez compliqué à expliquer de manière simple surtout quand on vient de le découvrir. Nous nous retrouvons tous ensemble cette fois pour finaliser l’écriture du texte dans sa continuité. On regarde ce que chacun avait écrit pour ses points et on réorganise ou reformule en fonction de ce qui vient avant ou après dans le récit. Nous trouvons également les titres pour nos différentes sections. Afin de rire un coup nous décidons de leur donner un style un peu de vidéo Youtube à la “putaclic”. Cela nous prend une bonne partie de la journée ( notamment parce que nous avons dû encore retravailler notre définition d’entropie).

Screenshot de notre Google Doc

Une fois cela fait, nous nous lançons dans la création d’un markdown. Il s’agit d’une sorte de pré-code permettant de faire une transition entre la phase texte brut à celle de la page HTML définitive. N’ayant jamais utilisé ce principe avant, nous galérons un peu avant de comprendre pleinement comment tout écrire de façon à obtenir le rendu de mise en page désiré ( vous devriez essayer de faire une liste dans une liste avec ce système, il nous aura fallu plusieurs essais avant d’y parvenir). Nous organisons également nos niveaux hiérarchiques. Autrement dit, en regardant notre contenu brut, nous devions définir en combien et quelles catégories nous repartirions les différents types de texte. En poursuivant notre avancement et notre réflexion, nous avons dû à plusieurs reprises aller remodifier le contenu du markdown ou du texte même.

Passage au niveau suivant

Nous avions notre base, il était grand temps pour nous de commencer la partie design et code, ce qui devenait alors un travail individuel. J’ai donc commencé par choisir ma couleur de paragraphe en réalisant divers tests. Ce n’est pas la partie la plus joyeuse mais elle n’en reste pas moins intéressante à réaliser. Encore à ce niveau, nous avons améliorer notre définition de l’entropie en y ajoutant sa dimension astronomique. Ce qui a donné lieux à des conversations via le Google Doc assez drôles ( j’ai bien des screenshots mais je les garde pour moi désolée). Une fois certains de notre contenu, je peux enfin m’attaquer au wireframe InVision de mon futur site, du moins uniquement la version mobile dans un premier temps. Je commence par en choisir la couleur principale puis je me lance. Je choisis ou remodifie les tailles de police que j’avais déjà choisies et adapte ma grille en fonction. Tout se suit assez rapidement et je finis la première version assez vite. Je veille à mettre du rythme dans l’enchaînement de mon contenu et de ma mise en page.

Screenshot de mon wireframe version mobile

Après une revérification de mon design, j’en change plusieurs éléments tels que la dispositon des titres et des listes.

Screenshot de mon wireframe version mobile

S’ensuit la phase de codage dont le html se fait en une dizaine de minutes grâce au Markdown. Je passe au CSS, tente des choses, en améliore d’autres, rencontre certaines difficultés pour certaines choses comme la mis en page de mes listes qui me donnaient du fil à retordre. J’arrive cependant enfin à obtenir ce que je voulais. Sur appuis du feedback de mes professeurs, je me lance dans la conception de mon wireframe pour version ordinateur. Je décide de tenter une grille asymétrique comme base, ce qui s’avère beaucoup plus complexe que prévu. En effet certaines sections riches en contenu sont aisées à mettre en place mais pour celles ne contenant que 2 blocs de texte et une image tout se complique. Pour rajouter de la difficulté à tout cela, j’attrape la grippe. Je perds alors énormément de temps. Mais il faut s’accrocher et malgré la maladie je travaille et avance sur mon projet.

Screenshot de mon wireframe version ordinateur

Dernière ligne droite

Cette finalisation de projet fut assez chaotique je dois l’admettre. Je m’étais un peu emportée dans mes designs pour mes sections sur le modernisme et le "DIY d'un bon design". En effet, avec la manière dont mon html était écrit, il était difficile de coder avec le css afin d’obtenir le résultat que j’aurais souhaité. Bravant la consigne du docteur de rester chez moi, je me rends à l’école afin d’obtenir de l’aide de la part d’un des professeurs. J’y passe la matinée, ce qui me permet de résoudre certains autres de mes problèmes mais malheureusement pas vraiment celui de la mise en forme. Il m’a été conseillé d’utiliser le sysytème du CSS Grid, j’ai filé lire la documentation afin de comprendre comment l’utiliser mais de nouveau, à cause de la mise en forme de mon HTML, il n'est pas vraiment possible de m’en servir. Désespérée et inquiétée avec l’approche de l’échéance finale, je passe une partie de ma nuit à essayer de trouver une solution. Finalement, aux alentours de 1h du matin, je tente une entourloupe qui s’avère concluante ! Hourra ! Dieu existe ! (pardon je m’emballe)

Screenshot de mon html

Le lendemain, je m’attaque à la version tablette ainsi qu'à l'optimisation de mes images ainsi que leur format @2x. Tout se déroule sans trop d'accros, ce qui faisait assez plaisir après le drame de la veille. Je finalise tout ce qui reste, valide mes fichiers html et le css, et j'attends la fin de la journée que ma mère me ramène ma voiture pour enfin aller remettre mon travail à l'école. J'aurai mes résultats dons une dizaine de jours, j'espère que mon travail aura été concluant.