Iolce 2018 — Case Study — Thibaut Vermeulen

Iolce

Iolce est un atelier destiné aux élevés de Dwm de l’HEAJ qui a pour objectif de permettre de concevoir une méthode de travail centré sur le contenu. Sur base d’une conférence nous devons:

• -collectivement, visionner, comprendre, retranscrire et réinterpréter la conférence web;
• -indviduellement, prendre en charge la réalisation de la page de la conférence ainsi que la rédaction d’un case study.

Collectivement

Après avoir fait les groupes et fait connaissance avec de nouveaux collègues, nous avons chacun de notre coté visionner une première fois la conférence “How to build an atomic bomb ?” de Mike Monteiro. Nous avons commencer individuellement en prenant des notes, en faisant des recherches,… de manière à bien comprendre la conférence.

Mise en commun

Ensuite vient la mise en commun des notes sur un google doc.

Après le visionnage et la compréhension, vient la réinterprétation, c’est à dire retranscrire en français en résumant tout en restant le plus complet possible.

Pour cela nous avons diviser le travail en 4 de manière à travailler plus rapidement et plus efficacement. Et pour être encore plus organiser, nous avons créer un tableau sur Trello.

Une fois que chacun eu fini ça partie, nous avons relu tout le texte afin que chacun puisse critiquer/corriger les erreurs des autres. Il est important lors d’un travail comme celui-ci de rester à l’écoute des remarques et de les prendre en considération.

Nous avons donc montrer notre texte à un professeur, qui a par la suite fait quelque remarque supplémentaire.

Abstract

Après la rédaction et la correction du texte, nous avons également rédiger un abstract, un cour résumé qui sert de mise en bouche pour le lecteur.

Une fois le texte finalisé, nous pouvions commencer la partie individuel du travail.

Individuellement

La partie individuelle consiste à mettre en page le texte et de le coder pour qu’il puisse apparaître sur un site web. La difficulté supplémentaire étant qu’il fallait une page mobile first, c’est à dire designer pour le mobile.

Fonts

La première étape: la macro-typographie. C’est à dire la recherche d’une ou plusieurs fonts, tester et choisir différente taille de police, différentes graisse,… afin d’avoir une couleur de paragraphe adapté au texte.

Pour cela, il y a plusieurs étapes :

D’abord vient la couleur de paragraphes, pour cela j’ai tester différentes taille de police, longueur de ligne et hauteur de ligne jusqu’à trouver la plus lisible et la mieux adapter au textes.

Ensuite le choix des 2 polices (une pour le texte et une pour les titres), pour cela j’ai utiliser google font et j’ai comparer plusieurs police entre elle en faisant attention à la hauteur du X, la largeur du M ainsi que l’épaisseur du trait. J’ai donc finalement choisi la Rubik pour le texte et la Lato pour les titres.

Univers graphique

Sur mobile, la plus part du temps le texte n’a qu’un seul colonne ce qui facilite la chose, mais ce qui est plus compliquer, c’est de donner du rythme pour ne pas avoir juste un long texte sur une page blanche. Pour cela il faut donc des couleur pour le fond et pour le texte. j’ai personnellement préférer garder quelque chose de sobre avec du simple blanc et noir, mais j’ai décider de jouer sur l’opacité des images en background pour ne pas avoir des fond unis.

Une fois les couleurs et les images trouver, la tache est simple: alterner entre les couleurs de fond et insérer des images de temps à autre pour marquer un changement de section ou simplement pour appuyer les propos du texte.

Menu

L’une des contraintes était la création d’un menu burger. Pour ce menu j’ai garder une recette simple mais efficace : un fond blanc avec une certaine opacité et les liens centré au milieu de la page. Le tout agrémenter d’une petite animation pour dynamiser le menu.

Code

Ayant déjà un peu d’expérience dans le web je n’ais pas eu beaucoup de mal à rédiger le code, si ce n’est que je devais me remémorer toutes les balises de l’html et les petits tricks du css.

Images

Le site étant designer pour mobile, cela veut également dire que les images doivent être adapter au différents écran notamment les écran retina. Pour cela rien de plus simple, j’ai exporter les images depuis Photoshop dans les formats souhaiter et je les ai ensuite compresser pour qu’elle soit plus rapide à charger.

Première remise

La version mobile étant finie, nous nous sommes réuni entre tout les groupes et les profs pour une séance de feedback. Nous en avons également profiter pour voir les travaux des autres groupes et se renseigner sur leur méthodes de travail, les problèmes qu’ils ont pues rencontré,…

Le desktop

Après avoir suivie les conseils et remarque des profs, j’ai pue commencé la version desktop. Pour cela j’ai d’abord imaginer le design sur Photoshop en suivant le design du mobile pour rester cohérent. Sans oublier de montrer l’avancement aux professeurs pour avoir un maximum de feedback.

En conclusion

Iolce est un très bonne atelier pour apprendre les rudiments du web design. C’est un exercice simple, qui demande tout même du travail et de la recherche mais sans trop pousser trop loin. Ce n’est que la mise en page d’un texte, les interactions avec l’utilisateur sont donc relativement limité.

Grace à cette atelier, on apprend le travail de groupe, à rédiger et structurer un texte pour le web, la macro et micro typographie ainsi que le code en html, css et la base du javascript.