Le commencement

Toute l’option de Design Web & Mobile s’est retrouvée au B99 pour le 1er jour de la rentrée. Après la présentation, nos professeurs nous ont demandé de nous mettre par groupes de 4: ceux-ci sont constitués d’un élève doublant, que l’on appelle 2.5 du fait qu’il se trouve entre la 2ème et la 3ème) et de 3 nouveaux élèves.
Je me suis donc mis avec Aude Collin, une amie qui m’avait déjà présenté l’option pendant les grandes vacances. Aude étant une 2.5, ils nous restaient plus qu’à trouver 2 autres personnes. Ça n’a pas été trop difficile puisque nous avons demandé à deux étudiants qui se trouvaient derrière nous s’ils avaient un groupe et dans le cas contraire s’ils étaient d’accord de travailler avec nous, chose qu’ils ont directement acceptée !

La première chose que nous donc été demandé de faire a été de regarder une conférence parmi celles qui nous étaient proposées et d’en faire un compte-rendu.

Étape 1: La retranscription

La première étape a donc été pour moi d’aller sur le site de la conférence et de la retranscrire du mieux que je pouvais, puisque celle-ci était en anglais. J’ai été heureux de voir que les sous-titres pouvaient être activés, me facilitant ainsi la compréhension de certains moments de la vidéo qui n’était pas fort clairs.

conférence Base Design

Puisque celle-ci durait 47 minutes, j’ai décidé de diviser la vidéo en 3 parties de 15 minutes. De cette façon, je pouvais regarder une partie par jour et passer plus de temps sur chacune d’elles. J’ai donc fait plusieurs fois des retours en arrière me permettant de noter tout ce qui me semblait essentiel.
Au bout de 3 jours, j’avais donc terminé mon analyse, et noté ce qui m’avait semblé important pour la retranscription.

Étape 2: La mise en commun

Une fois l’étape 1 terminée, nous avons pu passer à la mise en commun. En groupe, nous avons rassemblé toutes nos notes en vue de réaliser un bon résumé. Nous avons donc discuté de ce qu’y serait primordial à garder parmi toutes nos notes, l’avantage c’est que nous avions tous une bonne base commune, il n’a donc pas été difficile pour nous d’avoir un résumé.
Un autre avantage a été le fait que nous travaillons depuis Google Doc, permettant donc aux différents professeurs de lire en direct ce que nous écrivions, et ainsi nous corriger si quelque chose n’allait pas !

Le premier avis que l’on a eu n’a pas été positif… en effet, malgré le fait que nous avions notre structure globale, celle-ci était trop brouillonne, il fallait l’étoffer pour avoir un bon texte qui serait notre HTML de notre futur site web.
On s’est donc partagé le travail afin d’avancer assez rapidement et par conséquent perdre le moins de temps possible; chaque membre du groupe a retravaillé un point particulier du document, de cette manière nous avons rapidement obtenu quelque chose de correcte et qui a été approuvé par nos professeurs !

capture d'écran du google doc du groupe

Une fois le contenu validé, ils nous restaient plus qu’à trouver des titres à nos différentes sections, nous avons donc eu l’idée de rajouter des titres “putaclick” autrement dit, des titres aguicheurs que l’on peut facilement retrouver sur la plateforme YouTube.

capture d'écran d'un titres de ma section

Étape 3: Le Markdown

Le texte terminé, nous sommes passé au Markdown, autrement dit un langage de balisage léger qui a pour but de nous offrir une syntaxe facile à lire et à écrire.
Cette partie du travail nous a demandé du temps lié au fait que nous n’avions jamais utilisé ce genre de procédé avant ce jour. Il a donc fallu comprendre comment fonctionnait le balisage pour nos titres, paragraphes, légendes, etc … heureusement nous avons pu compter sur Aude et William qui ont vite pris en main le problème et ont su réaliser le balisage de notre texte !

Un autre problème que nous avons dû dominer concernait les listes: en effet, le site que l’on utilisait pour faire le Markdown ne permettait pas de réaliser une sous-liste d’une liste déjà existante …Après de nombreux essais Aude et William ont réussi à trouver une solution au problème en modifiant légèrement la structure de nos listes.

capture d'écran du markdown de notre groupe

Étape 4: Le design

L’étape de l’analyse, du résumé et du markdown étant terminée, nous avons pu passer à la suite: Le design.
À partir de ce moment précis il nous était demandé de travailler seul, la seule chose qu’on a donc en commun avec les membres du groupe était le markdown, qui sera le contenu de notre site; le design lui sera différent pour chacun du groupe. Vous pouvez d’ailleurs retrouver ce que mes camarades ont fait en cliquant sur chacun de leurs prénoms: Aude, William, Alexis.

Pour commencer, j’ai dû travailler sur ma couleur de paragraphe. Elle repose sur 3 principes fondamentaux: La font que l’on va utiliser, la valeur de l’interlignage et la longueur de ligne.

