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.

Image for post
Image for post
Claire Jobs ?

Un bon groupe

Notre travail de groupe s’est réalisé en 4 grosses étapes :

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

Image for post
Image for post
Structure efficace

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.

Image for post
Image for post
Dernière version de notre texte

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.

Image for post
Image for post
Image for post
Image for post
Le B99 : notre lieu de travail

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.

Image for post
Image for post

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

Image for post
Image for post
Recherche de couleurs

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 :

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
La dernière a été la bonne.

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.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Non, non et non…

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.

Image for post
Image for post
Beaucoup mieux !

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.

Image for post
Image for post

Après avoir déterminé comment disposer mes éléments, trouver mes typographies et mes couleurs, ne restait plus “qu’à” coder tout ça.

Image for post
Image for post
Enfin, le code !

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é :

Image for post
Image for post
Deuxième version

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 !

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Toujours plus de légendes !

Après avoir effectué ces quelques petits changements, il était temps de passer à la version Desktop :

Image for post
Image for post
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.

Image for post
Image for post
Image for post
Image for post
Vive les colonnes

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 :

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

Image for post
Image for post

Lien vers mon site web

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.

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