Case-study
IOLCE
Après un premier atelier « Hello Wold » – qui nous a permit d’appliquer les bases du “Web design” – un second est lancé ; nom de code : IOLCE.
Dans un premier temps, ce nom me séduit par sa sonorité à la fois douce et “Rock”, je suis encore à milles lieues de « la valse à milles temps » . Malgré la fatigue mentale et physique qu’a engendré le premier atelier, cette annonce éveille en moi curiosité et enthousiasme. Je suis également ravi de pouvoir partager du temps avec mes collègues de classe, que je connais très peu.
Input Output Lire et Communiquer sur Ecran.
A la première lecture du briefing, tout me semble clair. Il s’agit d’ un travail de groupe nous permettant de nourrir nos connaissances du web par le biais d’une ou plusieurs conférences, pour ensuite – au travers d’un site web – partager cette expérience aux autres. Cette méthode nous permet de développer notre esprit de synthèse, nos compétences à concevoir une architecture web, ainsi que nos capacités de communication au sens large.
Input Output Communiquer et Apprendre à Distance.
Un contexte problématique.
L’absence criante de cours de web lors de la première année, se paie très cher au niveau du rythme d’apprentissage imposé en deuxième. De plus, un enseignement à distance est un véritable problème. Malgré le soutien – dans la mesure du possible – proposé par certains les professeurs, on se sent très seul face à des bugs, de nouvelles notions techniques, ou simplement face à l’apprentissage d’une méthode de travail. Nous avons également été privés d’une présentation de projet qui, dans mon cas, a considérablement impacté le bon déroulement des opérations.
Ne négligeons surtout pas le moral, travailler seul, toujours dans la même pièce et éviter de partager notre stress aux autres est très lourd à vivre. Le chemin de l’école nous fait prendre l’air, sentir des odeurs, entendre des sons et des voix qu’on ne connait pas. Des choses aussi banales que marcher dans la rue, échanger quelques mots, prendre un café en partageant une ou deux plaisanteries tout à fait médiocres, rendent la vie beaucoup plus douce.
Peu de solutions concrètes
Comment s’en sortir ? Malheureusement, c’est une question à laquelle je ne trouve pas de réponse concrète. La plupart des points abordés ci-dessus, sont des problèmes auxquels il n’y a pas de solutions.
En ce qui concerne ma compréhension du briefing, je pense qu’il n’y a, tout simplement, aucune solution.
Pour tenter d’atteindre le niveau technique nécessaire, il y a trois solutions qui me viennent à l’ esprit : travailler, travailler et travailler ! En ce qui concerne les problèmes de suivis liés aux cours à distance, il y a une répétition d’un système binaire à mettre en place: râler et puis travailler ; râler encore et ensuite travailler et pour finir râler et travailler !
En ce qui concerne le moral et les rapports aux autres, notre première interpretation du briefing nous a permis de travailler ensemble pendant de longues heures. Ceci nous a également permis de parler à d’autres personnes, de rire et d’échanger nos points de vues quotidiennement. Il a fallu également que je prenne des distances par rapport aux objectifs et à ma présence aux cours pour mener à bien ce projet.
Input – une première conférence
Parmi tous les sujets proposés, l’un d’entre-eux à tout de suite attiré mon attention : “Slow Design For an Anxious World” de Jeffrey Zeldman. Etant quelqu’un de « lent » , qui ne correspond pas aux standards de rapidités imposées par notre société ; j’ ai tout de suite été séduit par le propos. De plus, le sujet traite clairement les raisons de ma lenteur : je vis mal l’apprentissage rapide et superficiel. Pour apprendre, il me faut une connaissance relativement complète du sujet et pour cela il faut que les choses ralentissent.
Pour préparer au mieux le contenu nécessaire au projet, mon anglais naissant et moi avons décortiqué cette conférence. Nous avons, en effet, extrait une structure, sous forme de table des matières, des notes manuscrites et des schemas. Cette étape a pris plusieurs jours, car je n’avais jamais eu de cours d’anglais avant l’année passée. Pour m’aider à améliorer mes compétences linguistiques, j’ai décidé de prendre des notes en anglais. Traduire certains points en français m’a permis de comprendre toute la richesse de cette langue.
Output – un travail de groupe
Après ce travail de compréhension technique et linguistique, voici venue l’heure de s’inscrire dans un groupe. A ma grande surprise, il n’y a que deux groupes pour le sujet que j’ai choisi et ils sont complets. Pas de dérogations possibles, c’est cinq maximum par groupes et il ne me reste plus qu’une option : choisir un groupe qui veut bien d’un vieux trentenaire esseulé. Je connait bien Jean, et il m’a soutenu pour que je puisse intégrer leur groupe. Ils ont – lui, Florian et Bastien – été très sympas de m’accueillir très rapidement et dans d’excellentes conditions. Je tiens d’ailleurs tout particulièrement à saluer leur sympathie.
Cela signifie également que je vais devoir recommencer tout mon travail depuis le début avec une autre conférence. Cette fois, la sonorité agréable du nom de cet atelier vire brusquement à des acouphènes qui me collent aux oreilles plusieurs jours ! Je ramasse par terre tous les petits morceaux de motivation qu’il me reste et c’est reparti. Je me concentre sur le fait que j’ apprends l’anglais, la résilience et le contenu d’une autre conférence – qui aborde mon futur métier.
Input – une première conférence.
La seconde conférence n’est pas un sujet que j’ai choisi et le titre ne m’évoque encore rien de particulier. Pourtant, au fil des heures, je commence à en comprendre le sens et il me fascine. J’ai toujours eu un rapport particulier au temps et Jeremy Keith m’en apprend autant sur le web, l’histoire, le monde que sur moi même. Je dois dire que ce fut le début d’ un voyage que je ne suis pas prêt de terminer, une expérience très enrichissante.
Output – communiquer sur écrans.
Un travail de groupe ?
Pour bien avancer dans ce projet, nous avions mis en place un agenda, une grille de tâches afin de pouvoir travailler en équipe. L’utilisation des outils de Google sont d’ailleurs très intéressants pour faire ce genre de travail d’équipe. Invision studio restait un problème pour interagir ensemble sur un même document, nous nous sommes alors interrogés sur l’utilisation d’un autre programme. Figma nous paraissait le plus intéressant et disponible en license étudiant.
Nous voilà bien lancés : des outils appropriés, chacun sa tâche et un planning pour avancer sereinement. Nous faisons un moodboard, des recherches typographiques, un grand nombre de propositions d’icônes, de menus, d’illustrations et de grilles. Une mise en commun quotidienne nous permet de sélectionner les idées qui fonctionent et d’avancer. Une structure de site et son contenu sont également élaborés excepté la partie personnelle.
Un travail individuel de groupe.
Lors d’un cours de design grilles, l’information tombe ! Nous nous sommes complètement plantés ! Malgré un bon nombre de lectures en commun lors de nos différentes réunions, nous n’ avions pas compris la nature individuelle de ce travail de groupe. J’ai beau relire le contenu du briefing, je ne comprends toujours pas ses subtilités. Ce deuxième coup de poing me fait tomber au sol, j’entends vaguement l’arbitre compter. C’est un K.O. !
On re recommence !
Cette fois, c’est sur ! Cet atelier ne veut pas de moi. Heureusement, mon plus vilain défaut est de ne pas arriver à me résoudre. Il y a tout de même deux éléments que je peux garder : la rédaction de la partie individuelle et celle de la partie collective. Même si l’échec est plus que probable, il faut que j’ai les compétences pour le deuxième quadrimestre. Finalement, se tromper c’est apprendre et apprendre est l’unique raison de ma présence. N’est-ce pas une excellente occasion pour apprendre la résilience ?
Recherches graphiques
Choix des Polices de caractère.
A mes yeux, le choix d’une police change fondamentalement l’approche du lecteur. Dès lors, il me paraissait important de faire un travail de recherche graphique à ce sujet. Pour le corps de texte, je souhaitais opter pour une police à contraste faible et « hauteur d’oeil » ;élevée. L’idée de contraste faible me permet de faire un petit rappel aux polices servant pour le code mais aussi de pouvoir profiter des espaces blancs nécessaires à la compréhension. Ce dernier point était abordé dans la première conférence que j’ai visionné lors de cet atelier.
L’utilisation d’une « hauteur d’oeil » ou « hauteur d’x » élevée renforce également la compréhension en facilitant la lecture. En ce qui concerne les titres, j’ai choisi une police “monospace” pour marquer le lien avec l’image du code source. Cependant, mon choix s’est porté sur une police assez arrondie pour donner un côté familier et chaleureux – à l’image de Beyond tellerrand. Le critère d’association des deux police est le contraste.
Une multitude de déclinaisons de tailles et d’interlignages m’a permis de sélectionner une couleur de paragraphe intéressante. Les propositions de couleurs de paragraphe ont été faites sur différents périphériques afin de mesurer leur impact en fonction de l’espace d’écran disponible. Un rapport proportionnel assez faible pour le rythme vertical m’a permis de garder une bonne amplitude pour les différents périphériques et ainsi garder une harmonie entre eux.
Étude et mise en place de grilles
J’ai choisi d’utiliser le même ratio de proportions que mon rythme vertical pour l’appliquer à la valeur d’interlignage afin de définir mes grilles. Pour le “body”, ce ratio est appliqué de gauche à droite et de droite à gauche pour le “header” et “footer”. Les lignes et les marges sont également basées sur mes interlignages. Une fois de plus, je pense que l’utilisation de proportions apporte une certaine harmonie entre les éléments. Ceci n’est pas forcément perceptible et c’est le but recherché. A l’inverse des choix peu harmonieux se remarquent tout de suite.
Etude des couleurs
Pour les couleurs, j’ai choisi d’utiliser le noir et le blanc comme couleurs principales. Ce choix s’est fait dans une idée de simplicité ainsi que pour reprendre les couleurs utilisées pour les premières pages web. Cela relève la dimension historique et intemporelle de cette conférence. La couleur secondaire est le bleu, plus particulièrement celui utilisé dans les “slides” de la conférence. Cette couleur me rappelle aussi les fonds d’écran d’anciens ordinateurs. Ensuite, une couleur dorée me permet d’attirer l’attention sur certains points précis du site. Cette couleur est extraite de la séquence d’introduction de la conférence. Je voulais utiliser une couleur peu agressive pour ne pas trop perturber la lecture du contenu.
Maquettes
Après avoir choisi les différentes approches graphiques, j’ai alors pu faire un Ui-kit. A partir de cela, j’ai imaginé comment assembler ces différents éléments sur une page. Après avoir fait plusieurs propositions, j’en ai choisi une et je l’ai appliquée à trois de mes pages pour faire un prototype à présenter.
Intégration du projet
L’intégration est la partie la plus cartésienne du projet. Il faut être précis, appliquer un bon nombre de règles et ne rien laisser passer. La contrainte principale était l’utilisation de grilles CSS, qui est une toute nouvelle approche. Il a donc fallu expérimenter, se tromper, essayer, pour imaginer des règles tenant dans une seule page CSS et applicable à toutes les pages HTML. N’ayant pas choisi une mise en page simple, cette intégration fut une véritable source de tourments et de doutes. Il fallait également que j’aborde certains apprentissages de manière très pro-active étant donné la situation.
IOLCE – un projet compliqué !
Ce projet est très enrichissant. Il a fait évoluer mes compétences et surtout mes capacités de résilience. Les sujets traités étaient intéressants et m’ont permis d’élargir un peu plus ma vision du web. Nous avons également acquis des compétences pour partager des idées et des informations au travers de mots et d’images.
Malheureusement, toutes les conditions propices à un échec se sont présentées à moi : les cours à distance, le manque de place disponible dans les groupes, la mauvaise compréhension du briefing et surtout la baisse du moral. A défaut de réussir cet atelier, j’ai pu expérimenter et apprendre de nouvelles techniques.
Une chose est sur, pour le prochain projet, mes questions ne seront pas orientée vers ce que je n’ ai pas compris; mais bien sur ce que je pense avoir compris.