capture d'écran de la slide sur couleur de paragraphe

J’ai donc lancé Invision et essayé toutes sortes de valeur et de fonts. Néanmoins, j’avais déjà à l’idée 2 fonts que je trouvais intéressantes pour les titres : Archivo Black et Poppins. Je me suis donc lancé à la recherche d’une 2ème font à utiliser pour le contenu principal qui se marierait bien avec celle de mon titre.

Après quelques recherches et testes de fonts je suis tombé sur DM Sans, même si je la connaissais déjà, je n’ai pas pensé à la tester. J’ai trouvé qu’elle se mélangeait assez bien avec Archivo Black, pas trop fine ni trop grasse, facile à lire et pas fatigante à la vue.
Il ne me restait plus qu’à trouver une 2ème font qui irait avec celle de Poppins, cependant en faisant des recherches, j’ai vu un site qui utilisait Poppins pour tout son contenu il variait simplement la graisse, je suis donc parti dans la même optique !

artboard Invision de mes différentes fontes choisies

Il ne me restait plus qu’à trouver un interlignage ainsi qu’une longueur de ligne qui convient pour mes 2 versions différentes et pour finir, trancher sur celle que je choisirai.
Après quelques essais, j’ai décidé de choisir un rapport hiérarchique de 1.5 avec une font de 16px ce qui me fait un interlignage de 24px ! Pour ce qui est de la longueur de ligne je suis parti sur 39 caractères pour ma version mobile et 66 caractères pour ma version tablette.

Pour finir, j’ai dû faire un choix entre mes 2 versions, mon choix s’est porté sur la 1er, celle avec la font Archivo Black/ DM Sans, tout simplement par question de goût, je trouvais qu’elle se mélangeait bien avec le style que je voulais donner à mon site.

artboard Invision de ma couleur de paragraphe

L’étape d’après a été de réaliser mon rythme vertical, cette étape ne m’a pas semblé des plus compliqués, puisqu’elle repose sur le fait de jouer sur des multiples de la taille de ma font en vue de trouver les bons espacements entre mon titre et mon texte, etc …
j’ai donc rapidement obtenu un rythme qui me plaisait et qui a également plu aux professeurs.

artboard Invision de ma hiérarchie artboard Invision de mon rythme vertical

Étape 5: Le codage

La dernière étape, le codage, là où tout prend forme … ou presque. En effet, nous ne devions pas tout coder dès le début, on nous a d’abord demandé de réaliser la version mobile étant donné que nous travaillons en Mobile First!

Je n’ai pas eu de difficulté à réaliser mon HTML puisque j’ai dès le début réfléchi aux différentes sections ainsi que divs que mon code comportera; cette réflexion s’est faite lorsque j’étais sur Invision et que je travaillais mon design, je renommais au fur et à mesure mes éléments que je rajoutais à mon design, ensuite je les groupais dans des dossiers qui représentaient mes divs.

capture d'écran de mes layers sur Invision

Ensuite, grâce au Markdown que nous avions réalisé plus tôt j’avais déjà mon texte structuré et dont il me restait plus qu’à coller dans mon HTML et d’ajouter les balises nécessaires.

Là où j’ai eu du mal a été au moment de coder mon CSS, d’abord parce que c’est le 1er “vrai” site web que je code ensuite parce que j’ai essayé de quitter ma zone de confort en jouant sur des sections de couleurs différentes, avec des images qui recoupent ces sections.

capture d'écran de mon image coupant mes deux sections

J’ai donc passé énormément de temps à réfléchir comment faire et j’ai trouvé une solution qui s’est avérée mauvaise lors de la suite du codage. Premièrement, parce que mon code n’était pas propre, je me retrouvais avec des margin-bottom de -108 px à certains endroits, et des margin-top de -130px à d’autres en vue d’espacer mes éléments de la même manière que mon design … d’ailleurs le professeur qui s’occupait du cours de design m’a fait la remarque au moment de lui montrer mes avancements!
Deuxièmement, parce qu’au moment de modifier la taille de mes images pour les adapter au format tablette, je me retrouvais avec des espaces blancs entre les 2 sections que mon image coupe …

capture d'écran des mauvaises valeurs que j'avais en margin et padding

J’ai donc été dans l’obligation de stopper le codage de ma version tablette et de revoir une grosse partie du CSS de ma version mobile !
Après pas mal de temps de recherche, de bidouillage et de casse-tête, j’ai trouvé la solution à mon problème. j’ai donc passé une partie de ma journée à tout corriger et à tout revérifier. À la fin, je me suis retrouvé avec un site qui respectait mon design sur Invision avec des valeurs d’espacements tout à fait similaires ! J’ai donc pu redémarrer sur de bonnes bases pour la suite et la fin du codage.