IOLCE — My case study
Réinterpretation de la conférence de R. Christopherson, “From AI to robots, from apps to wearables — Let’s design for everyone, OK ?”
Iolce — Input Output Lire et Communiquer sur Ecran
Par groupe de quatre étudiants dans l’option Design Web et Mobile à la Haute École Albert Jacquard, il nous a été demandé de visionner une conférence traitant des métiers du web et de s’en approprier le contenu. Il nous est ensuite demandé, individuellement, de concevoir un site utile et utilisable “mobile first” en respectant toute une série de critères.
Je vais donc vous présenter ma méthode de travail.
C’est parti…
Notre groupe est constitué et une vidéo nous est attribuée, maintenant, au travail ! Survient déjà la première difficulté quand nous nous rendons compte que cette conférence de 40 minutes est en anglais, mais alors me voilà horrifiée quand je découvre l'absence de sous-titres. Comment allons-nous faire ? Heureusement, nous avons trouvé une retranscription de la conférence. Nous nous sommes alors attaquées, chacune de notre côté à la traduction. C’est long… et j’ai du mal à comprendre certaines parties qui traitent de sujets que je ne connais pas du tout.
Les workshop et la rédaction
C’était un vendredi, fatiguée et un peu perdue, que j’ai retrouvé mon groupe pour le premier workshop dans ce grand local réunissant tous les étudiants de l’option et dans lequel nous avons passé de longues heures. Après un briefing des professeurs, nous avons mis notre contenu en commun, l’avons bien relu et nous en avons parlé entre nous, pour voir ce que chacune avait compris et retenu. Nous avons également reparcuru le texte pour mettre en évidences les éléments clés. Ensuite, nous nous sommes réparti le contenu, chacune prennant la partie qui lui parle le plus (pour moi, celle sur le design inclusif), pour la retravailler, la reformuler, se la réapproprier. Nous avons environ 18 pages, c’est long. Nous avons terminé par rédiger une conclusion, ce que j’ai trouvé très difficile. Expliquer avec mes mots, en quelque phrases, le contenu de la conférence, oufti… mais à quatre, ça a été.
Pour le deuxième workshop, le vendredi suivant, nous avions chacune notre notre côté cherché des informations sur le conférencier, Robin Christopherson et rédigé sa biographie en plus d’un abstract en français. Nous avons mis cela en commun afin d’en faire des versions finales et nous avons résumé, reformulé, résumé et encore résumé notre contenu. A la fin de la journée, nous n’avions plus que 8 pages, ce qui est encore trop.
Enfin, pour le troisième et dernier workshop, nous avons encore retravaillé notre partie et réalisé une version du contenu avec des markdown. Nous avons continué à retravailler l’ensemble du texte pour finir avec 4 pages (sans compter biographie et abstract).
Le contenu fini, maintenant commence la partie individuelle. Je suis perdue, je n’ai jamais réalisé de site et je ne sais pas trop par où commencer.
La couleur de paragraphe
C’est la première étape et nous l’avons réalisée pour le cours de Design Texte. J’ai dû tester plusieurs polices, corps de texte, interlignages, combinaisons de polices et hiérarchies.
Jusque là, tout allait bien, j’avais choisi la police Frank Ruhl Libre avec un corps de 18pt, un interlignage de 170%, la police Open Sans pour les titres et le rapport hiérarchique Augmented Fourth — 1.414 (18pt, 25pt, 35pt). Le tout était super, bien lisible et harmonieux mais c’est au moment de me lancer dans le design que je me suis rendue compte que cela ne me convenait pas. J’avais choisi une police sérif en me disant que cela ferait plus sérieux, mais maintenant que j’y repense, mon sujet traite des technologies du futur et j’ai envie de quelque chose de plus moderne, moins classique. En cherchant de l’inspiration pour le design, j’ai aussi vu beaucoup de couleurs vives et beaucoup de sans sérif , du moderne quoi. Le site de mon conférencier utilise aussi des polices sans sérif. Alors quoi ? Je recommence tout ? Allez, c’est repartit pour un tour sur Google Font !
Ca y est, j’ai trouvé ce qu’il me faut ! J’ai choisi la police Lato avec un corps de 18pt et un interlignage de 160%.
Pour les titres, après quelques essais, j’ai choisi la police Source Sans Pro (en rouge). La hauteur des X ne correspond pas tout à fait, mais pour le reste, ça colle !
Pour le rapport hiérarchique, j’ai choisi le Perfect Fourth — 1.333
(18px, 24px, 32px, 42px)
Conception du site
Maintenant, il faut chercher de l’inspiration, chercher des images, des photos, des couleurs, sur Pinterest, Dribbble, Behance, un peu partout.
Après de nombreux essais, j’ai enfin trouvé ma gamme de couleurs. Ce sont les tons bleu/turquoise de la photographie de Robin Christopherson que j’ai choisie pour mettre sur mon site, associés à une couleur plus peps (le rose qui est sensé être assez flash).
J’utilise Sketch pour faire mon design, ou plutôt faire des brouillons et des tests parce que je n’ai pas encore l’habitude de travailler avec cette ressource. Je n’ai jamais créé de design pour des sites et ce fût pour moi une grosse difficulté. J’ai donc décidé de faire quelque chose de simple et réalisable avec mes compétences de codage, pour ne éviter d’arriver à un stade où je suis incapale de coder ce que j’avais prévu et éviter un maximum de problèmes.
Une fois arrivée à la partie codage, celle que j’attendais le plus, je me suis bien amusée, mais j’étais souvent frustrée de ne pas pouvoir faire des choses plus originales et plus complexes. Il m’est arrivé de passer beaucoup de temps sur des petits détails, d’avoir des problèmes par-ci par là, mais au final, je m’en suis sortie en prennant bien le temps d’analyser la source du problème et en faisant parfois des recherches sur Internet. J’ai encore corrigé plusieurs erreurs après avoir validé mes fichiers sur W3C et puis je suis arrivée à la fin. Enfin ! J’ai bien vérifié que mes liens fonctionnaient et relu l’orthographe, puis j’ai mis mon site en ligne.
En définitive
Ce travail fut très enrichissant pour moi. D’abord, la conférence m’a appris beaucoup de choses et m’a fait prendre conscience de l’importance de rendre nos sites accessibles à tous car je ne m’étais jamais vraiment posé beaucoup de questions à ce sujet. Ensuite, c’était tout simplement la première fois que je réalisais un site web. Cela m’a permis de voir un peu de quoi j’étais capable, mais aussi de voir que j’ai encore énormément à apprendre et je n’attends que ça, en apprendre encore et encore.
A la rencontre d’autres étudiants
Lors de la journée de jury du vendredi 9 novembre, je suis allée à la rencontre de quatre étudiants (un par conférence) afin de les interroger sur leur expérience.
IOLCE#1
Première vidéo : “ What History’s Female Internet Pioneers can Teach us about Tomorrow”, une conférence de Claire L. Evans
Cette conférence parle du rôle des femmes dans l’évolution d’Internet à une époque où les hommes étaient machistes. Elles ont en effet un rôle important car ce sont elles qui ont apporté les grandes idées.
Le travail de cet étudiant s’est très bien passé. Il n’a pas eu de difficultés techniques car il est autodidacte, il adore le code (particulièrement le javascipt) car c’est très satisfaisant pour lui et la conception en mobile first est plus facile que pour desktop. La seule difficulté qu’il a rencontrée était l’imagination du design, il a donc fait quelque chose de simpliste et classique.
IOLCE#2
Deuxième vidéo : “How to Build an Atomic Bomb”, une conférence de Mike Monteiro
Dans sa conférence, Mike Monteiro parle de Twitter comme étant la bombe atomique du 21ème siècle. Il donne les clefs d’un design réussi, replace le design dans un contexte éthique où le designer a sa part de responsabilité et réalise des choix afin de participer à la construction d’un monde meilleur.
Cet étudiant a trouvé la conférence intéressante mais malheureusement décrochait assez facilement car M. Monteiro s’éloignait du sujet en racontant des blagues et utilisait trop souvent le mot “fuck”. Ensuite, le code a été sa partie préférée dans le travail. Il redoutait beaucoup la partie design et s’est donc mis à coder directement, en ayant une nouvelle idée chaque jour. Il a été très satisfait une fois le site fini et fonctionnel d’avoir fait quelque chose de A à Z. Globalement, il n’a pas eu de grosse difficulté. Une petite peur avec OVH et une personne qui a quitté le groupe une fois le texte fini, rien de plus.
IOLCE#3
Troisième vidéo : c’est la même que la notre !
Dans sa conférence, R. Christopherson nous sensibilise à l’importance de créer des produits web accessibles pour tous, en tenant compte des différents handicaps des utilisateurs et nous donne un aperçu des interfaces du futur.
Les difficultés rencontrées par cet étudiant ont d’abord été la rédaction du texte, ensuite, le choix des couleurs et le design. Il n’a pas trop aimé la conférence car le conférencier donnait beaucoup d’exemples. Au niveau du code, ça allait. Le tout a paru long, bien que pour la partie design, il a juste réalisé quelques croquis car il n’avait pas assez de temps (4 semaines pour faire le texte puis plus qu’une semaine pour faire le site). Il a également trouvé un peu décourageant de voir les travaux des autres étudiants. Finalement, il a été un peu déçu que R. Christopherson ne réponde pas à leur tweet ;-).
IOLCE#4
Quatrième vidéo : “The internet of Natural Things”, une conférence de Simon Collison
La conference parle du possible rapprochement entre les humains et la nature par le biais de nouvelles technologies en commençant par de simples applications.
Pour cet étudiant, la première difficulté a été la rédaction. Du fait que la vidéo soit en anglais et que le conférencier parle vite, il a fallu la visionner plusieurs fois. Une autre difficulté a été l’ergonomie, pas facile vu que c’était son premier site. Il a bien aimé la partie codage mais a également rencontré des difficultés car les erreurs se multipliaient au fur et à mesure de son avancée. Au final, ce projet a été très enrichissant pour lui et lui a appris beaucoup de choses.
