Introduction
IOLCE. Acronyme pour « Input Output Lire et Communiquer sur Écran », c’est également un atelier qui démarra très tôt dans l’année et qui prit l’intégralité du quadrimestre pour se conclure. L’objectif était simple : regarder une conférence en ligne sur un sujet précis, en faire un compte-rendu et ensuite l’intégrer. Mais comment s’y prendre ? Comment rendre notre texte plaisant à lire et notre site plaisant à utiliser ?
1 — La conférence.
Tout démarra avec la création d’un groupe de plusieurs étudiants : ne connaissant personne dans l’option, je devais donc m’ouvrir et parler aux personnes qui m’entouraient. Par chance, les choses furent rapidement prises en main, et le groupe se forma en très peu de temps.
Nous choisîmes la conférence de Kate O’Neill, une conférencière américaine qui va, pendant près de 50 minutes, aborder des techniques et des idées afin de se préparer à s’adapter à l’automatisation de la société telle que nous la connaissons tout en maintenant l’aspect humaniste de la technologie.
Mon expérience vis-à-vis du visionnage ainsi que de la rédaction fut assez similaire à celles des autres membres du groupe : en effet, nous avons considéré la conférence comme assez confuse, non seulement par l’absence d’une progression linéaire, d’un manque de temps de la part de la conférencière qui empiétait sur les informations qu’elle avait à partager, ainsi qu’une mauvaise interprétation quant à certains sujets qu’elle mentionne, comme par exemple sa véritable définition de “meaning”, ou de “scale”. Sans prendre en compte que certains membres du groupe ne parlaient et ne comprenaient que très peu anglais, ce qui fut une difficulté supplémentaire à surmonter pour eux.
Nous prîmes toutefois des notes de cette conférence, que nous rassemblerons afin d’en réaliser un compte-rendu écrit en français. Malheureusement, la répartition des tâches fut un peu bâclée pour notre groupe, et nous nous retrouvâmes à écraser le travail des autres et se perdre dans nos Google Docs. Qui plus est, les étudiants n’ayant compris la grande majorité de la conférence du fait qu’elle soit dans la langue de Shakespeare se sentirent décalés : n’ayant pu prendre de notes, ils eurent du mal à participer à la réalisation de l’écriture finale.
Cela n’empêchera ces membres de poursuivre le travail, notamment lors de la transition en Markdown. Cette organisation, par chance, sera mieux réalisée dans les ateliers qui suivraient, comme RUX.
Cela, additionné à un manque crucial de communication, nous posera certains problèmes, que nous parviendrons à résoudre pour la suite de l’atelier.
2 — Passage au markdown.
Certaines questions assez pertinentes furent soulevées au sein de mon groupe, concernant la rédaction : par exemple, Olivier, un des membres, voulait intégrer des sous-titres parmi les différents chapitres pour plus facilement structurer le texte. Idée avec laquelle je n’étais pas d’accord au début, pensant que ça limiterait le texte suivi à un simple enchaînement de blocs de textes indépendants les uns des autres. Il s’avèrera plus tard que les sous-titres furent une bonne idée, qui nous permettra de rajouter un niveau hiérarchique supplémentaire.
Une autre problématique qui nous demanda réflexion était comment énumérer nos différents chapitres : fallait-il commencer par une introduction, sans chiffre, ou directement par le chapitre 1 ?
Ce sont des détails qui, à l’échelle, peuvent paraître frivoles, mais qui in fine, permettent d’avoir une architecture et une hiérarchie de l’information qui soient résilientes et robustes.
La version finale de notre texte sera acceptée par nos professeurs, après quelques modifications. Il fallait, ensuite, le « traduire » en Markdown.
À ce moment-là, le Markdown était encore un concept un peu implicite pour moi, que je connaissais grâce à des programmes tels que Discord ou Twitch, qui permettent d’écrire dans un faux-semblant de Markdown. Par chance, il existe plusieurs lecteurs de Markdown qui permettent d’obtenir un feedback direct sur le texte en train d’être rédigé. Grâce à la transcription en Markdown, les différents niveaux hiérarchiques apparurent, et ainsi débuta le début de l’intégration et de la typographie.
3 — La couleur de paragraphe.
Arrive ensuite le moment de se concentrer sur nos couleurs de paragraphe, et c’est à partir de là que l’atelier devient individuel. Je dépoussièrai donc le petit site web que j’avais créé afin de tester mes paragraphes pour les précédents ateliers, et je m’en servis également pour avoir mes deux fontes ainsi que, éventuellement, mes rapports hiérarchiques. Avant de commencer à fouiller dans les bibliothèques de polices disponibles en ligne, je savais déjà que je voulais partir avec du Merryweather pour le corps de texte, car c’est une police en serif, plaisante à lire, assez versatile quant à sa compatibilité avec d’autres fontes, et qui possède de nombreuses graisses différentes.
Concernant la combinaison de fontes, je voulais trouver une sans-serif adéquate, et j’optai, en premier lieu, pour l’“Oswald”, tout simplement pour éviter de reprendre du Montserrat, mais aussi car elle est assez étroite et possède de nombreuses graisses différentes. Après quelques tests, il s’avéra que la taille de « x » était identique à un pixel près, ce que je considère comme relativement convenable pour les utiliser.
Après quelques tests directement sur un site Web, j’arrive à un résultat qui me convient : un très gros titre avec une graisse moyenne, un sous-titre avec une graisse très fine et un corps de texte traditionnel. Ces paramètres viendront probablement à changer mais je reste satisfait du résultat. Afin de correctement visualiser ce dernier, ainsi qu’obtenir un deuxième résultat, je décide de prendre ma dernière version sur le site et de l’exporter dans InVision Studio.
Je n’aime pas trop utiliser InVision studio notamment pour les bugs rencontrés avec l’export d’images en .svg, son absence de versatilité quant à l’utilisation d’autres unités que les pixels (pouvoir jouer avec les ems serait primordial) ainsi qu’un support de fontes assez bancal, mais ici je voulais rabibocher avec le programme, et donc j’y réalisai plusieurs interfaces et j’attendis le cours suivant pour avoir l’avis de mon professeur dessus. Celui-ci m’aida à avoir une autre perspective sur mes marges et mes fontes, et je choisis donc ma couleur de paragraphe finale, que j’allais utiliser pour mon intégration.
Cependant, j’avais mal anticipé le nombre de rapports hiérarchiques, ce qui posa problème lors de l’intégration : je dus donc repartir de ce que j’avais déjà réalisé et dus l’ajuster pour y faire passer d’autres sous-titres, et d’autres petits détails, mais l’intégralité du site web était là, presque prêt. J’en profitai pour également modifier le texte, et préparer l’intégration d’un burger menu.
4 — Un nouveau départ.
Avec cet atelier, je voulais complètement changer la manière dont je codais et j’imaginais les sites web, et partir sur quelque chose de plus esthétique que mon premier site web qui avait l’apparence d’une console de développeur. Ainsi donc, mon idée initiale était d’avoir un texte noir sur fond clair, d’avoir un aspect visuel un peu plus traditionnel du web, c’est-à-dire le texte se trouvant au milieu de l’écran, une barre de navigation située tout en haut et un tout petit footer à la fin. Je comptais également ajouter la fonctionnalité d’avoir un “Dark Mode”.
Et, comme de fait, je parvins à réaliser un “Dark mode”, après quelques minutes de réflexion et une petite recherche sur Internet, le code Javascript permettant la transition texte noir/fond blanc → texte blanc/fond noir était optimal. J’en ai également profité, étant lancé dans mon élan, pour tenter quelques nouvelles choses sur mon site web : une petite ancre qui permet de remonter tout en haut, une table des matières (située dans le burger menu) qui permet de naviguer au chapitre souhaité — j’aurai également souhaité avoir un effet de suivi qui indique, dans la table des matières, quel chapitre on est en train de lire, mais je verrais par la suite si je dispose du temps et des connaissances nécessaires — ainsi que des animations en CSS plus poussées que ce dont j’ai l’habitude de faire.
5 — Un évenement inattendu.
De manière complètement inattendue surgit une date de rendu pour une version finale du Markdown que nous avions déjà partagée près de deux mois auparavant, sauf qu’il fallait rajouter nos photos, ainsi que notre contenu total : footer, header, ce genre de choses.
Je tirai donc la sonnette d’alarme et complétai le markdown en fonction de ce que j’avais préalablement réalisé sur mon site web. Il ne restait plus qu’à trouver une petite dizaine de photos, mais par chance, nous avions déjà établi une espèce de « charte photographique » collective entre nous quatre, et, qui plus est, je savais que j’allais rester dans les variantes de noir et de blanc sur mon site, il ne me restait donc plus qu’à les exporter. Je ne comptais pas reprendre les slides de Kate O’Neill, notre conférencière, tout simplement car elle ne les a pas mises à disposition, que faire une capture d’écran rognée laisserait apparaître les pixels étant donné le taux de compression de la vidéo, et, de toute façon, elle opta pour un style qui ne convenait pas au mien. Je partis donc pour prendre des images tirées d’Internet, en rapport avec ce que la conférencière expliquait et ce que nous avons écrit. Je finirai quand même par prendre certaines captures d’écran de ses diaporamas, car je ne parvenais pas à retrouver de meilleures illustrations pour les exemples que nous avions repris dans notre compte-rendu écrit.
6 — Le côté “Responsive”
Maintenant était venue l’heure de produire une version tablette, une version desktop ainsi qu’une version desktop HD pour le site de l’analyse. Je voulais, dès le départ, refabrique entièrement mes rapports hiérarchiques : toujours en partant d’un rapport musical, je décidai d’en choisir un plus petit, ce qui me permettrait d’afficher tant soit peu de texte en plus, mais ça me permettrai également d’avoir une plus grande flexibilité et beaucoup plus de choix de tailles disponibles. J’optai donc pour le “Minor Second”, ce qui correspond au plus petit rapport hiérarchique disponible, mais également le plus versatile.
Pour la version desktop, j’opterai pour une troisième variante de rapport hiérarchique, mais cette fois-ci un peu plus grande que la version mobile : la différence entre un écran de tablette et un moniteur d’ordinateur étant considérablement plus importante que la différence entre une tablette et un téléphone, je considèrais là qu’il s’agirait d’un choix arbitraire mais qui, in fine, me permettrai de couvrir beaucoup plus d’écrans d’ordinateurs tout en choisissant un dernier rapport hiérarchique.
Il ne restait donc qu’une seule et unique chose à faire : les grilles. Au départ, j’étais un peu confus quant à la manière d’agencer mon texte pour les plus grands écrans. Je considérais qu’avoir un texte centré et un très grand scroll serait l’option la plus résiliente et la plus minimaliste, et donc la plus intéressante pour découvrir ce que les langages de programmations me cachaient encore. Ainsi donc je me lance dans mon design de grilles, de manière assez maladroite. Cette maladresse s’estompera au fur et à mesure que je progresse.
7 — Tout est bien qui finit bien.
Après plusieurs jours de travail sur l’intégration de notre analyse, plusieurs dizaines de commentaires venant de mes professeurs et de mes amis, je parvins à réaliser un site qui me plaît énormément, et je suis assez fier d’avoir appris autant de choses en si peu de temps.
En conclusion, l’atelier IOLCE me fit découvrir énormément de choses, notamment au niveau de l’UX, comment l’agencer pour convenir à un maximum de personnes et comment prendre en compte l’automatisation de la société. J’approfondis également ma connaissance en typographie et en langages de programmation. Tout cela, in fine, me permettra de réaliser des sites plus résilients et accessibles par un plus grand nombre de personnes.