Il était une fois … IOlce et Claire L. Evans !

IOLCE — Input Output lire et communiquer sur écran

Claire L. Evans — une femme au service des femmes

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.

La rentrée à l’HEAJ

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 !

Au travail !

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.

Noooon !

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 !

Un style plus approprié

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

Travail sur la vulgarisation

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 côté obscur de la force mange plus sainement que nous

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 !

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.

La magie de Google

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.

Essais de fonts

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.

Mes deux couleurs principales

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.

Une surcharge inutile et un changement de couleur qui contraste mal

Suite à toutes ses remarques, j’étais fin prêt pour l’étape ultime !

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.

Tout bien rangé

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

Sobre, classique, sans relief

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 !

Du relief et encore du relief !

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 !

L’évolution du menu

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.

Changement de titre du header

L’intégration finie, il ne me restait plus qu’à mettre en ligne et à partager mon site web aux gens !

Voici le lien vers mon site

Lien vers l’auteur de la conférence

Lien vers la conférence

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.

Arès / avant

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.

Après / avant

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.

Le site web s’adapte parfaitement à son environnement

Mes partenaires de travail: Hélène Goffinet, Aline Meunier et Alexiane Dapsens.

--

--

Growth Engineer (former UI Engineer)@pictarine. Former Flow Asia Intern. Online at wieme.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jean-Christophe Wieme

Growth Engineer (former UI Engineer)@pictarine. Former Flow Asia Intern. Online at wieme.io