Case Study

Travail de fin d'année

Mardi 22 mars 2016

Premiére approche du TFA par l’intermédiaire d’une diapositive de présentation. Il nous est demandé de faire des recherches sur notre stage de l’année prochaine et de réaliser deux “Landing page” à envoyer à deux entreprises différentes présentant notre personnalité, un projet et nos ambitions à venir dans l’entreprise. Ces “Landing page” redirigeront le lecteur, s'il le souhaite, vers une page personnelle où se trouveront différents projets personnalisés.

Les outils

Mecredi 23 mars 2016

Un questionnaire a été mis à la disposition des étudiants pour les diriger vers un éventuel contenu. Je commence par répondre à toutes ces questions avant de me lancer dans la recherche d'un stage.

Le stage

Je consulte quelques entreprises sur Ux Designer in Belgium. Ma recherche se dirige vers un stage centré sur le développement et un autre sur le côté visuel. Ceci a pour but de diversifier mon projet et d'apprendre dans les deux domaines.

Premier contact

Après une documentation recherchée, je rédige un email s’adressant à l’entreprise pour faire ma demande de stage. Ces emails seront personnalisés aux attentes de l’entreprise pour attirer toute leur attention et prouver que j’ai réalisé des recherches à leur sujet. Cette étape m’a permis de prendre un premier contact avec l’entreprise, de prendre connaissance de leurs travaux et de cibler le contenu de mes “Landing page”.

Emails

Jeudi 24 mars 2016

Visuels des "Landing Page"

Afin d’avoir une idée plus précise de ce que je vais devoir intégrer, je réalise les visuels de mes deux pages que je vais envoyer aux entreprises. Ces pages ont pour objectif de présenter un projet réalisé auparavant et d’inviter l’entreprise à prendre un premier contact avec moi ou à poursuivre la navigation de mes projets.

Le contenu

À l’aide des visuels, je rédige un contenu adéquat à chacune des entreprises, propre et très convaincant pour l’obtention du stage. Je dois impérativement me vendre à l’entreprise, leur montrer ma motivation et mon envie à venir d'apprendre au sein de leur équipe.

Vendredi 25 mars 2016

Recherche d’inspiration

Aujourd’hui je vais consacrer la majeure partie de mon temps dans la recherche d’idées pour réaliser la page TFA qui me représentera et mettra en avant mes différents projets réalisés. Un tableau “pinterest” me semble une excellente présentation de départ. Il sera ensuite suivit d’une recherche sur le site awwwards et dribbble.

Tableau Pinterest

Les polices

J'essaye plusieurs polices afin de trouver celle qui me convient le mieux et qui pourra mettre en avant le visue de mon TFA. Je dispose d’un compte “Typekit” pour m’aider dans cette recherche qui va me permettre d’avoir une idée bien plus précise des visuels que je vais réaliser. Une typo assez fun pour les titres suivie d'une police de caractères plus sérieuse pour le contenu pourrait très bien me représenter.

Conclusion atelier TFA

Au final de cet atelier TFA, quelques visuels ont été réalisés, des témoignages sympathiques d'étudiants de B2G2 ont été entendus et une approche de l'entreprise a pu être pris grâce à quelques recherches. Je ressors de ces 4 jours avec plusieurs idées pour la conception de mon TFA.

Le portfolio

Le portfolio sera la page principale du TFA. Celle-ci présentera qui je suis, ce que j'ai réalisé et ce que je veux être.Son but est, principalement, de me vendre à toutes entreprises sur le marché du web. Mais aussi de mettre en avant ma personnalité et par la suite, leur proposer de me contacter pour un stage.

Les croquis

Je mets en oeuvre mes premières idées en réalisant plusieurs croquis papier: ce que je voudrai faire, comment je vais mettre en avant mes projets, et ce que je vais épiloguer. Ceci va me permettre de tirer un premier visuel à mettre en place sur Photoshop avec un premier contenu.

Les visuels

Réalisation des visuels du portfolio sur le logiciel Photoshop. Plusieurs versions sont réalisées dans le but de les améliorer, de conserver ou retirer des éléments pour mon choix final.

Itérations

Les jours et les semaines qui suivent vont être consacrés à réaliser des itérations de mes visuels, en les modifiant, et en essayant d'en garder le meilleur. Dribble, Pinterest, Awwwards vont être "mes amis" pendant pas mal de temps et m’aider à donner le meilleur de moi-même dans ces réalisations. Mon thème “hiver, neige, montagne,…” étant mon choix, je dois, maintenant, en faire ressortir les plus beaux éléments pour mettre en valeur mon travail de fin d’année comme il se doit.

Du code, du code et encore du code

Maintenant que j’ai terminé les visuels (ou presque), je peux commencer à intégrer mes différentes pages. Je garde en tête que mes visuels peuvent encore être modifiés par la suite en fonction des idées qui me viennent. L'HTML/CSS sera ma priorité les jours qui suivent.

Javascript

Une fois l'HTML/CSS mis en place, je m'attaque à la partie des animations/interactions avec le JS. Par exemple, l'effet parallax, l'effet d'apparition, l'effet ascenseur,... sur mes différentes pages. En même temps, je finalise mon code, je le vérifie et j'indique quelques commentaires judicieux.

Mise en ligne

La mise en ligne va me permettre de vérifier si le JQuery fonctionne, si les polices chargent correctement et s'il n'y a plus d'erreurs console.

Vérification du codex

Le codex va me permettre de vérifier toutes mes pages à présenter le jour du TFA. L'HTML sera validé par W3C validator, les liens seront vérifiés,le site sera exécuté sans JS.

Optimisation des images/vidéos

Cette étape est importante car elle permet d'optimiser le site web afin qu'il soit visible au premier coup d'oeil. L'utilisateur doit avoir accès au site avec un temps d'attente minimum, il faut malgré tout conserver une excellente qualité d'image.

Adapter

Vérification du contenu

Il ne faut absolument rien oublier, est-ce que j'ai bien toutes les pages demandées, est-ce qu'elles sont toutes accessibles, est-ce qu'elles sont complètes? Les fautes d'orthographes vérifiées?

Vérification du codex d'un autre étudiant

Cette vérification va me permettre de voir le projet d'un autre étudiant, de le vérifier, de lui donner un feedback, mais aussi d'en recevoir un à mon tour. L'objectif est d'être sûr que tout est vérifié et est sous contrôle.

Conclusion final

Le TFA m'a permis de découvrir plusieurs nouveautés, comme la perspective dans un site web ou encore acquérir de nouvelles compétences dans le language Javascript. J'ai pu améliorer ma méthode de travail dans l'élaboration des projets, utiliser le codex pour produire une bonne expérience et ne rien laisser au hasard. J'ai fait un bond dans le domaine du web et j'ai pu y découvrir des expériences agréables comme "Epicurrence". À noté que j'ai amélioré ma façon d'intégrer en HTML/CSS et surtout j'ai pu avoir une nouvelle approche dans la réalisation et la recherche des visuels.