Take Back Your Web

De Tantek Celik
Conférence Beyond Tellerand
2019

#Qu'est ce que IOLCE

Iolce est un workshop que nous avons dû réaliser au cours de l’année 2020–2021 lors de notre cursus scolaire à la haute école Albert Jacquard dans l’option design web et mobile. Celui-ci signifie Input Output Lire et Communiquer sur Écran.

Il s’agit du deuxième atelier de notre année 2020–2021. L’objectif consiste à réinterpréter une conférence et de la partager à travers le web. Le travail se divisait en deux parties, la première partie consistait à réinterpréter la conférence en groupe et rédiger le contenu de notre futur site web. La seconde partie était individuelle et consistait à créer le visuel et le back-end.

Photo d'un mac dans un cadre de travail

#Analyse du contenu de la vidéo, identifiant

Une situation de départ, un contexte, un problème

Des solutions recommandées/des hypothèses

Des actions concrètes menées

Une identification des facteurs qui ont contribué à l’échec ou à la réussite du projet

Photo d'un calendrier de la première semaine

#Première semaine

La première chose à faire était de visualiser une série de 12 conférences et d’en choisir une. Une fois notre conférence choisie, il fallait réaliser une prise de note sur base de celle-ci ayant pour objectif de faire une présentation en 5–10 slides de ce qu’on avait appris.

Résultat de la semaine:

Photo d'un calendrier de la première semaine

#Deuxième semaine

Il était temps de faire la présentation de notre choix. Au vue de la crise sanitaire, les présentations devaient se faire en ligne via Teams mais suite à un problème de temps, elles ont été annulées.

Suite à notre choix de conférence, les professeurs nous ont réparties en groupe selon le choix de notre conférence. Nous avons très vite formé un groupe Messenger afin de communiquer ensemble et de rapidement effectuer la demande de la semaine.

Pour cette deuxième semaine il nous a été demandé de faire un résumé collectif de notre conférence avec comme contrainte d’avoir un maximum de 500 caractères. Ensuite, de façon individuelle cette fois-ci, il fallait faire un résumé de la conférence et ce qu’elle nous avait appris en respectant à nouveaux une tranche de caractères qui était définie entre 2000 et 2500 caractères.

Résultat de la semaine:

Photo d'un calendrier de la première semaine

#Troisième semaine

C’est le moment de réfléchir à la partie visuelle de notre projet. Pour cela, il nous a été demandé de réaliser un Moodboard, un logo comportant 2–3 formes géométriques simples ainsi qu’un Ui-Kit.

Création du logo

J’ai commencé par réfléchir au sens de la conférence et au but de celle-ci. J’ai rapidement compris que l’auteur voulait un retour en arrière avant l’époque des réseaux sociaux. J’ai donc voulu mettre en avant ce retour en arrière en essayant plusieurs variantes.

Création de l’Ui-Kit

Cette étape est importante car c’est celle-ci qui va nous orienter dans le design du projet. Bien que l’auteur voulait un retour en arrière, il voulait que cela se fasse dans le présent et de façon plus moderne. Je suis donc parti sur une police de caractère moderne nommée “Assistant”. Pour son utilisation j’ai respecté les demandes de notre professeur de “design texte”. Pour la couleur j’ai choisi principalement du jaune, c’est une couleur qu’on voit beaucoup en ce moment dans le web moderne et le contraste avec le blanc et le noir est facile.

Création de la structure

Le briefing nous a donné une liste détaillée de ce que l’on devrait retrouver sur chacune de nos pages. Il ne manquait plus qu’à mettre ça en place en utilisant pour la première fois une grille.

Résultat de la semaine:

Photo d'un calendrier de la première semaine

#Quatrième semaine

C’est le moment des premiers retours concernant mon avancement dans le projet avec quelques modifications à prévoir

Logo

Le logo à été choisi, en effet le fonctionnement de celui-ci convient à mon projet.

Ui-Kit

Quelques modifications sont à prévoir.

  1. Ajout d’un niveau intermédiaire entre mes titres secondaires et les paragraphes
  2. L’icone pour mes liens est à changer
  3. Augmenter les marges à l’intérieur de mes boutons
  4. Ajouts de différents pictogramme pour appuyer visuellement le contenu

Structure du projet

  1. Après un feedback avec mon professeur de “design grille” je me suis rendu compte que je n’avais pas une bonne utilisation de la grille. Il m’a aiguillé afin de remédier à ça et cela a facilité le placement de mes différents éléments
  2. Ma structure manquait de rythme, pour cela il m’a été conseillé de mettre certains éléments en avant et de modifier leurs emplacements sur la grille
  3. Certains éléments demandés manquaient, j’ai donc pu remédier à ça en les ajoutant pour ne pas avoir de mauvaise surprise dans la validation des critères
  4. Quelques modifications concernant la micro-typo ont dû être apportées

Résultat de la semaine:

Photo d'un calendrier de la première semaine

#Cinquième semaine

C’est le moment de passer au code. Malgré des difficultés avec le css grid, j’ai finalement réussi à comprendre son principe et à positionner les éléments. La nouveauté de ce projet en plus de l’utilisation des css grid était l’ajout d’un burger menu.

J’ai commencé par l’intégration de mon contenu dans l’html. Une fois que l’intégralité de mon contenu était inscrit dans mon document HTML je n’avais plus qu’à faire le css et le java script. Pour le css, j’ai commencé par définir mes grilles et l’emplacement de mon contenu sur la page. J’ai ensuite pu y ajouter le style de mes éléments que j’avais préparé grâce à l’Ui-Kit. Concernant le java script, ça à été la partie la plus rapide à coder. Mis à part le burger menu qui était nouveau, le dark mode ainsi que la date du copyright étaient de la matière déjà vu au cours pour le précédent atelier.

Une fois le code terminé, il était déjà temps de la remise. J’ai donc rendu mon projet le vendredi 4 décembre 2020 à 16 heures avec une publication sur mon Instagram professionnel.

Résultat de la semaine: