IOlce — Case Study
Voici le Case Study de IOlce « Input Output, Lire et Communiquer sur Écran », un travail de groupe réalisé à la Haute École Albert Jacquard option DWM (Design Web et Mobile).
Collectivement, il nous a été demandé de “visionner, comprendre, retranscrire et réinterpréter la conférence web” pour ensuite réaliser une page web individuelle avec notre contenu commun.
Nous avons reçu la conférence de Claire L. Evans “What History’s Female Internet Pioneers can Teach us about Tomorrow”, qui parle du rôle qu’ont joué les femmes dans l’histoire d’Internet.
Un bon groupe
Notre travail de groupe s’est réalisé en 4 grosses étapes :
- La rentrée
Nous avons d’abord créé le groupe, un peu au hasard (nous ne nous connaissions pas), visualisé la conférence individuellement et cherché quelques références.
2. Premier Workshop
Lors du premier Workshop, après avoir reçu nos objectifs, nous avons mis nos opinions en commun, appris à nous connaître, créé une structure de titres et de sous-titres et fait un premier jet de nos paragraphes.
3. Deuxième Workshop
Nous avons pris en compte et appliqué les commentaires de notre professeur référent et “vulgarisé” notre contenu. En effet, nous avions déjà nos paragraphes, mais notre style d’écriture était trop scolaire, nous avons donc essayé au maximum de se rapprocher du style que Claire L. Evans utilisait dans sa conférence, quelque chose de plus léger et agréable à lire.
4. Troisième et dernier Workshop
Pour le dernier Workshop, nous avons finalisé la structure et le contenu et enfin rédigé l’abstract. Vu que nous avions pris beaucoup d’avance lors des autres jours de Workshop et que nous étions tous sur la même longueur d’onde, ce dernier jour de travail était plus calme que les autres. Nous étions une très bonne équipe, en plus d’être efficaces.
Une fois les workshop terminés, il était temps de travailler individuellement.
Au boulot : cette fois, seule !
J’ai commencé par ouvrir Photoshop afin de mettre le contenu en forme. En ce qui concerne les typographies, j’ai choisi la “Muli” pour les titres, et “Imprima” pour les paragraphes.
Pour les couleurs, j’ai longuement hésité. J’ai d’abord repris les couleurs qui sont sur le site de Claire L. Evans, la conférencière (les 3 premières).
J’ai fait pas mal de tests et d’A/B Testing pour trouver la meilleure combinaison. Pour la bannière et le header d’abord :
Cette dernière version reprend deux des couleurs du site de Claire Evans.
Et concernant la couleur dans le site en lui-même : rien n’a d’abord été fort concluant. Un rose plus clair n’était pas lisible, un rouge vif contrastait plus, mais faisait un peu mal aux yeux quant au vert du site de Mme Evans, ce n’était pas vraiment le plus graphique.
Voici la version que j’ai choisie, un rose plus foncé et pâle avec une police noire pour faciliter la lecture. Cette couleur se retrouve également sur mes titres et dans le menu hamburger.
Enfin, sur mon psd, j’avais centré tous mes textes, mais finalement lors de l’intégration je n’ai centré que les textes du header et aligné tout le reste à gauche afin de mettre du rythme.
Après avoir déterminé comment disposer mes éléments, trouver mes typographies et mes couleurs, ne restait plus “qu’à” coder tout ça.
Cette partie m’a pris le plus de temps, mais les mécanismes sont vite revenus. D’abord ajouter le contenu dans une page HTML, pour ensuite en CSS lui donner vie avec quelques ombres, des changements de couleurs et une animation pour le menu hamburger par exemple.
Au final, après ces quelques semaines de travail, je suis assez contente du résultat !
On y retourne pour la version responsive !
Notre version mobile-first terminée, il nous a été demandé (après avoir reçu chacun un debriefing lors d’une présentation) d’améliorer notre travail et surtout de travailler sur une version responsive.
En premier lieu, j’ai retiré le premier cadre sur lequel on arrivait directement, je m’étais cassé la tête à trouver comment disposer mes éléments quand au final, le plus simple est toujours le plus efficace! J’ai également mis moins d’espace dans mes titres pour plus de lisibilité :
Des légendes en plus ont été rajoutées sous les photos (dont certaines ont été changées) qui n’en avaient pas pour un complément d’information, et les colonnes de textes sont plus étroites !
Après avoir effectué ces quelques petits changements, il était temps de passer à la version Desktop :
Le design est resté le même avec une mise en page en plusieurs colonnes pour mettre du rythme et de la dynamique.
Au final, je redoutais de travailler sur la version responsive parce que je ne savais pas si ça allait bien donner, mais ça a été finalement, merci les media queries et les flex !
Rencontre avec les autres groupes
Lors de la présentation de notre site en novembre, nous avons dû aller à la rencontre d’autres personnes de l’option, qui avaient travaillé sur d’autres conférences. Voici le compte rendu :
- Groupe 23 : Raffaele
Ils travaillaient sur la conférence “From AI to robots, from apps to wearables — let’s design for everyone, OK?” de Robin Christopherson.
Ils avaient une bonne cohésion de groupe, 3 d’entre eux se connaissaient déjà. Leur méthode de travail ? Ils prenaient les idées de tout le monde pour avancer ensemble. Il n’y a donc pas eu de conflit.
Ils ont tout de même un petit problème : la vidéo donnait beaucoup trop d’exemples d’autres petites vidéos, il n’y avait donc pas grand chose à dire. Ce qui a fait que leur premier jet de contenu était vide, ils ont dû faire des recherches en plus pour donner de la masse.
Ensuite, ils ont un texte peut-être trop bien fait, trop long et ils ont dû le re-synthétiser sinon il était trop redondant. En ce qui concerne Raffaele, il m’a dit avoir des difficultés avec le menu hamburger, mais dans l’ensemble ça a été.
2. Groupe 6 : Maxence
La conférence était “How to Build an Atomic Bomb” de Mike Monteiro.
Selon lui, la conférence était très longue, il y avait beaucoup de références à la politique qu’ils ont dû vérifier par la suite. Durant la conférence, Monteiro énumérait 10 points (compliqués sur l’éthique et des avis de design), mais il se répétait, ils ont donc gardé 7 points principaux pour leur contenu.
Pour lui, l’anglais a été une difficulté. Ainsi que de donner leur avis personnel pour retranscrire la conférence. Ils ont également eu des complications pour trouver le bon ton à utiliser dans leur texte.
Lui-même a eu du mal à jouer avec les margin et padding. Mais l’ambiance générale est très positive, il y avait une bonne distribution du travail dans le groupe, une bonne motivation et tout le monde participait.
3. Groupe 18 : Eva
Ils ont eu la même conférence que nous : “What History’s Female Internet Pioneers can Teach us about Tomorrow” de Claire L. Evans.
Ils n’ont eu aucun souci niveau ambiance (bien qu’ils ne se connaissaient pas) ou quoi que ce soit dans le groupe. La conférence était compréhensible, ils n’ont pas eu de problèmes à en parler. La plus grande difficulté a été pour le texte : ils avaient du mal à garder des idées cohérentes et un même style d’écriture, c’était un peu confus.
Ils ont d’abord fait un premier jet puis l’ont retravaillé. Leur méthode de travail a été d’être chacun de leur côté puis ils ont mis en commun par la suite pour trouver un juste milieu.
Points positifs :
- Conférence intéressante,
- le fait de travailler sur un vrai projet.
Point négatif :
- Ecrire beaucoup
Mais globalement, il y a eu plus de positif que de négatif. Elle a vite eu son design car elle avait déjà une idée très précise, et au niveau du code, elle n’a pas eu de réelle difficulté mais elle n’a pas su tout faire car on ne l’avait pas appris.
4. Groupe 4 : Trystan
Leur groupe a eu la conférence “The Internet of Natural Things” de Simon Collison.
Le groupe ne se connaissait pas du tout mais il y a eu une bonne entente. Un membre de leur groupe ne venait pas tout le temps.
La conférence était intéressante mais abstraite, difficile à comprendre. Ils ont pris les 4 séances pour écrire leur texte, ça a été très difficile, mais ils travaillaient tous ensemble.
Sa plus grande difficulté à lui a été de trouver un design.
Un point positif ? Premier site fait de A à Z : il a trouvé ça très intéressant.
Lien vers le site web de Claire L. Evans
Merci à Jean-Christophe Wieme, Aline Meunier et Alexiane Dapsens, avec qui j’ai travaillé la plupart du temps.
