iolce

Case Study

Lancement du projet et formation du groupe

Dès le 1er jour de cours, les professeurs nous parlent de Iolce durant leurs différentes présentations de la rentrée. Après celle-ci, ils nous demandent de former des groupes de 4. Avec mon ami Melih nous nous sommes mis ensemble et avons cherché des personnes cherchant un groupe et nous sommes tombé sur Vincent et Younes. Nous avons de la chance ils sont tous les 2 super sympa et Vincent a déjà beaucoup d’expérience en plus d’être passionné par le code comme moi ! : D

Préparation de l’atelier

Nous avons regardé un peu les différentes conférences afin de choisir celle qui nous intéressait le plus. Finalement, après discussion, j’ai proposé de prendre la conférence de Tristan Harris, car en plus d’avoir un sujet que je trouvais super intéressant et un conférencier qui n’est pas n’importe qui dans le monde du web la conférence était également retranscrite en anglais à l’écrit ce qui est un sacré avantage pour ceux du groupe qui ont un peu plus de mal en anglais. Les autres ont accepté et donc nous avons chacun regardé la conférence de notre côté et avons écrit des notes ou résumés de la conférence afin de préparer la rédaction en commun lors de l’atelier.

Ah oui entre temps Sylvian à rejoint notre groupe étant arrivé un peu plus tard donc n’ayant pas de groupe. Je suis content qu’il ait pu rejoindre notre groupe, car il s’agit d’un élève avec qui j’étais en 5e secondaire et ce mec est super ! C’est chouette d’avoir pu renouer contact avec lui en se retrouvant à nouveau dans la même classe et le même groupe !

L’atelier commence !

Ca y est, on commence l’atelier après plusieurs semaines de cours. Les premières heures ont été un peu compliquées, on se demandait un peu comment s’organiser pour écrire un seul texte à 5 sans se marcher dessus. Ce que nous avons fait alors c’est nous répartir différents morceaux de la conférence et chacun écrit sa partie dans un Google Doc commun. Après cela, nous avons chacun check les parties des autres pour voir s'il manquait des informations essentiels ou s'il y avait des choses à reformuler.

Après le temps de midi lorsque nous sommes revenu nous avons eu un nouvel arrivant dans le groupe ! Florian ! Nous avons été un peu étonnée que le professeur accepte que l’on soit 6, mais bon ça ne nous a pas posé de problème. Il nous a aidé dans la rédaction du texte en vérifiant et reformulant certains passages.

Nous avons consacré les 2 jours d’atelier à la rédaction du résumé de la conférence. Ca n’a pas été super simple, car nous avions tous des façon d’écrire différentes donc compliqué de garder un rythme et un style d’écriture semblable. Heureusement, monsieur Tournay et monsieur Bourgaux nous ont aidé avec leurs conseils qui nous ont été bien utiles !

Visuel du markdwon

L’après-midi de la 2e journée nous avons mis notre texte en format markdown. Vincent a fait le gros du markdown en communiquant avec nous pour avoir un texte bien organisé.

Ensuite?

J’ai fait plusieurs tests pour mes choix typographiques afin de choisir mes polices, ma hiérarchie des tailles de titres et mon rythme vertical.

Dernière étape, enfin pas vraiment

Maintenant, il nous reste à coder le site web, et évidemment, on applique la règle d’or “ Mobile first ” ! Bon, je vous avoue de toute façon on n'a pas trop le choix la première remise pour le travail que l’on doit faire doit être en version mobile. Je n’ai pas énormément de chose à dire sur cette étape j’y ai juste passé une nuit sans trop galérer je m’en sors plutôt bien en code donc ça a été assez vite. Après, j’aimerais ajouter pas mal de chose à mon site, mais je préfère y consacrer quelques jours complets durant les vacances afin de soigner mon design et mon code ! Maintenant il n’y a plus qu’à remettre cette première version et je continuerai quand j’aurai le temps entre les cours et travail donc durant les vacances pour la 2e remise !

Reprenons par le contenu essentiel du site, le texte et donc la typographie!

J’avais déjà fait certains choix typographique comme dit plus haut. Cependant, il ne faut pas négliger la micro-typographie et la macro-typographie !

Pour ma micro-typo, j’ai prêté attention aux espaces insécables (dont les espaces fines), aux caractères spéciaux utilisés comme les tirets et guillemets. Les choix de police, je les avais déjà fait mais j’ai adapté les tailles selon le support. Je n’ai pas de majuscules accentuées donc ça c’était réglé d’avance. Pour les ligatures, j’ai employé une simple propriété css.

Quant à la macro j’ai utilisé des marges multiple du corps du texte avec les unités “em” et “rem” et un interlignage de 140 %.

Des grilles responsive !

Maintenant, il est temps de penser aux autres versions du site ! Car oui la version mobile c’est bien beau, mais il faut également penser aux utilisateurs de tablettes et desktop. Il faut faire attention à plusieurs choses par exemple changer les tailles de police selon le support afin d’avoir une bonne lisibilité pour le lecteur. Il faut également réorganiser le contenu selon l’espace disponible. Là où en version mobile j’ai tout mit en 1 seule colonne, pour les autres versions j’ai réalisé des grilles sur plusieurs colonnes. Ici la principale difficulté était de ne pas se contenter d’une grille classique proposée par le logiciel afin de ne pas avoir un alignement trop régulier. L’intérêt d’avoir une grille irrégulière est de ne pas avoir un site fade où tout est trop organisé. Ce n’était pas simple pour moi car je suis quelqu’un qui justement aime bien quand tout est bien droit et régulier, mais j’ai fait un effort pour ce projet.

Entrain de travailler mes grilles sur InVision

Maintenant on code tout ça !

Il s’agit de l’étape où j’ai eu le plus de mal, avec une simple grille cela aurait été facile mais là respecter les alignements irrégulier, sur inVision c’est facile mais en code c’est beaucoup plus complexe. J’ai dû utiliser des connaissances que l’on n’a pas encore appris en cours pour m’aider ce que j’ai apprécié (j’adore apprendre de nouvelles choses en code) mais ce n’était pas sans peine.Mais maintenant le résultat est fini, il ne me reste plus qu'à finaliser mon case study ! Oh wait, c’est ce que je viens de faire ici ! : D

Moi entrain de coder

Qu’ai-je pensé de cet atelier?

Je dirais que l’atelier a été bien plus compliqué que ce que je pensais à la base. Ma force est clairement le code, c’est dans ça que je me débrouille le mieux cependant c’est aussi ça où j’ai eu le plus de mal. Devoir réorganiser le contenu pour correspondre aux grilles desktop et tablette m’a donné vraiment plus de mal que je ne pensais. Mais comme je l’ai dit précédemment j’ai justement apprécié ça car j’ai pu apprendre de nouvelles choses comme ça.

J’ai bien aimé aussi le début de l’atelier où l’on écrivait le texte en groupe, en plus de pouvoir faire connaissance avec des membres de la classe, j’aime aussi écrire des textes.

Si vous souhaitez voir le résultat cliquez ici → Mon iolce