Case Study — IOLCE : Input/Ouput, Lire et Communiquer sur Écran

Maxime Fondu
Nov 1, 2018 · 6 min read

#Aperçu du projet

Iolce est le premier Workshop 2018–2019 pour les élèves de deuxième année en spécialisation Design Web et Mobile de la Haute École Albert Jacquard. L’objectif consiste à réinterpréter une conférence et de la partager à travers le web. Pour notre cas la conférence avait comme sujet l’accessibilité à travers les technologies.

Une conférence de Robin Christopherson : De l’IA aux robots, des applications aux wearables — concevons pour tout le monde, d’accord ?

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 elle individuelle et consistait à créer le visuel et le back-end.

#Day0 #14/07/2018

Première présentation du projet Iolce dans les grandes lignes. Un résumé de chaque conférence afin de nous permettre de faire un choix sur le futur contenu de notre site. Nous avons ensuite composé notre groupe de quatre personnes et commencé à discuter des conférences afin dans sélectionner une.

Résultat de la journée :

  • Un groupe;
  • Une conférence;
  • Un projet.

#Day1 #05/08/2018

Première journée attribuée au projet Iolce, mais avant cette journée, nous avons travaillé la conférence individuellement, la comprendre, la décortiquer et en faire un résumé. Ensuite, nous nous sommes réuni afin de discuter des points importants de la conférence et nous avons rassemblé nos idées en commun.

Et enfin la première journée Iolce commence, nous avons d’abord la présentation complète du projet Iolce suivie des objectifs de la journée:

un google doc partagé, la structure de votre contenu, les premières pistes de rédaction.

Avec notre résumé bien fourni, réalisé préalablement en groupe nous avons pu commencer la structure de notre texte rapidement. Nous avons divisé le contenu en quatre afin que chaque membre du groupe travaille sur une partie.

Début d’après-midi, énormément de texte sur notre Doc mais très peux de structure. Nous avons donc travaillé en groupe pour réaliser des liens entre chaque partie et avoir un début de structure.

Fin d’après-midi, nous recevons un premier retour sur notre travail de la journée par notre coordinateur. Les points négatifs sortant de nos textes sont :

  • Manque de structure dû à un manque de titre;
  • Paragraphe trop long;
  • Certaines phrases trop complexes;
  • Manque une table des matières;
  • Ponctuations non-adéquates.

#Day2 #12/08/2018

Le travail du #Day1 fut amélioré à domicile individuellement afin de présenter pour la seconde journée Iolce une version plus aboutie. En tenant compte des remarques de notre coordinateur, j’ai amélioré la structure grâce à des titres et des morcelages de paragraphe afin d’avoir un résumé plus aéré et plus facile à lire.

Dès la journée commencée, nous avons en retour de notre coordinateur, les points à améliorer sont :

  • Trop de titre interrogatif;
  • Utilisation de listes pour les énumérations, afin d’aérer le texte;
  • Revoir certaines phrases qui ne se trouvent pas dans le bon contexte.

Ses points à améliorer sont vus en groupe tout au long de la journée. Nous cherchons des solutions afin d’obtenir une meilleure structure pour nos phrases. Les titres sont revus pour être plus cohérent et éviter d’avoir uniquement des titres interrogatifs.

Début d’après-midi, je commence à rédiger le Markdown de notre site et le partage au reste du groupe pendant qu’ils finalisent nos textes.

#Day3 #19/08/2018

Troisième et dernière journée attribuée au Iolce. Dès la première heure de la journée notre texte est validé par notre coordinateur. Maintenant que le contenu est validé, nous pouvons nous pencher sur le Front&Back-end de notre site.

Pour un gain de temps nous exportons le Markdown en fichier HTML afin d’avoir déjà certaines balises et le contenu de notre site. Nous commençons par diviser notre contenu en section. Nous avons ensuite travaillé sur la micro typographie pour avoir des textes complet et fini.

Markdown

#Une des premières difficultées rencontrées

