IOLCE — Case Study

Iolce

Iolce est un atelier pour les élèves de deuxième année de l'option Design Web et Mobile de l'heaj. L'objectif de cet atelier est de résumer une conférence et de partager ce résumé à travers un site web. Notre conférence avait pour sujet l'expérience utilisateur.

"user experience is human experience" — L'expérience utilisateur est une expérience humaine.

— Conférence de Monika Bielskyte

Le travail s'est déroulé en deux étapes. La première partie consistait à réaliser notre résumé en groupe et la seconde, à créer le site internet individuellement.

Au cas où tu te poserais la question? Iolce est l'acronyme pour Input Output Lire et Communiquer sur Écrans.

Étape 1 : Le résumé

Le groupe

Le groupe se compose de 4 étudiants. Trois étudiants fraichement arrivés dans l'option et d'un étudiant 2.5, qui lui refait ça deuxième. Les groupes ont été formé le premier jour de la rentrée. Nous ne connaissions alors peu de personnes. Nous avons donc formé notre groupe à l'aveugle. Qui sommes-nous? Notre groupe est constitué de Catherine Dailliet, Kevin Trieu, Robin Béthume et de moi, Maryline Brouwer. Après quelques semaines, Catherine, a changé d'option. Nous étions plus que 3.

Catherine Daillet

Kevin Trieu

Robin Béthume

Maryline Brouwer

Le visionnage de la conférence

Chacun de notre côté, nous regardons la conférence. Cette conférence est en anglais, ça rend la compréhension difficile. Je cherche donc une solution pour avoir une vidéo avec des sous-titres. Malheureusement, je ne trouve rien. Je décide donc de télécharger la vidéo sur Viméo et de l'importer sur YouTube car il génère des sous-titres automatiquement.

capture d'écran de la vidéo mise sur youtube

le résumé la conférence

Je peux enfin réaliser mon résumé. Pour faciliter, le travail, nous décidons de séparer la conférence en trois parties. Chacun de notre côté, nous réalisons un résumé personnel de notre partie de la conférence.

Nous regroupons nos différents résumés afin de pouvoir commencer la réalisation de notre texte. Pour avoir plus facile à réaliser ce résumé, nous commençons par réaliser une petite hiérarchie des points importants abordés dans la conférence.

Pour chaque point que nous décidons d'évoquer dans notre résumé, nous ajoutons les informations que nous avions chacun dans nos résumés respectifs. Notre récit devient un enchainement de mot, de phrase mise bout à bout sans qu'il ait de sens entre elles.

Je commence à réaliser un texte plus agréable à lire. À chaque paragraphe, que je modifie, je demande un avis à mes camarades. C'est ainsi que nous formons notre petit texte. Une fois terminé, je montre notre document à un professeur afin d'avoir un avis sur notre travail.

Le résumé est un peu maigre, il manque certaines informations. Mes camarades n'étant pas motivé pour retravailler le texte. Je décide donc de regarder à nouveau la vidéo afin de réaliser un "résumé" pour l'ensemble de la conférence. Après cela, je fusionne mon résumé avec celui qui nous avions réalisé ensemble. J'ai transmis ce travail à mes camarades espérant de leur part des avis. Mais c'était trop leur demander, j'imagine.

Pour terminer l'étape du résumé, je réalise la dernière version du markdown afin de mettre en forme les différents rapports hiérarchiques.

Étape 2 : Le design du site

Choix de la police

Je cherche une police qui reste dans le thème de la conférence, à savoir le futur. Je suis donc partie sur trois typographies différentes. Titillium, Open Sans et Dosis. Je réalise des tests pour choisir la typographie que j'utiliserais pour mon site web.

Test des typo réaliser sur Invision.

Pendant que je discute avec un camarade, je remarque qu'il utilise une typographie nommée "Ubuntu". Je réalise que ce serait intéressant d'utiliser cette typographie car la conférence parle d'Ubuntu dans sa conférence. Il était ainsi possible de retrouver certaines idées de la conférence dans mon site web.

Test de couleur de paragraphe sur Invision.

Choix des couleurs

Pour mes couleurs, je me suis rendu sur l'instagram de Monika et j'ai cherché une image qui illustrait la conférence. Lors de cette recherche, j'ai pour objectif que l'image que je trouverais soit dans les mêmes tons que le portait de Monika que j'avais choisi auparavant.

Je suis ensuite allé sur le site d'Abode Color. J'y ai généré un palette de couleurs à partie de l'image choisie. C'est cette palette que j'ai utilisé tout au long de mon design.

Palette de couleur générer par Adobe color à partir d'une image.

Choix des images

Lorsque j'ai réécrit le texte, j'ai noté une description de ce que je voulais mettre comme image. Quand est venu le moment de mettre des images sur le site. J'ai réalisé des recherches sur base de la description que j'avais réalisée auparavant.

Je commence à insérer mes images sur mon site et un professeur m'indique gentiment que l'image choisie "clochait" sur le site, qu'elle donnait l'impression d'avoir été choisie sur une banque d'image sans qu'elles aient vraiment ça place sur le site. J'étais tout à fait d'accord avec remarque mais que mettre comme image? Ce professeur m'a aussi indiqué que ce serait intéressant de prendre les photos provenant du profil instagram de Monika.

Test de couleur de paragraphe sur Invision.

Lors de ma recherche, j'avais le même objectif que pour le choix de l'image qui m'a servi pour la création de ma palette. A savoir, garder les mêmes tons dans mes images que dans les couleurs de mon site. J'avais ainsi une certaine harmonie avec l'ensemble des éléments de mon site.

Le layout

Dans un premier temps, j'ai cherché le site officiel de Monika Bielskyte. Malheureusement, je ne l'ai jamais trouvé. J'espère m'inspirer de son site pour la création du Layout. N'ayant rien auquel me rattacher, je suis partie de zéro, sans idée précise. Fin, pas tout à fait. J'avais déjà réalisé sur Invision un rythme vertical pour site web. C'est ainsi que quelque idée son venue.

rythme vertical réaliser sur Invision.

Je commence à réaliser mon layout sur Invision. Je teste pleins de choses et finis par réaliser un modèle qui me plait. Lors de la réalisation du code, je modifie encore quelque petite chose qui me semble plus approprié. Mais ce n'était qu'une petite partie de réaliser. En effet, il ne s'agit là que de la version mobile. Pour la version tablet et desktop, nous devons essayer d'utiliser une grille irrégulière. Je réalise quelques tests sur Invision jusqu'à obtenir une version qui me plait. Je me mets donc au codage sur base de mon layout. Afin de garder une cohérence lors du changement de taille de l'écran, je modifie certaines choses. C'est après plusieurs jours de codage que je finis mon site.

Layout de mon site sur Invision.

Conclusion

La partie travail en groupe était, pour moi, la partie la plus difficile et fatiguante. Nous avons certes réalisé une grosse partie du résumé ensemble mais j'aurais espérer un peu plus d'implication de leurs parts.

Ensuite, au niveau de la réalisation du site, je n'ai pas eu de gros problème. Rien qui n'a pu être résolu par quelque heure de recherche sur internet en tout cas. J'ai pour la création du layout du site, utilisé les css grid. Un nouveauté pour moi. Il m'a fallu du temps pour comprendre les bases mais au final j'ai trouvé que l'utilisation de ces grilles facilitaient la mise en page.

Ce fut le plus long atelier mais pour moi le moins stressant et fatiguant.

C'est ici que se termine cette aventure.