Case study

Atelier Iolce

Iolce (Input Output Lire et Communiquer sur Écran) est un atelier organisé par l’option Design Web & Mobile de la Haute École Albert Jacquard. C’est notre deuxième atelier de l’année. Le but de celui-ci est de regarder puis de retranscrire par écrit une conférence portant sur des sujets liés au web.

Visionnage des conférences.

La première chose qu’il nous a été demandé de faire est de choisir parmis une dizaine de conférences, celle sur laquelle nous allions travailler. Une fois notre conférence choisie, nous devions bien évidemment la regarder et prendre un maximum de note sur celle-ci. La finalité de cet exercice était une présentation orale de notre conférence aux professeurs et aux autres membres de la classe.

Visionnage de la conférence
Visionnage de Take back your web

La présentation orale.

Le temps de la présentation orale était arrivé. Nous nous sommes tous réunis dans une classe et chaque élève, muni de son powerpoint, à présenter la conférence qu’il avait regardé. Une fois toutes les présentations terminées, nous avons dû faire des groupes de 4 élèves en fonction de la conférence que l’on avait le plus appréciée. Ce groupe allait nous servir pour le reste de l'atelier.

Image présentation devant la classe
Présentation orale devant la classe

La rédaction du contenu.

Une fois en groupe, il nous à été demandé de rédiger un résumé de la conférence choisie. L’écriture du résumé devait se faire en groupe et devait contenir un maximum de 500 caractères. Celui-ci devait donc être clair et concis. Une fois le résumé collectif terminé, vient le temps de l’écriture d’un texte sur la conférence, mais cette fois-ci de manière individuelle. Nous devions résumer en plus moins 2000 caractères, ce que la conférence nous avait appris.

Rédaction du contenu
Rédaction du contenu

Le visuelle.

Il était enfin temps de se concentrer sur le site web de l’atelier et plus particulièrement sur la partie visuelle de celui-ci. Un moodboard à été réalisé, ainsi qu’un logo. Celui-ci devait comporter 2-3 formes géométriques simples et traduire graphiquement le contenu de la conférence. J’ai également réalisé une maquette de mon site internet.

Création du design
Création du design

Le code.

Il était maintenant temps de donner vie à ce site internet en utilisant les technologies web tels que l’HTML, le CSS et Javascript pour le créer. Nous avions des consignes spécifiques pour la création du site, tels que l'utilisation des grilles CSS, la création d’un mode sombre et la création d’un burger menu sur mobile.

Code
Code Html/Css/Javascript

Retours et corrections.

Le moment était venu d’avoir des retours concernant l’avancement du projet. J’ai dû modifier plusieurs éléments. Le logo ne représentait pas assez l’esprit de la conférence, l'agencement du contenu sur la page d’accueil n’était pas bon, le niveau hiérarchique du contenu était à revoir, Nouvelle icone du darkmode.

Retours et corrections

J’ai beaucoup apprécié cet atelier, j’ai beaucoup appris, découvert de nouvelles choses et augmenté mes compétences.