Rux

Jour 01

Début du projet

Et quel début ! En effet, cette année, le but du projet est de redesigner en groupe une partie de la cour de l’HEAJ, de concevoir et de repenser son usage en proposant des aménagements. Tout ce que nous proposerons sera réellement prit en compte par le groupe de direction pour réaménager cette dernière et permettra de développer le projet pour revoir l’utilisation de cet espace.

Tout cela m’a énormément surpris, car je suis en web, pas ingénierie civil ou menuiserie; mais suite à quelques explications de la part d’un de mes professeurs, je comprends un peu mieux pourquoi cela à quand même un sens, bien que je reste dubitatif jusqu’au bout. Pour la faire court, le design, c’est inventer, faciliter ou améliorer une interface qui répond à un besoin. La notion d’UX veut que l’on conçoive cette interface selon l’expérience de son utilisateur (accessibilité, ergonomie, perception…). Dans le contexte du projet, nous devons repenser l’usage de la cour pour les étudiants. L'UX est donc l’expérience que les étudiants auront en utilisant les infrastructures que nous imaginons, et une chose qui tombe bien, c’est que nous sommes nous même étudiants, nos avis et idées peuvent donc être pris en compte.

Pour bien commencer tout ça, nous avons noté une liste de questions que nous pouvions nous poser sur le projet et sa réalisation, afin de pouvoir poser celles-ci au directeur de l’HEAJ que nous devions avoir au cours cette après-midi là. Ses retours furent très complets et m’ont semblé bien répondre à nos interrogations, et même au-delà. La vision du projet est ainsi d’exploiter un maximum l’énorme vide que crée la cour au milieu de l’école pour développer un endroit où les gens pourraient se rencontrer, partager et s’amuser.

Il ne nous a pas donné de limite de budget, nous disant d’imaginer comme l’on voulait (sans exagération non plus, on ne part pas sur un parc d’attraction), et que de ce côté-là, c’est le groupe de direction qui verra quand ils proposeront à la direction de l’infrastructure.

M. le Directeur a également spécifié que le terrain alloué aux infrastructures n’est pas encore exactement défini, l’ancien terrain de basket étant l’espace de base pour le projet, mais celui-ci pourrait s’étendre dépendamment des retours de la direction de l’infrastructure et des autres écoles occupant les bâtiments.

Les aménagements sont également “temporaires”, c’est-à-dire qu’ils doivent être assez facilement montés et démontés (si de nouveaux aménagement de l’espace se présente) mais peuvent tenir sur le long terme, le groupe de direction ne sachant pas quand la décision de les enlever pourrait être prise (dans un an comme dans 10).

Ceux-ci ne doivent pas non plus obstruer le passage d'éventuels camions de pompier ou ambulances mais également prévoir le passage d’autres véhicules, comme des food trucks par exemple.

Il a aussi parlé du fait d’utiliser des aménagements pour présenter et mettre en valeur les productions des étudiants, montrer à l’extérieur ce qu’on fait à l’intérieur. J’aime assez bien cette idée, pas que ce soit utilisé tout le temps à cet escient non plus, mais qu’on puisse le faire de temps en temps.

Enfin, la question finale à tout cela et le propos principal de la direction est : qu’est-ce que nous, nous voudrions ? L’objectif principal de ce projet étant d’essayer de créer un endroit où l’on pourra se sentir bien.

Jour 03

De petites étincelles

Pour “optimiser” le peu de temps que nous avons (1 mois pour élaborer le concept et réaliser ce site), j’ai décidé sous conseil de mon prof de débuter quelques petites recherches graphiques. Tout ce dont je vais parler ce jour est bien évidemment susceptible de changer. Ici le principal est d’essayer, d’avoir des idées et d’être ouvert pour démarrer le mieux possible.

J’ai ainsi regardé les choix de police que je voulais pour mon site. Je suis parti sur deux fonts serifs pour accentuer le côté journal-tapé à la machine du site, bien que je ne sois pas fan de serif. La première, Turnip, pour les titres et la seconde, Karmina, pour le reste. J’ai essayé que ma font principale ne soit pas trop stylisée et reste la plus agréable possible à lire en bloc de texte. À cet effet, j’ai également commencé à regarder pour mon rythme vertical et les rapports de textes.

