IOLCE - Case Study

La demande

Pour ce début de workshop nous avons travaillé en groupe la première consigne a été de choisir une conférence parmi celles qui nous était proposée, différents thèmes étaient abordé, mais c'est celle qui parlait des contraintes dans notre métier qui à le plus attiré notre attention.

Nous avons dans un premier temps lu les différents synopsis des conférences proposées avant de choisir celle présentée par Charlie Owen qui s’intitulait “All constraints are beautiful” ce n'était pas évident, car elle était en anglais, mais en faisant quelque recherche nous avons trouvé une retranscription que nous pouvions suivre en écoutant ce qui simplifia la tâche. Concerne la conférence elle était plutôt courte et parlait de la même chose, mais depuis que je l’ai vue à chaque fois qu’une tâche met demandé avec des contraintes, je pense à cette conférence en me disant que ça ne peut que m’être bénéfique et me faire avancer.

casestudy06

Visionnage et retranscription

Après le visionnage et la compréhension de cette conférence, il nous fallut chaqu'un de notre côté synthétiser ce que l’on avait compris de la conférence et avons ainsi retranscrit individuellement sur un google doc notre travail. Une fois, cela fait nous avons fait un mélange de nos synthèses et de nos points de vue pour créer une synthèse générale et plus précise. Ce qui fut facile, car notre conférence n’étais pas très fournie en contenus, mais ce fut également un problème, car lorsque l’on a montré notre travail à monsieur Tournay celui-ci nous à conseillé d’écrire un texte bien plus long pour ne pas avoir de surprise l’ors de la rédaction de notre site IOLCE.

Toujours plus de contenu

Nous avons donc cherché quoi apporter à notre texte pour le compléter, ce qui nous amène par la suite à ajouter des citations de Charlie Owen (qui nous permet d’avoir un titre supplémentaire), des listes avec un lexique des mots plus technique, la biographie de Charlie Owen et nos avis personnels concernant la conférence. Sans oublier nos sources évidemment. Tout cela nous a demandé beaucoup de réflexion en groupe et on s'est demandé au début si l’on avait bien fait de choisir cette conférence qui était par ailleurs la plus courte. Bien que ce ne soit pas pour cela que nous l’avions choisie. Le choix était fait, le travaille avait commencé, il fallait absolument avancer et respecter les délais. Ce qui fut chose faite sans aucun délai supplémentaire, on était plutôt fière de nous.

Le markdow

Une fois la synthèse de notre conférence complètement rédigée, nous avons créé le markdown qui permet déjà d’avoir un code html et une idée précise de notre contenu. Nous n’avions jamais utilisé ce site-là et il nous a fallu un petit temps d’adaptation avant de comprendre ce que nous fessions et de le maîtriser.

casestudy03

La couleur de paragraphe

Une fois le Markdown rédigé nous nous sommes enfin attelé aux couleurs de paragraphes de notre contenu sur InVision ce qui m’a permis de choisir au mieux la position de mon contenu tout d’abord pour la version mobile. Une me fallut bien des essais avant d’arriver à un résultat satisfaisant. J’ai tout d’abord suivis le slide de monsieur Bourgaux à la lettre ensuite, j’ai pris mes propres paramètres en compte. Pour la couleur de paragraphe, je me suis basée sur la page de https://2018.stateofthebrowser.com/ qui faisait la promotion d’un événement ou Charlie Owen serait présente. Je me suis aussi inspiré des mêmes couleurs pour ma mise en page Mobile.

casestudy01 casestudy02

Lors du cours de Design Grid, j’ai appris à me servir des grilles et des colonnes. J’aime beaucoup Invision, malgré ses petit bug et parfois ses soucis d’intégration notamment pour les svg, je trouve que c’est une application fort facile à prendre en main et je trouve notamment que c’est vraiment un coup de pouce pour l’intégration we, car l’on a directement le visuelle en tête il ne reste du coup plus qu'à retranscrire plus ou moins les paramètres de mon layout. Ca permet d’avoir une vision claire de ce que l’on veut ce qui est bien pratique.

casestudy04

J’ai d’abord créé mes couleurs de paragraphe pour la version mobile, ce qui consiste à faire plusieurs testes au niveau de la taille, de le height et de là (....) au début, je ne comprenais pas bien pourquoi faire. Ca me paraissait long et vraiment ennuyeux. J’étais impatiente de coder. Mais j’ai compris que c'était vraiment important pour pouvoir créer une mise en pages qui tienne debout et qui soit harmonieuses. Après validation de mes couleurs de paragraphes, je me suis ensuite attelée à l’intégration mobile, je trouve que c’est le plus simple et le moins contraignant au niveau de la mise en page, car elle est linéaire et sans colonnes.J’ai pu faire valider mon design, il y avait deux trois choses à changer notamment le fait que je n’ai pas réussis à faire mon burger menu… Le JavaScript est encore un mystère pour moi. Je compte retravailler cela en espérant un jour pouvoir avoir le déclic miracle et faire de belles choses grâce à ce langage informatique. En attendant, je galère, mais je m’accroche, c’est très important de ne pas baisser les bras.

casestudy05

L'étape du code

Voici venu le temps du code, du vrai code… On passe de la version mobile à la version tablette je fais donc mon design sur Invision, j’apprends grâce à mon professeur à voir le design autrement que de façon linéaire, la consigne étant ici de faire des grilles pour un effet déstructuré de la mise en pages. J’adore faire ça, c’est génial il y a tellement de possibilité, les idées fusent, c’est agréable. Ensuite, je me mets à coder la version tablette et desktop et c’est là que la panique commence. Je me suis inscrite dans l’option web car j’avais fortement envie d’en apprendre plus sur le monde du web et je trouvais que coder, ainsi que d’imaginer l’esthétique d’un site était vraiment fou, savoir que des milliers de personnes pourraient voir mon travaille je trouve ça plutôt dingue et pouvoir faire en sorte que chacun se sentent à l’aise avec le design créer est une pensée vraiment satisfaisante. Mais avant ça, il faut le faire… Au début ça va, je remets le css dont j’ai besoin pour mes versions tablette et desktop, les paragraphes, les titres et sous-titre ça passe, je gère. Mais là ou ça coince, ce sont les images et les grilles, une vraie catastrophe j’en passe des heures à chercher des solutions à mes problèmes, s’en est presque décourageant. Mais lorsque je trouve des solutions, je suis encore plus fière.

Conclusion

J’ai pas mal galéré pour se travaille à partir du moment où j’ai dû coder la version tablette. Je me suis rendu compte que je ne maîtrisais pas encore les grilles et visiblement les blocs non plus, il va falloir que je travaille tout ça, je prends note et j’applique. Mais ce workshop m’a vraiment apprise que je ne devais pas sous-estimer le travaille que représentait la conception d’un site internet et qu’il y a bien plus de travaille qui se prépare à coté qu’on ne peut l’imaginer, c’est toute une mécanique de réflexion et de prise de tête qui se cache derrière. Même si ce que j’ai fait est tout à fait imparfait je suis quand même fière de savoir que je peux donner autant de travail et que donner autant de temps pour faire cela me plaît en fin de compte. Peut-être que la prochaine fois, je m’y mettrais un peu plus tôt, car j’ai beaucoup de choses à apprendre et à corriger. J’y crois.