Il était une fois … IOlce et Claire L. Evans !
IOLCE — Input Output lire et communiquer sur écran
--
Première étape : Explication !
Cet article medium est le case study de IOlce « Input Output, Lire et communiquer sur écran », un workshop de groupe donné dans le cadre de l’option DWM, à la Haute École Albert Jacquard. Vous trouverez dans cet article le déroulement étape par étape de ce travail qui s’étend sur plusieurs semaines.
- L’objectif ? Savoir communiqué le contenu d’une conférence au travers d’un site web.
- Comment ? Grâce à un travail de groupe au niveau du contenu et un travail individuel dans la mise en page.
Notre groupe a reçu comme vidéo : “ What History’s Female Internet Pioneers can Teach us about Tomorrow”, une conférence de Claire L. Evans lors du Beyond Tellerrand 2018 de Düsseldorf.
Le workshop s’est articulé en deux grandes étapes : le travail commun et le travail individuel.
Deuxième étape : Commençons par le commencement !
Tout à commencer le jour de la rentrée scolaire à l’HEAJ. À peine le discours de présentation fini, nous étions obligés de trouver des camarades pour former des groupes de 4. C’est ainsi sans vraiment se connaître que notre groupe s’est formé. Nous avions la possibilité de choisir notre sujet de conférence et nous avons porté nos yeux sur la conférence de Claire L. Evans, une conférence qui parle du rôle des femmes dans l’histoire de l’internet.
Le groupe étant créé et le sujet connu, nous nous sommes mis au travail. Chacun de son côté a regardé la conférence et a pris des notes. Il va de soit qu’un groupe Facebook a été créé afin de pouvoir partager nos opinions et nos découvertes.
Au fil du temps, le premier jour du workshop approchait et nous allions enfin connaître nos réels objectifs !
Troisième étape : Les workshops
Le B99, grand hall froid avec pleins d’étudiants perdus. C’est dans ce local que nous nous sommes retrouvés par groupe a écouté nos premiers objectifs et explications du workshop. Notre première journée devait s’axer selon nos professeurs, autour de la mise en commun de nos idées et d’un premier jet commun.
Dans notre groupe, nous avons choisi de travailler méthodiquement afin d’avancer assez rapidement.
Dans un premier temps, nous avons parler de nos impressions sur le sujet et de nos avis sur la vidéo. Très rapidement nous nous sommes compris, nous étions sur la même longueur d’onde.
La deuxième étape de la journée consistait à trouver une arborescence de notre futur résumé, nous avons décelé une structure qui convenait à tout le monde. Nous voulions finir cet étape avant la pause midi ! Vers 12h00, nous nous sommes mis en route vers notre repas, mais malheureusement suite à panne de courant, nous n’avons pas pu déguster notre pizza.
Après notre pause midi, nous nous sommes remis au travail un peu triste de ne pas avoir pu manger notre Saint-Graal. Après une pause digestion, nous avons attaqué l’écriture des premiers paragraphes. Grâce à un travail d’équipe bien ficelé, nous avons avancé à un rythme soutenu, finissant presque le texte à la fin de la journée.
Cependant il nous était reproché un problème : le style d’écriture. En effet, nous avions un parlé trop scolaire, trop exposé. Il nous a été conseillé de travailler l’écriture d’une façon plus légère. Il ne faut pas oublier qu’un site web doit être avant toute chose agréable à lire !
À la suite des remarques, la semaine suivante, nous avons amélioré, épuré et rendu plus lisible notre texte. De même, nous avons pris en compte toutes les remarques de notre professeur afin que le texte soit le plus clair et parlant possible. Ce travail de vulgarisation nous a pris toute la journée car nous étions encore bloqué avec nos exposés de secondaire. Il nous a été aussi demandé de créé un fichier Markdown afin de prévisualiser notre mise en page et notre structure.
Nous étions tellement concentrés sur notre travail que nous avons levé une seul fois la tête ! Quand notre estomac à gargouiller ! Il était temps d’aller manger notre pizza ! Après ce temps midi très sain pour la ligne, nous avons essayer d’avancer le plus possible afin d’avoir le moins de travail possible pour la semaine suivante.
Le dernier jour du workshop s’est déroulé très calmement car nous étions très avancé sur le travail. Il nous restait plus que l’abstract et la conclusion à écrire. Ce fût un très joli travail d’équipe mais maintenant il était temps de travailler seul !
Quatrième étape : Seul face à son écran … Le design
Le travail de groupe fini, le contenu en main, il était temps de s’attaquer au plus important : la mise en page. Grâce à nos cours en DWM, nous avons été aiguillé afin d’appliquer les bonnes méthodes de travail.
Dans un premier temps, j’ai commencer à chercher la couleur de paragraphe. En quoi cela consiste-t-il ? C’est très simple, pour débuter le design d’un site web, il est important d’avoir les fonts que l’ont va utiliser ainsi que divers paramètres qui vont nous permettre d’avoir le paragraphe type du site.
C’est ainsi que dans ma recherche, j’ai commencé à regarder les fonts sur Google Fonts. C’est ainsi que j’ai choisi trois fonts différentes pour les paragraphes ainsi que trois autres pour les titres. Par après, mon travail consista à du A/B testing de valeur afin de trouver la forme la plus correcte à la lecture sur mobile. Après tous mes essais, trois combinaisons différentes sont apparues.
Grâce à des avis externes à l’option, j’ai gardé qu’une seule combinaison de typographie et c’est ainsi que j’ai trouvé ma couleur de paragraphe !
Peu fier de mon premier succès, il était temps de commencer le travail de design. Il était important pour moi de mettre à plat mes idées. Suivant les conseils des professeurs, j’ai choisi de travailler en m’inspirant du site web de l’auteur de la conférence, Claire L. Evans. Il était pour moi important de faire passer son message dans ce travail. J’ai donc décidé d’utiliser certaines de ses couleurs dans mon site web.
Ma couleur de paragraphe trouvée, mes couleurs primaires dans ma poche, il ne me restait plus qu’à designer un site web lisible et pratique ! Mes premiers jets furent trop complexe ou remplis de décorations inutiles.
Suite à toutes ses remarques, j’étais fin prêt pour l’étape ultime !
Cinquième étape : Le code, enfin !
Le design prêt, il était enfin temps de s’attaquer à l’intégration, ma partie préférée.
Le site web a évolué au fur et à mesure que j’avançais. La première étape importante a été l’injection de mon contenu dans un fichier HTML. Grâce au markdown fait précédemment, il a été facile de tout balisé. Mais le plus important allait arrivé, la mise en page, le CSS.
Étant perdu dans mes pensés, mon travail était très brouillon, mais je savais que j’avais le temps pour peaufiner et réarranger le CSS afin qu’il soit bien au norme BEM. Dans un premier temps, j’écrivais ce qui me passait par la tête. Mon premier jet fût très sobre sans fioriture, sans animation. Tout était fait pour avoir sa place, un point c’est tout.
Ayant ma base et surtout du temps, j’ai pu commencer à plancher sur mes animations ainsi qu’à mon rajout de relief dans ce site plat et monotone. Avec quelques box-shadow, un petit header fixé et un peu de javascript, je suis arrivé à un résultat plus attrayant au regard. Même si la couleur de fond restait la même, j’avais essayé de mettre du rythme verticale !
Mais un point restait à finir : le menu ! Élément obligatoire, nous devions incorporer un menu hamburger dans notre travail. Heure après heure, n’ayant aucune idée, je commençais à désespérer. Il était temps pour moi de faire un tour sur le web, notre source du savoir !
Mais j’en avais pas fini avec ce site web ! En effet, je trouvais que le header fixe était bien mais qu’il pouvait avoir une utilité à l’utilisateur. C’est ainsi qu’une idée germa. Afin d’avoir une idée dans quelle section on se trouve, le texte du header change après chaque titre afin d’avoir un repère visuel.
Sixième étape : La mise en ligne
L’intégration finie, il ne me restait plus qu’à mettre en ligne et à partager mon site web aux gens !
Lien vers l’auteur de la conférence
Septième étape : La présentation aux autres groupes
Après une course contre la montre effrénée pour finir et mettre en ligne dans les temps, nous avons dû participer à une évaluation sous forme d’une présentation de nos projets devant un jury.
Le 09 novembre 2018, lors de nos présentations, nous avons eu l’occasion de parler avec d’autres groupes de leurs ressentis. Ayant pris des notes, voici ce qui en ressort pour chacun des groupes :
- Groupe 4 : The Internet of Natural Things — Simon Collison
Le groupe ne se connaissait pas du tout à la base mais l’entente à très vite été bonne. Comme on pouvait s’y attendre, une personne n’était pas souvent présente, cependant, il n’a pas été un frein.
La conférence était intéressante mais très abstraire donc ils ont eu des difficultés à la comprendre. De ce fait, ils ont eu énormément de soucis avec la rédaction du texte. Mais en plus de ça, certains soucis de design sont apparus avec le temps dû à la complexité du sujet.
Le groupe retire énormément de fierté de leur travail et de leur premier site fait de A à Z.
- Groupe 6 : How to Build an Atomic Bomb — Mike Monteiro
Dans un premier temps, le groupe a trouvé la conférence plutôt longue. L’anglais était un obstacle pour certains surtout avec les références politique. Ils leur a fallu énormément de temps afin de bien vérifier toutes les références.
Plusieurs soucis sont vite apparus aussi par rapport au design et à la concordance avec le sujet, l’éthique étant assez complexe à designer.
Cependant l’expérience a été enrichissante et c’est passé dans une bonne ambiance avec une bonne distribution du travail, de la motivation et une participation commune.
- Groupe 18 : What History’s Female Internet Pioneers can Teach us about Tomorrow — Claire L. Evans
Pour ce groupe, la conférence était compréhensible et facile à discuter. Cependant quelques problèmes sont apparus lorsque qu’il a fallu rédiger le texte, le groupe voulant garder une idée cohérente et le même style d’écriture que l’auteur.
Le groupe ne se connaissait pas à la base mais ils se sont vite bien entendus. Le premier jet du texte a été vite fait le premier car le travail avait bien été distribué. Seul point négatif, il y avait trop de texte à écrire.
Le code et le design n’ont pas été un réel problème car les idées étaient claires.
- Groupe 23 : From AI to robots, from apps to wearables — let’s design for everyone, OK? — Robin Christopherson
Il s trouve que dans ce groupe, 3 des 4 participants se connaissaient déjà à la base. Il en découle une bonne cohésion de groupe et une bonne entente de même.Chacun avait droit à la parole et tout le monde s’écoutait, grâce à cet esprit aucun conflit n’est à déplorer.
Cependant, la vidéo était difficile à bien cerner car il y avait trop de micro vidéo d’exemple qui n’apportait pas réellement de contenu. Le texte est passé par plusieurs phase : du texte trop court au texte trop longue, jusqu’à trouver le juste milieu grâce aux bons conseils des professeurs.
De même, après avoir fini les interviews, nous avons eu quelques feedbacks des professeurs sur nos designs.
La remise en question
Après avoir eu plusieurs cours que ce soit en design ou en code, je me suis remis en question et surtout j’ai remis en question mon design et son code. Je me suis rendu compte de plusieurs soucis et surtout du manque de personnalité dans mon design. J’ai donc décidé de tout reprendre depuis le début afin de rendre un code plus propre ainsi qu’un design plus travaillé.
Après plusieurs essais ainsi que plusieurs recherches, j’ai réussi à trouver un compromis qui me plaise.
Le design de la landing page était très important pour moi car c’est la première émotion que l’utilisateur ressent en arrivant sur un site web. Prenant en compte plusieurs remarques de mes professeurs, j’ai décidé de partir sur du bleu et du rouge comme couleurs dominantes.
En ce qui concerne le logo, je l’ai divisé en deux et j’ai aligné le logo du sexe “masculin” avec les trois noms des hommes. Bien entendu vu que c’était de la décoration, je leur ai mis une opacité réduite afin qu’ils se fondent dans le décor. Le symbole du menu a été affiné pour donner un style plus élégant.
En partant des mêmes remarques, j’ai décidé de retravailler les couleurs afin de donner un côté plus élégant et moins vieillot au site.De même, la structure de l’html a été repensé afin d’utiliser les flex-box pour rendre le site web totalement responsive. Ce travail n’a pas été de tout repos surtout qu’il chevauchait avec un autre projet — RUX. Mais j’y suis arrivé à force d’y croire et avec un peu d’organisation, rien n’est impossible.
Mes partenaires de travail: Hélène Goffinet, Aline Meunier et Alexiane Dapsens.