Les prémices d’un moodboard ont également vu le jour, étant jusqu’ici seulement alimenter de quelques captures d'écran de sites de journaux, pour l’idée de mise en page mais qui manque cruellement de vie; et une capture du site de Splatoon 3, pour le côté coloré et énergique mais bien trop chaotique pour un projet comme celui-ci. Il faudra que je fasse plus de recherches pour arriver à ce que je voudrais, quelques choses de sobre mais assez attrayant à lire, pour ne pas démotiver le visiteur non plus.

Jour 06

Interview micro-couloir

Ce jour a été consacré à en apprendre plus sur les étudiants, leur ressenti et leur besoin pour le projet. Pour se faire, nous avons d’abord réalisé un guide d’entretien que nous avons soumis aux autres groupes de la classe. Grâce à leur retour, nous l’avons légèrement modifié pour être mieux adapté et plus compréhensible. Il était donc temps de partir à la rencontre de nos (éventuels) futurs utilisateurs: les étudiants de l’infrastructure.

Nous avons commencé par la cour, un début signé par une période de vache maigre, ne trouvant qu’une personne ayant accepté d’être interviewée. Nous avons donc investi le bâtiment A, où plusieurs groupes se trouvaient déjà, avant de nous rabattre sur les caves du bâtiment C. L’Eldorado fut alors devant nous: un couloir rempli d'étudiants, nombreux (ou ce qui nous à paru nombreux en tout cas) ayant accepté de répondre à nos questions. C’est avec une certaine satisfaction que nous sommes retournés en classe afin d’analyser et partager leurs retours avec les autres groupes.

Il est ressorti des interviews des différents groupes une liste de top tasks assez importante. L'ensemble de la classe a alors voté pour les plus intéressantes selon nous. Notre groupe a choisi de se focaliser sur les espaces verts et de détente, les points les plus votés et qui nous semblait bien à développer.

Jour 10

Projet bateau

Avant de faire quelque chose de beau pour la cour, nous devons penser à faire quelque chose de fonctionnel. En effet, des études ont montré qu’une bonne utilisabilité améliore la perception esthétique, tandis qu’une mauvaise utilisabilité ternit l’esthétique perçue.

Dans ce sens, nous avons fait individuellement un audit pour voir ce qu’avait pu faire d’autres personnes pour des projets similaires ou ce qui pourrait nous être utile. Nous cherchions donc des solutions concrètes, le but de tout ça étant bien sûr d’avoir une idée de comment répondre aux besoins des étudiants, en suivant donc les tops tasks répertoriés.

C’est suite à ces recherches que je suis tombé sur un article de l’Echo parlant d’un architecte paysagiste, Steven Delva. Dans cet article se trouvait une image qui m’a tout de suite beaucoup amusé et inspiré: celle d’une épave de bateau que Delva avait retapé pour en faire un parc auto-dépolluant.

Je n’ai même pas lu l’article mais cette image seule était incroyable. De là m’est venue l’idée de faire la même chose pour l’école. Récupérer un vieux bateau, dans le style d’une péniche, qui ne serait plus fonctionnel pour en faire une terrasse en extérieur sur le pont et une sorte de cafétéria / salle d’étude dans la cabine. L’idée était saugrenue mais c’est ce qui me ravissait au plus au point. De plus, lorsque j'ai expliqué le principe à l’un de nos professeurs, il sourit un peu et dit que cela pouvait être intéressant grâce à son originalité.

Le bateau en tête, j’ai commencé à faire quelques croquis pour la cour. J’ai ainsi positionné le bateau en diagonale prenant une bonne partie de l’ancien terrain de basket. Celui-ci serait accessible d’un côté par une rampe, pour les personnes à mobilité réduite, et de l’autre par des escaliers. Le pont serait aménagé avec des tables de pique-nique et la cabine intérieure serait aménagée de façon similaire, le but étant de pouvoir mettre autant de tables que possible tout en restant agréable. La poupe du bateau et l’espace moteur n’étant pas utilisé, j’ai pensé y placer un pompe d’étang qui déverserait depuis la poupe en chute d’eau vers un petit bassin en bois disposé en dessous. Ceci permettrait de faire un petit point d’eau avec un peu de verdure pour que les étudiants puissent se détendre. En ajoutant autour quelques bancs et une ou deux tables de pique-nique, je trouve que cela pourrait être très sympathique.

En supplément du bateau, j’ai envisagé d’autres infrastructures plus petites, telles qu’un préau avec un toit en verdure dans le creux du bâtiment A, ainsi que des bancs-bac à arbres et un kiosque. Je ne citerais pas spécifiquement tous les petits aménagements ici, un croquis bien fait valant mieux que des mots ici.

