IOLCE

Case-study IOLCE

Intro

Iolce (ou Input Output Lire et Communiquer Sur Écran) est un projet de la section web de la Haute École Albert Jacquard. Ce projet consiste à regarder une conférence parlant de web dans une liste donnée et en faire un court résumé collectif ainsi qu’un texte relatant ce qu’on a appris. Je suis Florent Chaltin, étudiant en deuxième année de web et voici le case-study de mon projet Iolce.

L'annonce

C’était un début assez étrange. Le briefing est tombé un jour et puis c’était parti. Je n’avais pas spécialement de question mais les autres membres de la classe s’en posaient et me faisaient m’en poser également. J’aurai aimé une espèce de réunion avec tous les profs et étudiants où ils nous présentent le briefing et l’expliquent mais au lieu de ça on a dû prendre des infos au compte-gouttes. Bref on va dire que ça fait partie du jeu.

Annonce du projets Iolce

Le groupe

Le début du projet consistait, après avoir regardé chacun une conférence, d’en faire un résumé. Et c’était pas évident car nous devions résumer 40 minutes en ayant pour contrainte de ne pas dépasser 500 caractères. On a donc écrit un résumé sans trop se soucier de la longueur dans un premier temps pour ensuite essayer de trouver des synonymes, des tournures de phrases, et autres astuces pour raccourcir le résumé.

Image montrant le travail de groupe

Le solo

Le design

Après avoir rédigé mon contenu perso relatant ce que j’ai appris de la conférence, contenu réalisé sans trop de soucis à part que j’ai failli dépasser du nombre de caractères max, après ça je me suis attaqué au design. J’ai donc fait mon ui-kit.

Pour l'ui-kit, j’ai rencontré deux problèmes majeurs. Le premier étant les couleurs et l’autre la police (d‘écriture hein…). En fait je voulais fortement m'inspirer du site web de la conférence Shirley Wu vu qu’elle parle de son expérience dans la conférence. J’ai donc repris ses couleurs. Sauf que le contraste n’était pas top. J’ai donc fait plein des tests et utilisé des générateurs de nuancier pour arriver à des couleurs passables en light et dark mode.

Nuancier

Pour la police, j’ai voulu utiliser une police manuscrite pour les titres (presque comme Shirley). Sauf qu’on m’a fait remarquer que ça n’était pas évident de trouver une bonne police manuscrite et que par exemple ici, la majuscule n’était pas attachée au reste du mot. J’ai donc cherché plus en profondeur pour finalement me rendre compte que peu de police le font. J’ai donc décidé de garder celle-ci qui était assez lisible comparée à certaines. De plus quand j’ai montré mon travail pas la suite, on ne m’a plus fait la remarque.

Dancing Script

Ensuite, je me suis penché sur le logo. C'est la première fois que je dois en réaliser un, ce qui me donne pas mal d'appréhension. J’ai donc créé des icônes qui me passaient par la tête au début mais je n'étais pas satisfait. Je me suis ensuite rappelé que mon but était de m’inspirer de Shirley Wu et je suis donc revenu sur sa conférence. Il y a un passage ou elle montre un de ces projets avec des pétales de fleurs qu’elle duplique pour en faire des fleurs justement. Je me suis donc dit pourquoi ne pas suivre son exemple.

Le code

La nouveauté cette fois-ci ce sont les grilles. En soit ça n’est pas bien compliqué. Sauf qu’on doit faire une grille non régulière et on ne l'a jamais mentionné point de vue code. J’ai donc réfléchi et utilisé des pourcentages pour conserver la proportion entre les colonnes pour un site bien responsive. J’ai même dû calculer précisément ces pourcentages pour être sûr que ça fasse 100% et qu’il n’y ai pas de problème.

Grille du site

Ensuite j’avais pensé faire une navigation secondaire pour naviguer dans mon résumé personnel. Sauf que j’ai eu du mal à faire ça en plus de la nav principale donc comme ça n'était pas demandé, je l’ai simplement retirée.

Conclusion

C’était un projet un peu nébuleux. Entre une communication étrange de la part des professeurs ainsi que la nouvelle matière à explorer, je ne pense pas que je n’ai fait que des bons choix. Cela n’est évidemment pas de leur faute compte tenu des circonstances mais cela reste un problème auquel j’ai fais fasse.

Aussi, commencer à coder le site m’a pas mal remotivé et remis dans le bain et m’a rappelé pourquoi j’étais là. J'ai appris de la nouvelle matière interssante qui m'aidera dans le futur. Tout n’est pas parfait mais je ne demande qu'à m'améliorer.