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:

  • -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.

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.

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.

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.

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é.