Le but principal de ce projet est de mettre à disposition un espace détente et bien-être pour les étudiants, un coin de verdure où ils pourraient se sentir bien, et c’est ce que j’ai essayé avec mes croquis. Bien sûr, il reste quelques détails à peaufiner, mais j’aime vraiment bien le concept que j’ai trouvé avec le bateau. Ces multiples utilités (tables pour se détendre ou se restaurer, le point d’eau, la possibilité d’accrocher les bannières des étudiants le long de la coque et du kiosque ou bien des guirlandes de petites lampes pour un effet féerique …) et le côté extravagant me satisfont beaucoup. A voir désormais ce qu'en diront les ouvriers de l’école et le groupe de direction que nous devons voir les jours prochains.

Jour 12

Croquer la vie

Ayant repensé à mes croquis, j’ai décidé de les retravailler. Bien que je fusse satisfait des précédents, je trouvais par après en les regardant que j’avais principalement mis des bancs un peu partout. Certes, le but est de permettre aux étudiants de se détendre, mais mettre un banc tous les 2 mètres n’est probablement pas la meilleure décision.

J’ai donc regardé ce que je conservais et ce qui pouvait être amélioré. Le bateau, je ne comptais pas y toucher, ce coin avait déjà été bien travaillé et était la partie la plus réfléchie précédemment. De la même façon, je gardais le prolongement du préau et le kiosque, ce dernier pour lequel je comptais bien redesigner l’idée des infrastructures autour. En effet, j’avais juste mis des bancs sans réelle autre intention avant mais après réflexion, je me suis dis qu’on pouvait faire quelque chose de ce point. J’ai ainsi placé deux gradins de chaque côté, permettant aux élèves de s’y asseoir pour discuter mais également d’utiliser le kiosque comme point de “réunion”, de discours ou de présentation.

De plus, je me suis dis que se détendre, ce n’était pas non plus que s’asseoir et discuter avec ses amis. Pour certains, relâcher la pression peut se faire par l’activité et le jeu. C’est cette idée en tête que j’ai délocalisé les transats et ai mis en place un terrain de pétanque (et de quilles finlandaises) et des tables de ping pong. Un babyfoot serait également disponible sous le préau, afin de le protéger de la pluie. Les différents équipements seraient à disposition à l'accueil sur demande. Enfin, tout cela reste à présenter aux ouvriers de l’école et au groupe de direction comme nous sommes censés avoir en cours demain.

Pour rester dans le dessin, j’ai débuté des croquis pour l’interface et l’utilisation de mon site. Les wireframes ainsi fait sont certes simplistes mais regroupent les différentes fonctionnalités que j’aimerais développer. Ils sont bien entendu à améliorer. Toutefois, le départ est prometteur selon moi, car je n’avais aucune idée comment je pourrais représenter ce Case-Study au commencement du projet.

Jour 13

Des bateaux dans les roues

Si la journée de croquis et l’incroyable idée du navire échoué dans la cour m’avaient enjoué les jours précédents, rien que cette matinée suffit à me replonger six pieds sous terre. L’entrevue avec le directeur de l’établissement, le chef des ouvriers, le directeur de la sécurité et une dame dont je n’ai jamais su la fonction, s’est terminée sur quelques points amères me restant au fond de la gorge tout au long de la journée.