Une des difficultées était de maintenir notre contenu à jour sur les divers fichiers ( HTML, Markdown, Google Doc). Pour ça nous avons utilisé une solution toute simple nous permettant de savoir ce qui a été modifié ou retiré … Nous avons travaillé avec un code couleur, rouge, on supprime, vert, du texte à ajouter … .

#Procédés de design

La typographie

J’ai commencé par faire des recherches pour une typographie lié au projet. J’avais besoin d’une typographie avec une connotation sur les nouvelles technologies et le modernisme, j’ai donc choisi la typographie “Assistant” qui est une typographie sans sérif. Utilisé en Bold pour les titres et en regular pour le corps du texte.

Typographie Assistant

Pour ma couleur de paragraphe, j‘ai utilisé un interlignage de 1.5 et une taille de police de 16px pour les paragraphes et 32px pour les titres. j’ai réduit la longueur de lignes à 7–9 mots par ligne.

Les couleurs

Le style choisi est épuré en travaillant sur cinq couleurs. D’abord, trois nuances de gris connotant la technologie et la modernité mais qui trop utilisé rend le contenu terne alors vient le jaune pour sa connotation à l’optimisme mais aussi une couleur contraste avec les nuances de gris et enfin le blanc pour sa sobriété et simplicité. Ce qui convient au projet connotant la technologie et le développement.

Ensemble des couleurs choisi

Le layout

Une fois notre contenu solide il a fallu penser au design visuel. Pour cela, je me suis inspiré de tous les sites web possibles, du mauvais pour ne pas reproduire les mêmes erreurs et vérifier ce qui fonctionne ou non jusqu’au site trop sophistiqué empêchant une bonne lisibilité. J’ai commencé en layout une fois mon code couleur cohérent et des idées pleins la tête. J’ai structuré le contenu par section afin d’avoir un schéma répétitif :

  • section
  • titre
  • paragraphe

Cette même structure appliquée sur chaque section ma permis de garder une cohérence graphique. De fil en aiguille le contenu venait s’ajouter et chaques sections commençaient à se contraster et se personnaliser en gardant la même cohérence graphique.


#Développement

Une fois un layout complet, j’ai commencer à rédiger le code et le site prenait forme. J’ai ajouté du Javascript pour le menu et les interactions et du css pour le style.

#L’expérience des autres étudiants

Conférence 2 — How to built an atomic bomb

Le travail en groupe c’est bien passé, il a mis l’accent sur la disposition des bancs qui on permit une bonne communication au sein du groupe.Il a trouvé le travail long et difficile et surtout pendant les vacances, personne pour répondre à ses questions. Le grand plus était d’avoir le 2.5 qui pouvait répondre à ses questions grâce à son vécu mais peu de temps pour réaliser ce travail. Sa partie préférée a été la partie du design visuel. Les grandes difficultés ont été pour lui le temps à gérer, les bugs dans son code. Cette expérience a été apprécié, il a appris beaucoup sur le sujet comme sur la conception d’une onepage.

Conférence 4 — From AI to robots, from apps to wearables — let’s design for everyone, ok ?

Au sein de son groupe ils ont travaillé différemment, chacun travaillait sur sa partie et ils mettaient en commun par la suite. Plusieurs absents dans leur groupe ce qui ne facilitait pas le travail en groupe. Expérience agréable et une bonne entraide au sein du groupe.Difficulté avec le mobile first même si sa partie préférée était le code. Manque de temps et des difficultés à traduire la conférence.

Conférence 1 — Broad Band

Ils ont divisé le travail en quatre, chacun regarde une partie de la vidéo et la résume et ensuite ils mettent en commun. Expérience intéressante et il apprend par lui même. Sa partie préférée était le design visuel du site, les parties ou il a rencontré des difficultés était le code et traduire la conférence.

Conférence 3 — The internet of natural things

il y avait peu d’organisation dans son groupe et pas d’entraide. C’était pour lui la première fois qu’il codait. Il a bien aimé la partie de la conception du design. Il a eu difficile avec la traduction de la conférence et le code.

#Les sources

La conférence originale

Mon site développé autour de cette conférence

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade