Introduction

Notre tfa, un side-project ?

J'avais entendu parler pendant toute l'année de la possibilité que notre tfa soit un simple site portfolio des travaux et workshops que nous avions réalisés pendant cette année. Et ça ne me plaisait pas forcément, car depuis le début de l'année, chaque workshop a été réalisé en groupe, et donc nous devions nous mettre d'accord à chaque fois sur un thème, donc pas de thème personnel à 100%.

Et là vient le jour d'introduction au TFA, surprise, on nous dit que non, ça ne sera pas un site portfolio comme les autres années, mais un side-project, un projet totalement libre et personnel. On peut donc se lâcher.

Mais c'est quoi un side-project ? Un side project c'est un projet réalisé par un designer, inventé par lui même, pour montrer ses capacités. Beaucoup de web designer utilisent les side-projects pour se constitué un portfolio en vue de trouver un travail.

Notre side-project à nous, il va nous servir à montrer nos compétences, pour trouver un stage. Je n'aurais pas pu rêver mieux, on nous laisse libre choix sur le thème, sur le design, aucune contrainte, tant qu'on crée quelque chose d'original et de cohérent.

Ça a été ma grande motivation, j'avais un thème libre, et je pouvais maintenant me concentrer sur les compétences que je voulais acquérir et celles que je voulais améliorer.

Développement 

La première chose a été de trouver un thème, étant un passionné de tout ce qui touche autour de l'univers, dès que j'ai entendu les mots "thème libre", je savais que j'allais travailler sur l'univers. Il m'a fallu 2/3 jours pour que l'idée mûrisse dans ma tête et que j'arrive à une idée claire sur comment mélanger l'espace et le web design : une agence de voyages du futur, qui proposerait des voyages interstellaires autour des plus belles galaxies et nébuleuses de l'univers.

Image d'une nébuleuse vue de loin

Maintenant que nous avons notre idée, il faut la mettre en place, la détailler, la perfectionner. J'ai donc commencé par rechercher diverses inspirations de design, et je me suis en même temps documenté pour choisir quelles nébuleuses et galaxies j'allais choisir. Heureusement pour moi, la Nasa a une collection d'images splendides et de très très bonnes qualités, libre de droits, j'avais donc tous les outils en mains pour réaliser ce que je voulais.

J'ai d'abord fait un plan du site, et j'ai réfléchi à quel page devrait-être créé, une fois le plan du site réalisé. J'ai commencé à faire des designs.

Au début du TFA, je pensais m'orienter vers un site simple, pour pouvoir me concentrer principalement sur le code. Car les compétences que je voulais développer et montrer étaient mes compétences en code. J'ai toujours eu l'impression d'être plus doué en code qu'en design, j'avais la sensation de ne pas avoir ce petit plus, cette fibre du design.

Je sentais ça comme une faiblesse comparée au code qui sont les cours que je préfère, c'est là où je suis le plus à l'aise, car il n'y a pas de place pour le jugement subjectif, un code fonctionne ou il ne fonctionne pas, il y a des façons de l'optimiser bien sûr, c'est ça que j'adore, plus on code, et plus on apprend à perfectionner sa manière de coder, et plus notre code est meilleur.

Mais après avoir commencé à faire des designs, je me suis rendu compte que malgré ma faiblesse dans ce domaine, une faiblesse, ça se travaille, c'est comme un muscle, comme la mémoire, si on s'entraîne, on devient meilleur.

C'est là que j'ai décidé de baser mon TFA un peu moins sur le code et un peu plus sur le design. Je voulais clairement sortir de ma zone de confort, en apprendre plus sur moi même, sur mes compétences, et surtout m'améliorer dans les deux disciplines, au lieu de me focaliser sur une seule.

Donc mon choix était fait, j'allais donc d'abord me concentrer sur le design, et une fois terminé, je pourrai commencer à coder. Grâce à l'aide des professeurs, mon design du début de mes idées à la finalisation de mon site a beaucoup changé, ils m'ont permis de rester sur le droit chemin et de ne pas m'égarer, et ils m'ont permis d'acquérir une vision du design que je n'avais pas avant. Puisque mon site est un site de voyage, j'ai dû aussi me concentrer sur l'aspect expérience utilisateur du site, et aussi pour que le contenu de mon site soit en accord avec le but du site : vendre des places de voyages aux clients.

Au début j'expliquais en détail ce qu'était des nébuleuses, des galaxies, et mon site ressemblait plus a un Wikipédia mis en design, qu'un site de voyage. J'ai donc changé et amélioré mon contenu et mes designs, pour que tout soit en ordre aussi bien au niveau du site de voyage qu'au niveau de l'expérience user-friendly du site.

On peut voir sur l'image du dessous que mon design a totalement changé de la première à la dernière modification, sur la dernière modification j'ai rajouté beaucoup de contenu que je n'avais pas intégré sur la homepage au départ.

Evolution du design de la homepage

Parlons du code maintenant, comme cité plus haut, c'est, des deux compétences, celle que je préfère le plus. Et je voulais dans mon tfa développer mes compétences en JavaScript, et aussi découvrir d'autres librairies JavaScript.

J'ai donc découvert la librairie ScrollMagic, qui permet de déclencher des animations en fonction du scroll sur la page. J'ai fait un premier essaie que vous trouverez ici, pour il n'était pas du tout optimisé, et j'ai opté pour un design et une utilisation de cette librairie plus user friendly. Je me suis concentré sur tout les petits détails du site qui pouvait être réalisé en JavaScript. J'ai aussi utilisé le sass, qui facilite l'optimisation et la rédaction de nos styles de css.

Screen Shot de mon Sublime text

Problèmes et solutions

Donc les principaux problèmes que j'ai rencontrés ont d'abord été le design, comme cité au-dessus, j'ai pu arrivé a un résultat que je trouve satisfaisant comparé au tout début de la création de mon site, l'optimisation des images, le no-js et le responsive.

L'optimisation des images du site a posé problème, la plupart de mes images sont issues des télescopes de la Nasa, et sont donc des énormes images de très très bonnes qualités. Le problème a été de les rendre beaucoup moins lourdes, j'ai fait au mieux, je suis passé de toutes les images qui pesaient 80 Mo, à des images qui pèsent entre 200ko et 1000ko.

Screen Shot du site de la nasa qui propose leur image en très grande qualité

Certaines images prennent donc un peu de temps a chargé, mais puisque j'en avais besoin en bonne qualité, pour pouvoir les affiché en full screen sur toutes les tailles d'écrans, je ne pouvais pas faire autrement. Et c'est pareil lorsque les supports sont des écrans rétina, les images sont encore plus grandes et plus lourdes, mais impossibles de les rendre plus petites sous peine d'avoir des images totalement pixelisées, et ce n'était pas le but étant donné que mon site est un site de voyage qui doit montrer des images de belles qualités aux clients.

Puisque mon site se concentre principalement sur le code, et le JavaScript, j'étais dans l'incapacité de faire une version no-js, car mon site et toutes ses fonctionnalités ont été pensés pour être utilisé avec du JavaScript. Faire un site no-js aurait revenait a redésigner le site et la façon dont le site fonctionne en lui-même.

Concernant le code, je n'ai pas eu de problème au début, j'aime apprendre de nouvelle manière de coder et de nouvelles libraires, donc je n'ai pas eu de gros problèmes ni de gros bug à ce niveau-là. Mais là où j'ai vraiment eu des problèmes, c'est la version mobile.

Pour la version responsive desktop, je n'ai pas eu de gros problèmes, j'ai utilisé l'inspecteur de chrome pour pouvoir mettre les tailles des écrans des portables. Le petit problème a été que lorsque je mettais par exemple les dimensions en pixels d'un mac 15", sur l'inspecteur tout était parfait, puis quand j'envoyais mon site à des amis qui sont sur mac, ils y avaient de petits problèmes d'affichage, or les dimensions sont exactement les mêmes. Je ne sais toujours pas d'où venait ce problème, mais n'ayant pas de mac, heureusement que mes amis m'ont prévenu de ces bugs.

Parlons maintenant de la version mobile, c'était la première fois que je réalisais un site en responsive hors cours. Pendant les workshop, j'étais très souvent celui qui codait le JavaScript ou une partie, et on avait toujours notre designer du groupe, un 2.5 qui s'occupait de la version desktop et mobile, car il était clairement meilleur que moi en design et en responsive.

Je me suis donc arraché les cheveux pour la version mobile, qui fonctionne sur toutes sortes de simulateurs de responsive, celui-là m'a le plus aidé à réaliser le responsive. Mais dès que j'allais voir mon site avec mon propre téléphone, plus rien n'allait. J'ai donc du modifier, et modifier, et le problème toutes ces modifications c'est quand je corrigeais un bug d'affichage, un autre se créait. J'ai finalement réussi à coder mon site en responsive.

Session d'août

Repassant le TFA à la session d’août, j’ai pu grâce aux explications des professeurs savoir exactement ce qu’il fallait changer et ce qu’il fallait améliorer.

Je me suis donc concentré sur la cohérence globale du design. J’avais effectivement trop de designs différents et ça ne créait pas une sensation d’ensemble.

J’ai modifié le bas de la homepage pour l'uniformiser.

Comparaison modifications homepage

J’ai changé la page Caelestis Objectum pour qu’elle soit en accord avec la homepage.

Comparaison modifications page Caelestis

J’ai modifié la page de réservation, qui comme la page de sélection de galaxies, n’est pas scrollable. J’ai changé les couleurs pour qu’on ressente bien que les pages ont un rapport l’une avec l’autre.

Comparaison modifications page réservation

J’ai finalement aussi uniformisé les pages des crédits et de politique de confidentialité.

Comparaison modifications pages crédits et politique

Une fois que le design était accordé, j’ai pu m’attaquer aux petites erreurs du codex.

J’ai réussi à régler le problème de mes tailles d’images, j’ai modifié les tailles de mes images et je les ai passées plusieurs fois dans différents outils de compression : Photoshop, compressor.io, kraken.io, imageoptim.

Concernant les petites erreurs du code à savoir une erreur jquery, une erreur dans la console et plusieurs document.ready. J’ai réglé le problème de l’erreur jquery et de l’erreur console, j’avais simplement fait appel à un élément jquery en oubliant de link le jquery à mon html. Et j’ai assemblé tous mes fichiers javascript en un pour qu’il n’y ait plus qu’un seul document.ready.

Conclusion

Ce TFA, m'a énormément apporté durant ce mois de travail. J'ai l'impression d'avoir plus progressé pendant ce mois que pendant toute l'année entière, car j'ai appris à me connaître moi et surtout mes faiblesses. J'ai pu travailler sur ces faiblesses et les transformer en motivation. En motivation de vouloir faire mieux que je pensais pouvoir faire.

J'ai découvert que je ne me passionnais pas seulement par le code, mais bien aussi par le design, la seule chose qui me freinait était simplement savoir que j'étais plus faible que les autres dans cette discipline.

J'ai aussi beaucoup appris par moi même, grâce à internet, qui est une vraie mine d'or d'informations. J'ai pu développé considérablement mes capacités en code comparé à il y a un mois.

Image d'un texte level up

Et j'ai pu ensuite mettre en œuvre tout ce que j'avais appris dans le déroulement de la création de mon side-project, dans la rédaction, le design, et le code des pages de présentation, de case study, de la page à propos et aussi de ma VCARD que j'ai refait entièrement.

En conclusion, ce TFA m'aura apporté non seulement des nouvelles connaissances, du perfectionnement de celles que j'avais déjà et de nouveaux objectifs. Mais surtout plein de motivation pour mon futur, être meilleure en design, pour que cette discipline ne soit plus une faiblesse, mais une nouvelle force, et devenir une tête en code, car c'est la discipline dans laquelle j'aimerai devenir le plus performant.