Ainsi, le directeur de la sécurité nous a parlé de garder de l’espace pour pouvoir évacuer les bâtiments, ce qui fait tout de même un grand nombre de personnes. Des accès pour les camions de pompiers et les ambulances doivent également être prévus, ce qui parait logique vous me direz et effectivement, sauf qu’apparemment, un camion de pompier à un rayon de braquage de 11 mètres. Je ne vous ferai pas un schéma ici parce que vous pouvez très bien vous rendre compte par vous même que 11 mètres, c’est tout bonnement énorme. Du coup, il faut prévoir cela pour les infrastructures avec comme petit supplément qu’on ne peut pas toucher au terrain de tennis. Cette partie a en effet été confirmée par le directeur, nous ne devons pas toucher au terrain (alors que celui-ci empêche la bonne circulation des camions de pompiers et ambulances mais bon, c’est une autre histoire nous dirons.

Finalement, pour terminer cette visite qui ne sait pas non plus soldé par un total dégoût du projet, nous avons eu confirmation aussi que nos infrastructures pourraient disposer d’un éventuel câblage électrique, et LE plus important: le bateau reste possible. C’est avec beaucoup de fierté dans cette marée d’amertume que je peux déclarer que le projet bateau ne coulera pas et maintiendra le cap de départ. En tout cas, suite à ces retours, j’ai adapté mon croquis pour être plus raisonnable ou plus réalisable, dépendamment de comment vous le voyez.

Une fois cela redessiné et un état amorphe remplaçant l’écœurement, il était temps d’attaquer les Users Journeys. Leur but est d’imaginer les actions et le comportements des utilisateurs pour améliorer nos travaux et, forcément, leur utilisation. J’avoue qu’une certaine fatigue mentale et une léger doute qu’en t’as leur exécution me fait dire que je ne suis pas exactement sûr d’avoir compris comment les faire mais je les ai fait au mieux. Je préfère vous laisser découvrir par vous même si vous voulez plutôt que tout expliquer ce qui prendrait longtemps et ne serait pas spécifiquement très intéressant ni crucial.

Un dernier point que j’ai modifié est l’ajout d’un porte sur le côté arrière gauche de la coque (accessible autant aux personnes à mobilité réduite que non). C’est en effet avec surprise qu’un de mes professeurs m'apprit que certains modèles de bateau possédaient deux étages sous le pont, et bien évidemment, le type de navire que je ciblais en faisait partie. Ce qui est bien, c’est que cela permettra d’avoir encore plus de place à l’intérieur. Ce qui l’est moins, c’est que comme je l’avais prévu au début, il fallait monter sur le bateau pour au final descendre si l’on voulait aller au fond de celui-ci. C’est pourquoi j’ai décidé d’ajouter cette porte, permettant un meilleur accès et un meilleur flux dans les mouvements des utilisateurs. Ca et aussi pour l’évacuation, ça parait plus logique de pouvoir sortir directement des cales dans la cour plutôt que de devoir remonter sur le pont avant de devoir descendre.

Pour terminer cette journée éreintante mentalement et quelque peu triste, je me suis achevé en faisant une version numérique des wireframes auxquels j’avais pensé. Ceux-ci ne sont forcément pas encore parfait, n’ayant pas fait de tests utilisateurs, mais j’aime bien le principe que j’ai pu trouvé. Il va falloir les améliorer, cependant si j’arrive à en faire quelque chose de fonctionnel et esthétique, je crois que ça peut vraiment donner bien.

Jour 14

Question de style

Ce projet aura peut-être raison de moi, nous verrons, mais aujourd’hui, on a mangé du style à la pelle. Au programme, petit montage pour se représenter le bateau, des wireframes et des recherches pour le design du site.

Pour démarrer du coup, j’ai essayé de faire un montage photo pour illustrer le bateau et les différentes infrastructures autour. Je dois admettre que le rendu n’est pas des plus beaux, ni des plus professionnels mais il fonctionne assez bien pour faire comprendre l’idée. Bien sûr, je vous laisserais juger par vous même si la description et les plans que j’ai pu en faire sont correctement retranscrit ici.

Pour ce qui est des wireframes, j’ai toutes les idées pour bien faire fonctionner mon site dans les différentes versions, il faudra maintenant les tester pour voir comment les utilisateurs réagiront et s’ils comprendront tout. De l’autre côté, j’ai regardé un peu plus pour mon moodboard et le design de mon site et j’ai trouvé un concept que j’aime et que j’ai envie d’appliquer.

Je pars ainsi sur le design de vieux livres, avec le tranche comme pseudo bar de navigation et le menu de navigation sous forme de marque-pages. Pour la typo, je vais faire exclusivement sans-serif, à des degrés de stylisation différents (j’ai quand même envie que le texte principal soit bien lisible). Une de mes professeurs m’a également conseillé de jouer avec les codes connus du livre, de pousser cela comme je peux. Par exemple les typos de style roman ou l’utilisation de l'italique, comme vous pouvez le voir sur la couverture de droite ci-dessous.

Sinon, un autre professeur m’a conseillé d’essayer de faire des sortes de lettrine pour certains paragraphes et je dois admettre que ça peut être intéressant. Finalement, j’ai déjà fait pas mal de choix, mais beaucoup reste encore à faire et le développement de tout ça ne fait malheureusement que commencer.

Jour 21

Oh my code

Le design, tout le monde adore ça, non ? non ? J’admets ne pas en être un grand fan, simplement parce que je ne suis pas très bon à cela. C’est pourquoi j’ai préféré gagner du temps en mélangeant les phases de wireframes avancés et de début de design.

Ce n’est pas un chef-d’œuvre mais cela m’a permis de visualiser comment agencer mes éléments et surtout, comment j’allais disposer la grille. Et pas uniquement dans une seule version, mais bien les quatres versions différentes pour que le site soit le plus responsive, le plus adapté possible.

Maintenant, c’est la dernière ligne droite: coder le site. Là vous vous direz sûrement “d’accord mais le design avancé ?”, et je vous répondrais cher lecteur que j’ai celui-ci en tête et que la plupart des éléments qui aurait pu me déranger, je les ai abordé dans ce que vous venez de voir. Tout n’est qu’une question de comment je fais mon code et les éléments qui iront sur mon site. J’ai peu de temps pour terminer et je préfère essayer de l’optimiser au mieux. Cela devrait bien se passer. Si pas, ce sera ma faute et à moi seul.

Jour 23

Souquez les artimuses

Je n’ai peut-être pas le vent dans les voiles mais j’ai quand bien avancé sur mon site je trouve. La version mobile est codée et je viens de finir la version tablette au moment où j’écris ces lignes. Bien que la motivation vienne à manquer, d’où le vent n’étant pas de mon côté, je tiens le cap et essaie d’arriver à bon port. Je ne sais pas dans quel état je serais à la fin mais je suis au moins un peu content de ce que j’ai pu faire pour le design jusqu’ici.

Je suis par exemple très fier du menu téléphone que j’ai pu faire, même si cela n’a rien d’incroyable. La petite animation me satisfait un peu à chaque fois que je la vois. Difficile de vous expliquer pourquoi mais je vous en propose quand même quelques images.

En fait, vous pouvez découvrir la plupart de ce que je vais vous montrer ici directement sur le site normalement. Et un bonne exemple de cela, c’est la division en colonne pour pouvoir faire ceci:

C’est extrêmement frustrant. J’avais d’abord essayé de réaliser ça avec des flexbox. Certes, ce que j’avais fait fonctionnait un minimum, mais cela équivaut sûrement à réparer une fuite avec du scotch: ça fonctionne mais est-ce la meilleure solution ?

Donc j’ai essayé d’autres choses et j’en suis arrivé à réussir à faire cela sans problème avec les grid-rows. Pour cela, je donne un grid-row-start à l’image avec un span égal au nombre de lignes de texte à ses côtés et quand l’image dépasse la taille des textes, j’augmente son span de un pour créer un nouvelle row permettant à l’image de grandir sans influencer l’espace des textes. Franchement, j’ai bien appris sur les CSS grid avec ce travail je trouve. Il faut avoir la façon de pensée pour les utiliser mais les grilles aident beaucoup au final.

Quant au design, j’ai bien avancé et je trouve avoir bien retranscrit le principe de livre jusqu’ici. Le seul bémol est que je n’ai pas trouvé comment reproduire la texture de la couverture et des pages. Une image bitmap n’aurait pas bien fonctionné selon moi en responsive et je ne vois aucunement comment faire en vectoriel. J’ai ainsi essayé de gérer le mieux possible avec ce que j’avais et cela donne cet aspect de livre tout droit sorti d’un jeu. C’est un peu trop lisse mais chaque élément a l’air correct visuellement et je trouve que l’on reconnait tout de même bien le style vieux roman.

Pour terminer, je suis en train de coder la version desktop et devrait incessamment sous peu pouvoir clôturer ce projet. J’aurais sûrement encore des problèmes et je trouverais probablement encore des solutions mais je préfère arrêter ce Case-Study ici. En effet, tout ce que je vais pouvoir écrire de plus (et la plupart de ce que j’ai pu écrire ce jour), vous pourrez le constater par vous même directement car si vous lisez ces mots, vous consultez et donc voyez ce que j’ai créé. Vous n’aurez du coup pas toutes mes éventuelles rages à venir sur un bout de code, mais franchement, cela n’apporterait rien de plus à ce journal.

Les avancés que j’aurais fait, vous pourrez les voir de vous même. Les problèmes que j’ai pu laisser également. De même pour ce que j’ai fini en ayant le sourire. Il n’y a plus grand chose à écrire et, si je ne me répétais pas déjà avant, je ne ferais que me répéter ici. Sûr ces derniers mots, je vous remercie d’avoir lu ce modeste écrit et j’espère que ce projet ainsi que ma narration des plus simplistes vous auront plu.